drupal-caravane/web/themes/custom/caravane/assets/scss/main.scss

@import 'fonts.scss';

$body-margin-x: 30px;
$body-margin-y: 5px;
$body-margin-bottom: 4vh;

$modale-x-padding: 5vw;

$sm-font-size: 0.8rem;
$m-font-size: 1.4rem;
$l-font-size: 1.8rem;
$xl-font-size: 2.4rem;

$main-color: #1a1918;
$main-color-light: #635b58;
$light-color: #faf1eb;
$brand-color: #80c8bf;

$menu-width: 15vw;
$menu-margin: 2rem;

body{
  font-family: 'Marianne', sans-serif;
  color: $main-color;
  margin: 0;
  padding: 0;
  overflow-y: scroll;
  &.no-scroll {
    overflow-y: hidden;
  }
  .layout-container {
    > header {
      z-index: 2;
      position: relative;
      > div {
        padding: $body-margin-y $body-margin-x 0 $body-margin-x;
        display: grid;
        grid-template-columns: repeat(16, 1fr);
        > #block-caravane-logorepublique {
          grid-column: 1 / span 1;
          display: flex;
          align-items: center;
          > div > div > a > img {
            width: 100%;
            height: auto;
          }
        }
        > #block-caravane-logoepau {
          grid-column: 2 / span 2;
          display: flex;
          align-items: center;
          > div > div > a > img {
            width: 100%;
            height: auto;
          }
        }
        > #block-caravane-logocaravane {
          grid-column: 7 / span 4;
          display: flex;
          align-items: center;
          > div > div > a > img {
            width: 100%;
            height: auto;
          }
        }
        > #block-caravane-mainnavigation {
          display: flex;
          justify-content: flex-end;
          grid-column: 16 / span 1;
          width: 10vw;
          margin-top: 1.8vh;
          position: fixed;
          right: $body-margin-x;
          > #menu-title {
            display: flex;
            z-index: 2;
            background-color: $brand-color;
            position: fixed;
            width: $menu-width;
            right: 0;
            top: 0;
            padding-top: 2.8vh;
            margin-right: $body-margin-x;
            padding-bottom: 10px;
            max-height: 0vh;
            overflow: hidden;
            height: 5vh;
            transition: max-height 0.3s ease-out, opacity 0.2s ease-out;
            opacity: 0;
            align-items: center;
            > p {
              padding-left: $menu-margin;
              margin: 10px 0;
              color: white;
              font-size: $l-font-size;
              font-family: 'Joost', sans-serif;
              font-weight: bold;
            }
          }
          > #menu-title.open {
            opacity: 1;
            max-height: 5vh;
          }
          > #menu {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            cursor: pointer;
            > h2 {
              z-index: 2;
              margin-block: 0;
              font-size: $sm-font-size;
              color: $main-color-light;
              font-weight: normal;
              margin-bottom: 5px;
            }
            > h2 {
              display: none;
            }
            > #hamburger {
              position: fixed;
              height: 5vh;
              right: 0;
              top: 0;
              margin-right: $body-margin-x;
              padding-top: 2.8vh;
              padding-bottom: 10px;
              z-index: 2;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              width: 2.4rem;
              transition: transform 0.3s ease-out, opacity 0.3s ease-out;
              > div {
                width: 100%;
                height: 3px;
                margin: 4px 0;
                border-radius: 2px;
                background-color: $main-color-light;
                opacity: 1;
                transition: transform 0.5s, opacity 0.2s;
              }
            }
            > #hamburger:hover {
              transform: scale(1.1);
            }
            > #hamburger.open {
              transform: scale(0.7) translateX(-20px);
              > div {
                background-color: white;
              }
              > div:first-of-type {
                transform: rotate(45deg);
                margin-top: 50%;
              }
              > div:last-of-type {
                transform: rotate(-45deg);
                margin-top: -50%;
              }
              > div:nth-child(2) {
                opacity: 0;
              }
            }
            > #hamburger.open:hover {
              transform: scale(0.75) translateX(-20px);
            }
            > ul {
              list-style-type: none;
              background-color: white;
              position: fixed;
              width: $menu-width;
              right: $body-margin-x;
              padding: 0;
              padding-top: 1.5rem;
              padding-bottom: 1.5rem;
              top: -5vh;
              opacity: 0;
              transition: top 0.3s ease-out, opacity 0.2s ease-out;
              z-index: 1;
              > li {
                padding-left: $menu-margin;
                margin: 15px 0;
                > a {
                  color: $main-color;
                  text-decoration: none;
                }
                > a.is-active::before,
                > a:hover::before {
                  content: '→';
                  color: $brand-color;
                  width: 2rem;
                  display: inline-block;
                  opacity: 1;
                }
                > a::before {
                  content: '→';
                  color: $brand-color;
                  opacity: 0;
                  display: inline-block;
                  width: 0rem;
                  transition: width 0.2s ease-out, opacity 0.2s ease-out;
                }
              }
            }
            > ul.open {
              opacity: 1;
              top: 7vh;
            }
          }
        }
      }
    }
    > main {
      z-index: 1;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      > .layout-content {
        z-index: 1;
        position: fixed;
        top: 0;
        width: 100%;
        height: 100%;
        > div {
          height: 100%;
          > .layout {
            display: grid;
            grid-template-columns: repeat(16,1fr);
            align-items: center;
            height: 100%;
            > .layout__region--first {
              padding-left: $body-margin-x;
              grid-column: 1 / span 4;
              position: relative;
              z-index: 2;
              pointer-events: none;
              width: fit-content;
              > div {
                pointer-events: auto;
              }
            } 
            > .layout__region--second {
              position: absolute;
              z-index: 1;
              top: 0;
              width: 100vw;
              .leaflet-container {
                // add map style here
                .leaflet-control-zoom {
                  border: none;
                  margin: 0;
                  left: $body-margin-x;
                  bottom: $body-margin-bottom;
                  > a {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: $m-font-size;
                    font-family: 'marianne', sans-serif;
                    font-weight: lighter;
                    width: 4vh;
                    height: 4vh;
                  }
                  > a:first-of-type {
                    border-top-left-radius: 2vh;
                    border-top-right-radius: 2vh;

                  }
                  > a:last-of-type {
                    border-bottom-left-radius: 2vh;
                    border-bottom-right-radius: 2vh;
                    > span {
                      padding-bottom: 10px;
                    }
                  }
                }
                .leaflet-right {
                  right: unset;
                  left: 0;
                }
                .leaflet-map-divicon {
                  width: 10px;
                  height: 30px;
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  align-items: center;
                  transition: transform 0.3s ease-out;
                  > div {
                    background-color: red;
                    display: block;
                    width: 20px;
                    height: 10px;
                    }
                  > div:first-of-type {
                    height: 8px;
                    clip-path: polygon(0 0, 100% 0, 50% 100%);
                    transform: rotate(180deg);
                  }
                  > div:nth-of-type(3) {
                    height: 8px;
                    clip-path: polygon(0 0, 100% 0, 50% 100%);
                  }
                }
              }
              .leaflet-tooltip-center {
                width: 20vw;
                padding: 0;
                border-radius: none;
                box-shadow: none;
                opacity: 1 !important;
                border-radius: 0 !important;
                background-color: transparent;
                border: none;
                pointer-events: none;
                > div {
                  display: grid;
                  grid-template-columns: minmax(10px, 10vw) 10vw;
                  grid-template-rows: 1.5fr 0.5fr;
                  transform: translateY(-60%);
                  background-color: white;
                  opacity: 0;
                  transition: opacity 0.3s ease-out;
                  > div:first-of-type {
                    grid-column: 1 / span 1;
                    grid-row: 1 / span 1;
                    font-family: 'Joost', sans-serif;
                    font-size: $m-font-size;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    padding-top: 10px;
                    padding-left: 20px;
                    padding-right: 20px;
                    text-wrap: wrap;
                    > a {
                      font-weight: bold;
                      text-decoration: none;
                      color: $main-color;
                      padding-right: 10px;
                    }
                  }
                  > div:nth-of-type(2) {
                    grid-column: 1 / span 1;
                    grid-row: 2 / span 1;
                    text-align: center;
                    padding: 10px 0;
                    > time {
                      font-size: $sm-font-size;
                      font-family: 'Marianne', sans-serif;
                      font-weight: lighter;
                    }
                  }
                  > a {
                    display: block;
                    grid-column: 2 / span 1;
                    grid-row: 1 / span 2;
                    overflow: hidden;
                    width: 100%;
                    height: 100%;
                    padding: 0;
                    > div {
                      width: 100%;
                      display: block;
                      padding: 0;
                      background-color: blue;
                      max-height: 0;
                      > img {
                        padding: 0;
                        width: 100%;
                        height: auto;
                        object-fit: cover;
                        margin: 0;
                        display: block;
                      }
                    }
                  }

                }
              }
            } 
            > .layout__region--third {
              padding-right: $body-margin-x;
              height: 100%;
              grid-column: 13 / span 4;
              position: relative;
              z-index: 2;
              background: linear-gradient(to right, transparent, #faf1eb);
              display: flex;
              align-items: center;
              justify-content: flex-end;
              pointer-events: none;
              > div {
                pointer-events: auto;
                ul {
                  list-style: none;
                  > li {
                    display: flex;
                    justify-content: end;
                    align-items: center;
                    margin: 30px 0;
                    transform: scale(1);
                    opacity: 1;
                    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
                    cursor: pointer;
                    > .infos-arret {
                      display: grid;
                      grid-template-columns: auto auto;
                      grid-template-rows: auto auto;
                      justify-content: end;
                      margin-right: 20px;
                      p {
                        margin: 0;
                      }
                      > .views-field-title {
                        grid-column: 1 / span 1;
                        grid-row: 1 / span 1;
                        margin-right: 10px;
                        a {
                          text-decoration: none;
                          color: $main-color;
                          font-family: 'Joost', sans-serif;
                          font-weight: bold;
                          font-size: $m-font-size;
                          display: inline-block;
                          text-align: right;
                        }
                      }
                      > .views-field-field-adresse-postal-code {
                        grid-column: 2 / span 1;
                        grid-row: 1 / span 1;
                        color: $main-color;
                        font-family: 'Joost', sans-serif;
                        font-weight: lighter;
                        font-size: $m-font-size;
                        align-self: end;
                        > span {
                          > p::before {
                            content: '(';
                          }
                          > p::after {
                            content: ')';
                          }
                        }
                        
                      }
                      > .views-field-field-dates {
                        grid-column: 1 / span 2;
                        grid-row: 2 / span 1;
                        font-size: $sm-font-size;
                        font-family: 'Marianne', sans-serif;
                        font-weight: lighter;
                        text-align: right;
                        margin-top: 7px;
                      }
                      > .views-field-field-couleur {
                        display: none;
                      }
                    }
                    > .icone-arret {
                      width: 10px;
                      height: 30px;
                      display: flex;
                      flex-direction: column;
                      justify-content: center;
                      align-items: center;
                      > div {
                        background-color: red;
                        display: block;
                        width: 20px;
                        height: 10px;
                        &:first-of-type, &:last-of-type {
                          height: 8px;
                          clip-path: polygon(0 0, 100% 0, 50% 100%);
                        }
                        &:first-of-type {
                          transform: rotate(180deg);
                        }
                      }
                    }
                  }
                  > li:hover {
                    transform: scale(1.05);
                  }
                  > li.inactive {
                    opacity: 0.6;
                  }
                }
              }
            } 
          }
          > .user-login-form {
            height: 90vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            > div {
              margin: 20px 0;
            }
          }
        }
      }
      > #content-modale {
        > div:not(.image-viewer-wrapper, .image-modale) {
          padding-bottom: 40vh;
          background-color: red;
          > .content-wrapper {
            left: 25vw;
            width: 50vw;
            top: 15vh;
            z-index: 2;
            position: relative;
            background-color: white;
            img {
              width: 100%;
              height: auto;
              object-fit: cover;
            }
            > div {
              width: 100%;
              overflow: hidden;
            }
            > header {
              // margin-bottom: 3rem;
              > .cover {
                max-height: 60vh;
                display: flex;
                justify-content: center;
                overflow: hidden;
                position: relative;
                z-index: 0;
              }
              > .cartouche {
                position: absolute;
                top: 2rem;
                padding: 1rem 1.5rem;
                background-color: $brand-color;
                z-index: 1;
                > p {
                  margin-block-start: 0;
                  margin-block-end: 0;
                }
                > p:last-of-type {
                  font-weight: bold;
                }
              }
              > .locality {
                position: relative;
                z-index: 1;
                width: 50%;
                margin-left: 25%;
                margin-top: -245px;
                > .top-triangle {
                  display: block;
                  width: 100%;
                  height: 100px;
                  display: flex;
                  clip-path: polygon(-1% 100%, 50% 0, 101% 100%);
                  background-color: white;
                  margin-bottom: -1px;
                }
                > .locality-title {
                  min-height: 115px;
                  display: block;
                  background-color: white;
                  padding: 1rem 2rem;
                  display: flex;
                  align-items: center;
                  > h1 {
                    width: 100%;
                    font-size: $xl-font-size;
                    margin-block-start: 0;
                    margin-block-end: 0;
                    font-family: 'Joost', sans-serif;
                    text-align: center;
                    > em {
                      font-style: normal;
                      font-weight: lighter;
                    }
                  }
                }
              }
            }
            > main {
              width: 100%;
              padding: 0 $modale-x-padding;
              box-sizing: border-box;
              > #sensible-map {
                width: calc(100% + $modale-x-padding);
                margin-left: calc(($modale-x-padding / 2) * -1);
                margin-top: calc($modale-x-padding / 2);
                > figure {
                  margin: 0;
                  .vh--message {
                    font-size: $sm-font-size;
                    top: 1rem;
                    left: 1rem;
                    bottom: unset;
                    background-color: rgba(255, 255, 255, 0.6);
                    color: $main-color-light;
                  }
                  > figcaption {
                    margin-left: calc($modale-x-padding / 2);
                  }
                }
              }
              > .partie {
                width: 100%;
                display: inline-block;
                > .partie-title,
                > .chiffres-cles {
                  > h3 {
                    position: relative;
                    display: inline-block;
                    > p {
                      display: inline-block;
                      font-size: $l-font-size;
                      font-family: 'Joost', sans-serif;
                      margin: 0;
                      z-index: 1;
                      position: relative;
                      padding: 0 0.5rem;
                    }
                    > .underline {
                      z-index: 0;
                      left: 0;
                      top: 1.4rem;
                      position: absolute;
                      width: 100%;
                      display: inline-block;
                      height: 0.8rem;
                    }
                  }
                }
                > .chiffres-cles {
                  > div {
                    display: grid;
                    gap: 2rem;
                    grid-template-columns: 1fr 1fr 1fr;
                    align-content: flex-start;
                    margin: 2rem 0;
                    > div {
                      display: flex;
                      flex-direction: column;
                      align-items: flex-start;
                      justify-content: flex-start;
                      > .chiffre {
                        padding-left: 1rem;
                        font-size: $xl-font-size;
                        font-weight: bold;
                        font-family: 'Joost', sans-serif;
                        margin: 0;
                        > p {
                          margin: 0;
                        }
                      }
                      > .chiffre-caption {
                        padding-left: 1rem;
                        font-size: $sm-font-size;
                        margin: 0;
                      }
                    }
                  }
                }
                > .partie-content {
                  img {
                    margin-top: 2rem;
                    cursor: pointer;
                    transition: transform 0.3s ease-out;
                    &:hover {
                      transform: scale(1.01);
                    }
                  }
                }
                > .diaporama {
                  width: calc(100% + 2 * #{$modale-x-padding});
                  margin-top: 5rem;
                  margin-bottom: 3rem;
                  margin-left: -$modale-x-padding;
                  figure {
                    margin: 0 calc(#{$modale-x-padding} / 2);
                    > img {
                      width: 100%;
                    }
                    > figcaption {
                      padding-bottom: 2rem;
                    }
                  }
                }
                > .videos iframe {
                  margin: 2rem 0;
                }
              }
              .caption {
                font-size: $sm-font-size;
                color: $main-color-light;
                margin-top: 0.2rem;
                margin-bottom: 1.8rem;
              }
            }
            .brand-pattern {
              display: block;
              width: 100%;
              height: 120px;
              > .pattern {
                display: block;
                width: 100%;
                height: 100%;
                background-image: url(/themes/custom/caravane/assets/imgs/motif-caravane-invert-tile.png);
                background-size: 300px;
                background-size: repeat;
              }
            }
            .pattern-bottom {
              width: calc(100% + $modale-x-padding * 2);
              margin-left: -$modale-x-padding;
              height: 180px;
              margin-top: -90px;
            }
            .related-etape-links {
              position: absolute;
              margin-top: -3rem;
              width: calc(100% - $modale-x-padding);
              margin-left: -$modale-x-padding;
              padding: 0 calc($modale-x-padding / 2);
              display: grid;
              grid-template-columns: 1fr 1fr;
              > .card {
                width: 80%;
                display: flex;
                align-items: center;
                cursor: pointer;
                transition: transform 0.3s ease-out;
                &:hover {
                  transform: scale(1.05);
                }
                &.next {
                  grid-column: 2 / span 1;
                  justify-self: flex-end;
                }
                > .icon {
                  z-index: 2;
                  width: 10px;
                  height: 30px;
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  align-items: center;
                  > div {
                    display: block;
                    width: 20px;
                    height: 10px;
                    &:first-of-type, &:last-of-type {
                      height: 8px;
                      clip-path: polygon(0 0, 100% 0, 50% 100%);
                    }
                    &:first-of-type {
                      transform: rotate(180deg);
                    }
                  }
                }
                > .card-content {
                  z-index: 1;
                  background-color: white;
                  display: flex;
                  width: 100%;
                  > .infos {
                    width: 60%;
                    text-align: center;
                    > .titre {
                      padding: 1rem 0.5rem;
                      font-weight: bold;
                      font-family: 'Joost', sans-serif;
                      font-size: $m-font-size;
                      > span {
                        font-weight: lighter;
                      }
                    }
                    > .date {
                      font-size: $sm-font-size;
                      font-family: 'Marianne', sans-serif;
                      font-weight: lighter;
                      padding-bottom: 1rem;
                    }
                  }
                  > .vignette {
                    width: 40%;
                    position: relative;
                    > img {
                      top: 0;
                      position: absolute;
                      width: 100%;
                      height: 100%;
                      object-fit: cover;
                    }
                  }
                }
              }
            }
          }
        }
        > .image-viewer-wrapper {
          backdrop-filter: blur(3px);
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 100;
          > .img-modale {
            background-color: rgba(0, 0, 0, 0.8);
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          > .simple-viewer {
            > .img-wrapper {
              max-width: 60%;
              display: flex;
              flex-direction: column;
              > img {
                width: 100%;
              }
              > figcaption {
                margin: 0;
                background-color: white;
                font-size: $sm-font-size;
                padding: 0.5rem 1.5rem;
              }
            }
          }
          > .swiper-viewer {
            z-index: 1;
            > .swiper-wrapper {
              height: 100%;
              width: 100%;
              swiper-container {
                height: 95%;
                swiper-slide {
                  display: flex;
                  justify-content: center;
                  align-items: flex-start;
                  figure {
                    margin-top: 3%;
                    max-width: 60%;
                    height: 80%;
                    img {
                      height: -webkit-fill-available;
                      max-width: 100%;
                      margin-bottom: -5px;
                      object-fit: cover;
                    }
                    figcaption {
                      margin: 0;
                      background-color: white;
                      font-size: $sm-font-size;
                      padding: 0.5rem 1.5rem;
                    }
                  }
                }
              }
            }
          }
          > .close-button {
            position: fixed;
            top: 2rem;
            right: $body-margin-x;
            background-color: unset;
            border: none;
            display: block;
            height: 3rem;
            width: 3rem;
            border-radius: 1.5rem;
            cursor: pointer;
            background-color: white;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 2;
            > div {
              display: block;
              height: 2px;
              border-radius: 4px;
              width: 60%;
              background-color: $main-color;
              position: absolute;
              transition: transform 0.3s ease;
              &:nth-of-type(1) {
                transform: rotate(45deg) scale(1);
              }
              &:nth-of-type(2) {
                transform: rotate(-45deg) scale(1);
              }
            }
            &:hover {
              > div:nth-of-type(1) {
                transform: rotate(45deg) scale(1.1);
              }
              > div:nth-of-type(2) {
                transform: rotate(-45deg) scale(1.1);
              }
            }
          }
        }
      }
    }
  } 
}