index.scss

@import "./variables";
@import "./globals";

.gaz-color {
  color: $gaz-color;
}
.water-color {
  color: $water-color;
}
.elec-color {
  color: $elec-color;
}

nav {
  @include nav-height();
  width: 100%;
  position: fixed;
  z-index: 100;
  background: radial-gradient(
    74.83% 76.97% at 50% 13.64%,
    #343641 0%,
    #1b1c22 100%
  );
  padding: 1rem 4rem;
  display: flex;
  justify-content: space-between;
  transition: all 300ms ease;
  .main-logo {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.5rem;
  }
  .links {
    display: flex;
    align-items: center;
    gap: 3.5rem;

    .navlink {
      text-decoration: none;
      font-weight: 700;
    }
  }
  @media (max-width: $breakpoint) {
    .main-logo {
      margin: auto;
    }
    .links {
      display: none;
    }
  }
}

.container {
  padding: 0 1rem;
  @media (min-width: $breakpoint) {
    padding: 0;
  }
}

.main-cta {
  margin: auto;
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 5rem 2rem 5rem 8rem;
  @media (max-width: $breakpoint) {
    padding-top: 4rem;
    padding-bottom: 2rem;
    padding-left: 2rem;
    gap: 1rem;

    .illu {
      order: 1;
    }
    .content-txt {
      order: 2;
    }
    .mglLogo {
      order: 3;
    }
  }
  .content-txt {
    margin-top: 5rem;
    max-width: 700px;
    @media (max-width: $breakpoint) {
      margin-top: 0rem;
    }
    h2 {
      margin-top: 1.5rem;
      font-weight: 700;
    }
    ul {
      padding-top: 1rem;
      li {
        margin-bottom: 0.5rem;
      }
    }
    .button {
      margin: 2rem 0;
      @include button($black, $yellow);
      font-size: 1.25rem;
      text-align: center;
      justify-content: center;
      gap: 0.5rem;
      font-weight: 700;
      line-height: 115%;
      padding: 0.5rem 1rem 0.5rem 0.5rem;
      background: radial-gradient(
          105.25% 64.58% at 49.68% 70.83%,
          rgba(226, 137, 4, 0.5) 0%,
          rgba(255, 255, 255, 0) 100%
        ),
        $yellow;
      @media (max-width: $breakpoint) {
        margin: 1.5rem auto;
      }
      img {
        transform: translate(0, 2px);
      }
    }
  }
  .illu {
    @media (max-width: $breakpoint) {
      width: 100%;
    }
  }

  .mglLogo {
    display: flex;
    padding: 0.5rem 1rem;
    border: 1px solid white;
    border-radius: 6px;
    margin-top: 5rem;
    @media (max-width: $breakpoint) {
      margin-top: 0;
    }
  }
}

.explanation {
  background: $bg-light;
  text-align: center;
  padding-top: 5rem;
  @media (max-width: $breakpoint) {
    padding: 2rem 1rem;
  }

  .compteurs {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 7rem;

    & > *:not(:last-child) {
      margin-right: 0.8rem;
    }

    @media (max-width: $breakpoint) {
      flex-direction: column;
      & > div:not(.gaz-color) {
        margin-bottom: 2rem;
        margin-right: 0;
      }
      span {
        margin-bottom: 5rem;
      }
    }

    span {
      color: $grey;
      font-size: 1.1rem;
    }
    .bloc {
      width: 280px;
      height: 280px;
      padding: 0.5rem;
      background: linear-gradient(180deg, #323339 0%, #25262b 100%);
      border: solid 1px;
      border-radius: 4px;
      box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);
      display: flex;
      flex-direction: column;
      position: relative;
      transition: all 300ms ease;
      &:hover {
        box-shadow: 0 0 10px 0 currentColor;
      }
      h3 {
        color: currentColor;
        margin-top: 8rem;
        font-weight: 900;
        font-size: 2rem;
      }
      .compteur-img {
        position: absolute;
        top: -6rem;
        left: 0;
        right: 0;
        margin: auto;
      }
      p {
        padding-top: 0.5rem;
      }
      .provider-logo {
        margin-top: auto;
        display: flex;
        height: 35px;
        img {
          margin: auto;
        }
      }
    }
    .elec-color {
      border-color: rgba($elec-color, 0.4);
    }
    .gaz-color {
      border-color: rgba($gaz-color, 0.4);
    }
    .water-color {
      border-color: rgba($water-color, 0.4);
    }
  }
  .fluid-pipes {
    margin-top: 1.5rem;
    img {
      @media (max-width: $breakpoint) {
        width: 100%;
      }
    }
  }
}

.security {
  background: radial-gradient(
      105.25% 64.58% at 49.68% 70.83%,
      rgba(226, 137, 4, 0.5) 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    $yellow;
  display: flex;
  margin-top: -1rem;
  position: relative;
  &:before,
  &::after {
    content: "";
    display: inline-block;
    position: absolute;
    width: 100%;
    height: 10px;
    left: 0;
    background-image: url("assets/pattern-dot.svg");
    background-color: $dark-yellow;
    background-repeat: repeat-x;
    background-position: center;
    z-index: 1;
  }
  &::before {
    top: -0.5rem;
  }
  &:after {
    bottom: -0.5rem;
  }
  .container {
    max-width: 1400px;
    margin: 0 auto;
  }
  .container-cloud {
    display: flex;
    position: relative;
    padding: 7rem 0 2rem;
    justify-content: space-between;
    align-items: center;
    @media (min-width: $breakpoint) {
      padding: 3rem 0;
    }
  }
  p {
    color: $black;
    font-size: 1.5rem;
    font-weight: 700;
    flex-basis: 40%;
    &:nth-of-type(1) {
      text-align: right;
    }
  }
  a {
    color: $black;
  }
  .xs-text {
    display: block;
    flex-basis: 100%;
    text-align: center;
    @media (min-width: $breakpoint) {
      display: none;
    }
  }
  .xl-text {
    display: none;
    line-height: 140%;
    @media (min-width: $breakpoint) {
      display: block;
    }
  }
  .container-img {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    @media (max-width: $breakpoint) {
      top: -70px;
      transform: translateX(-50%);
      width: 45%;
    }
    img {
      width: 100%;
    }
  }
}
.views-app {
  background: $bg-light;
  padding-bottom: 2rem;
  @media (max-width: $breakpoint) {
    padding-bottom: 0;
  }
  .content {
    max-width: 945px;
    width: 100%;
    margin: 0 auto;
  }
  .fluid-pipes {
    text-align: center;
    @media (max-width: $breakpoint) {
      display: none;
    }
    img {
      transform: translate(0, -25px);
    }
  }
  .screens-container {
    display: flex;
    justify-content: center;
    padding-bottom: 1rem;
    @media (max-width: $breakpoint) {
      flex-direction: column;
      margin-top: 0.5rem;
      .screen {
        text-align: center;
        padding-top: 6rem;
        position: relative;
        &:before,
        &:after {
          content: "";
          display: inline-block;
          height: 100px;
          width: 1px;
          background: $yellow;
          position: absolute;
          box-shadow: 0px 0px 25px 1px #ffc600;
          top: 0;
          z-index: 1;
        }
        &::before {
          left: 48%;
          transform: translateX(-50%);
        }
        &::after {
          left: 52%;
          transform: translateX(-50%);
        }
      }
      img {
        width: 90%;
        position: relative;
        z-index: 2;
      }
      p {
        margin: 1.5rem 0;
      }
    }
    .screen {
      &.consumption,
      &.ecogesture {
        margin-top: 0;
        @media (min-width: $breakpoint) {
          margin-top: -8rem;
        }
      }
      &.challenge {
        @media (min-width: $breakpoint) {
          margin-top: -4rem;
        }
      }
      p {
        font-weight: 700;
        line-height: 120%;
        margin-top: 1rem;
      }
      &.consumption {
        @media (min-width: $breakpoint) {
          margin-right: -5.5rem;
        }
        span {
          color: $elec-color;
        }
      }
      &.challenge {
        span {
          color: $light-blue;
        }
      }
      &.ecogesture {
        @media (min-width: $breakpoint) {
          margin-left: -5.5rem;
        }
        span {
          color: $fluid-color;
        }
      }
    }
  }
  p {
    line-height: 24px;
    font-size: 1.25rem;
    text-align: center;
    margin: 1.5rem 0;
    @media (min-width: $breakpoint) {
      margin: 2rem 0 0;
    }
    span {
      display: block;
      font-size: 1.5rem;
    }
  }
}

.create-account {
  background-color: $black;
  padding: 2.5rem 0;

  h2 {
    font-size: 2.25rem;
    text-align: center;
  }

  .containerSteps {
    padding: 2rem 1rem 3rem;
    max-width: 1000px;
    margin: auto;
    .step {
      display: flex;
      align-items: center;
      gap: 1rem;

      &:not(:last-child) {
        margin: 2.5rem 0;
      }
      @media all and (max-width: $large-device) {
        flex-direction: column;
        align-items: center;
      }
      .flex {
        display: flex;
        align-items: center;
        gap: 1rem;
      }
    }

    .number {
      font-size: 5rem;
      @media all and (max-width: $large-device) {
        margin-top: 0;
        font-size: 3rem;
      }
    }
    .content {
      @media all and (max-width: $large-device) {
        font-size: 1rem;
      }
    }
    .header {
      font-weight: 900;
      font-size: 1.5rem;
      margin-bottom: 0.5rem;
      @media all and (max-width: $large-device) {
        font-size: 1.2rem;
      }
    }
    .content {
      font-size: 1.2rem;
      font-weight: 400;
    }
  }
  .createAccountButton {
    @include button($black, $yellow);
    margin: auto;
    font-size: 1.5rem;
    text-align: center;
    justify-content: center;
    font-weight: 700;
    padding: 2rem 3rem;
    border-radius: 4px;
    background: radial-gradient(
        105.25% 64.58% at 49.68% 70.83%,
        rgba(226, 137, 4, 0.5) 0%,
        rgba(255, 255, 255, 0) 100%
      ),
      $yellow;
  }
}

.cloud-gl {
  padding: 2rem 1rem 2.5rem;
  background: $bg-light;
  color: white;

  .text-content {
    max-width: 689px;
    text-align: center;
    margin: 0 auto;
  }

  h2 {
    font-size: 1.75rem;
    font-weight: 900;
    margin: 1rem;
  }
  p {
    line-height: 1.463rem;
    padding: 0;
  }
  .button {
    display: inline-block;
    background: $red-alert;
    text-align: center;
    border-radius: 4px;
    padding: 12px 16px;
    margin-top: 1.25rem;
    text-decoration: none;
    max-width: 221px;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.238rem;
    transition: all 0.4s;
    &:hover {
      box-shadow: 0px 0px 10px 0px $red-alert;
    }
  }
}

footer {
  background-color: $black;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1rem 2rem;
  padding-top: 5rem;

  .logos-footer {
    display: flex;
    align-items: center;
    gap: 1.5rem;
  }
  .footerLink {
    color: $yellow;
    font-weight: 900;
  }
  .contact {
    display: flex;
    gap: 1rem;
  }

  .info {
    display: flex;
    align-items: center;
    font-weight: 700;
    gap: 0.5rem;
    a {
      text-decoration: none;
    }
  }

  @media (max-width: $breakpoint) {
    flex-direction: column;
    padding: 2rem 1rem 1rem;

    .contact {
      order: 1;
      flex-direction: column;
      align-items: center;
    }
    .logos-footer {
      order: 2;
      flex-direction: column;
    }
    .info {
      order: 4;
      transform: scale(0.8);
    }
    .legal-notice {
      order: 3;
    }
  }
}