style2.css

/* -- ---- -- ---- -- ---- -- FONTS -- ---- -- ---- -- ---- -- */

@font-face {
  font-family: tiny;
  src: url("Assets/Fonts/TINY5x3-160.woff2");
}

@font-face {
  font-family: whyte;
  src: url("Assets/Fonts/Whyte\ Regular\ Italic.otf");
  font-weight: italic;
}

@font-face {
  font-family: whyte;
  src: url("Assets/Fonts/ABCWhyte-Regular.woff2");
  font-weight: normal;
}

@font-face {
  font-family: whyte;
  src: url("Assets/Fonts/ABCWhyte-Bold.woff2");
  font-weight: bold;
}

/* -- ---- -- ---- -- ---- -- GENERAL -- ---- -- ---- -- ---- -- */

html,
body {
  margin: 0;
  padding: 0;
  overscroll-behavior: none;
  background-color: #ffffff;
  overflow: hidden;
}

#preloader {
  background: #fbfbfb url("Assets/Icons/loader.gif") no-repeat center center;
  height: 100vh;
  width: 100%;
  position: fixed;
  z-index: 100;
  cursor: wait;
}

::selection {
  background-color: #00c844;
  color: #ffffff;
}

/* -- ---- -- ---- -- ---- -- NAVBAR -- ---- -- ---- -- ---- -- */

#navbar {
  height: 100vh;
  width: 3vw;
  position: fixed;
  background-color: #00c844;
  left: 0vw;
  top: 0vh;
}

#titolo {
  font-family: tiny;
  color: #ffffff;
  -webkit-text-stroke: #3e3e3e 0.08vw;
  font-size: 3vw;
  position: absolute;
  transform-origin: top left;
  width: 40vh;
  rotate: 270deg;
  left: 0.45vw;
  height: 2vw;
  bottom: -2vh;
  text-decoration: none;
}

@media (max-height: 900px) {
  #titolo {
    font-family: tiny;
    color: #ffffff;
    -webkit-text-stroke: #3e3e3e 0.08vw;
    font-size: 2vw;
    position: absolute;
    transform-origin: top left;
    width: 40vh;
    rotate: 270deg;
    left: 0.45vw;
    height: 2vw;
    bottom: -2vh;
    text-decoration: none;
  }
}

.bottoncini {
  font-family: whyte;
  position: absolute;
  font-weight: normal;
  color: #3e3e3e;
  font-size: 1.7vw;
  transform-origin: top left;
  left: 0.4vw;
  rotate: 270deg;
  text-decoration: none;
  transition-duration: 0.2s;
}

#intro {
  top: 15vw;
  transition-duration: 0.2s;
  cursor: pointer;
}

#intro:hover {
  color: #ffffff;
}

#about {
  top: 8vw;
  transition-duration: 0.2s;
}

#about:hover {
  color: #ffffff;
}

#tutorial {
  top: 25.3vw;
  font-size: 1.7vw;
  cursor: pointer;
}

#tutorial:hover {
  color: #ffffff;
}

/* -- ---- -- ---- -- ---- -- EXPERIENCE ENVIRONMENT -- ---- -- ---- -- ---- -- */

#map {
  position: fixed;
  left: 3vw;
  width: 38vw;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
  z-index: 10;
}

#toggles {
  position: absolute;
  right: 0vw;
  width: 3vw;
  height: 100vh;
  font-family: whyte;
  position: absolute;
  font-weight: normal;
  font-size: 1.7vw;
  transition-duration: 0.2s;
  background-color: #00c844;
  color: #ffffff;
}

.marquee {
  position: absolute;
  left: 41vw;
  rotate: 270deg;
  transform-origin: top left;
  height: 1.5vw;
  width: 18.5vh;
  display: flex;
  justify-content: space-around;
  color: #00c844;
  font-family: whyte;
  align-items: center;
  font-size: 1vw;
  background-color: #ffffff;
  border-top: #00c844 solid 0.1vw;
  border-bottom: #00c844 solid 0.1vw;
  white-space: nowrap;
}

#env {
  position: absolute;
  right: 3vw;
  width: 54.3vw;
  height: 100vh;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  overflow: hidden;
}

#env video {
  height: 100%;
}

#galleryenv {
  position: absolute;
  right: 3vw;
  width: 94vw;
  height: 100vh;
  display: none;
  justify-content: space-between;
  align-content: space-between;
  flex-wrap: wrap;
  flex-direction: column-reverse;
  overflow: auto;
  overflow-x: clip;
}

#galleryenv div img {
  padding-top: 2vh;
}

#scroller {
  position: fixed;
  display: flex;
  flex-direction: column-reverse;
  overflow: auto;
  overflow-x: clip;
  right: 3vw;
  width: 93vw;
  height: 100vh;
  overflow: scroll;
  opacity: 0;
  z-index: 4;
  scrollbar-width: none;
}

#scrollerhuman {
  position: absolute;
  display: none;
  flex-direction: column-reverse;
  overflow: auto;
  overflow-x: clip;
  right: 3vw;
  width: 94vw;
  height: 100vh;
  overflow: scroll;
  opacity: 1;
  z-index: 1;
}

/* -- ---- -- ---- -- ---- -- MARQUEE -- ---- -- ---- -- ---- -- */

.time {
  position: relative;
  left: -16vh;
}

.mqc {
  overflow: hidden;
  width: 90%;
  text-align: center;
}

/* -- ---- -- ---- -- ---- -- MAP -- ---- -- ---- -- ---- -- */

.dots {
  position: absolute;
  background-color: #ffffff;
  width: 0.4vw;
  height: 0.4vw;
  border-radius: 1vw;
  border: #00c844 solid 0.13vw;
  transition-duration: 0.5s;
  z-index: 30;
  pointer-events: auto;
  cursor: pointer;
}

.human {
  position: absolute;
  background-color: #ffffff;
  border-radius: 1vw;
  width: 0.3vw;
  height: 0.3vw;
  border: #00c844 solid 0.2vw;
  transition-duration: 0.5s;
  z-index: 30;
  pointer-events: auto;
  cursor: pointer;
}

#cursor {
  position: absolute;
  width: 42vw;
  height: 0.3vh;
  background-color: #00c844;
  top: 97.7183753746245vh;
}

#gcursor1 {
  position: absolute;
  width: 42vw;
  height: 0.3vh;
  background-color: #00c844;
  top: 97.7183753746245vh;
  display: none;
}

#gcursor2 {
  position: absolute;
  width: 42vw;
  height: 0.3vh;
  background-color: #00c844;
  top: 97.7183753746245vh;
  display: none;
}

#line1 {
  position: absolute;
  width: 42vw;
  height: 0.1vw;
  background: repeating-linear-gradient(90deg, #00c844 0 0.3vw, #0000 0 0.8vw);
  opacity: 0.5;
  top: 81.45170871vh;
}

#line2 {
  position: absolute;
  width: 42vw;
  height: 0.1vw;
  background: repeating-linear-gradient(90deg, #00c844 0 0.3vw, #0000 0 0.8vw);
  opacity: 0.5;
  top: 65.28504204vh;
}

#line3 {
  position: absolute;
  width: 42vw;
  height: 0.1vw;
  background: repeating-linear-gradient(90deg, #00c844 0 0.3vw, #0000 0 0.8vw);
  opacity: 0.5;
  top: 49.11837537vh;
}

#line4 {
  position: absolute;
  width: 42vw;
  height: 0.1vw;
  background: repeating-linear-gradient(90deg, #00c844 0 0.3vw, #0000 0 0.8vw);
  opacity: 0.5;
  top: 32.98400974vh;
}

#line5 {
  position: absolute;
  width: 42vw;
  height: 0.1vw;
  background: repeating-linear-gradient(90deg, #00c844 0 0.3vw, #0000 0 0.8vw);
  opacity: 0.5;
  top: 16.72986111vh;
}

.bigdot {
  background-color: #00c844;
  width: 1vw;
  height: 1vw;
  transform: translate(-0.3vw, -0.3vw);
}

.greendot {
  background-color: #00c844;
  width: 0.6vw;
  height: 0.6vw;
  transform: translate(-0.1vw, -0.1vw);
}

.viewer {
  position: absolute;
  background-color: #00c844;
  width: 3vw;
  height: 3vw;
  border-radius: 3vw;
  top: 95.2183753746245vh;
  left: 34.5vw;
  background-size: cover;
  z-index: 2;
}

#dxtriangle {
  position: absolute;
  top: 96.96837537vh;
  left: 37.5vw;
  width: 0;
  height: 0;
  border-top: 0.5vw solid transparent;
  border-bottom: 0.5vw solid transparent;

  border-right: 0.5vw solid #00c844;
}

#sxtriangle {
  position: absolute;
  top: 96.96837537vh;
  left: 0vw;
  width: 0;
  height: 0;
  border-top: 0.5vw solid transparent;
  border-bottom: 0.5vw solid transparent;

  border-left: 0.5vw solid #00c844;
}

/* -- ---- -- ---- -- ---- -- TOGGLE -- ---- -- ---- -- ---- -- */

#viewmenu {
  position: absolute;
  bottom: -5vh;
  rotate: 270deg;
  transform-origin: top left;
  left: 0vw;
  width: 50vh;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  vertical-align: middle;
  height: 3vw;
  border-right: #00c844 solid 0.1vw;
  background-color: #00c844;
  transition-duration: 0.2s;
  cursor: pointer;
}
#viewmenu div {
  font-size: 1vw;
}
#viewmenu:hover {
  opacity: 1;
}
#v1 {
  background-color: #00c844;
  color: #ffffff;
}
#v2 {
  background-color: #ffffff;
  color: #00c844;
}
#v2:hover {
  background-color: #00c844;
  color: #ffffff;
}

#viewmenu2 {
  position: absolute;
  bottom: -5vh;
  rotate: 270deg;
  transform-origin: top left;
  left: 0vw;
  width: 50vh;
  text-align: center;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  vertical-align: middle;
  height: 3vw;
  border-right: #00c844 solid 0.1vw;
  background-color: #00c844;
  transition-duration: 0.2s;
  cursor: pointer;
}
#viewmenu2 div {
  font-size: 1vw;
}
#v4 {
  background-color: #00c844;
  color: #ffffff;
}
#v3 {
  background-color: #ffffff;
  color: #00c844;
}
#v3:hover {
  background-color: #00c844;
  color: #ffffff;
}

#humantmenu {
  position: absolute;
  top: 50vh;
  rotate: 270deg;
  transform-origin: top left;
  left: 0vw;
  width: 50vh;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  vertical-align: middle;
  height: 3vw;
  border-right: #ffffff solid 0.1vw;
  background-color: #00c844;
  transition-duration: 0.2s;
  cursor: pointer;
}
#humantmenu div {
  font-size: 1vw;
}
#humantmenu:hover {
  opacity: 1;
}
#h1 {
  background-color: #00c844;
  color: #ffffff;
}
#h2 {
  background-color: #ffffff;
  color: #00c844;
}
#h2:hover {
  background-color: #00c844;
  color: #ffffff;
}

#humantmenu2 {
  position: absolute;
  top: 50vh;
  rotate: 270deg;
  transform-origin: top left;
  left: 0vw;
  width: 50vh;
  text-align: center;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  vertical-align: middle;
  height: 3vw;
  border-right: #ffffff solid 0.1vw;
  background-color: #00c844;
  transition-duration: 0.2s;
  cursor: pointer;
}
#humantmenu2 div {
  font-size: 1vw;
}
#h4 {
  background-color: #00c844;
  color: #ffffff;
}
#h3 {
  background-color: #ffffff;
  color: #00c844;
}
#h3:hover {
  background-color: #00c844;
  color: #ffffff;
}

/* -- ---- -- ---- -- ---- -- GALLERY -- ---- -- ---- -- ---- -- */

.images {
  position: relative;
  height: 10vh;
  cursor: pointer;
}

#back {
  position: fixed;
  z-index: 9;
  top: 50vh;
  left: 50vw;
  width: 100vw;
  height: 100vh;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.5);
}

#back:hover {
  cursor: url("Assets/Icons/pointer.jpg"), auto;
}

.closed {
  display: none;
}

.bigimg {
  position: fixed;
  z-index: 30;
  top: 50vh;
  left: 50vw;
  object-fit: contain;
  height: 80vh;
  width: 70vw;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background-color: #fff;
  border: 0.3vh solid #00c844;
  padding-bottom: 2vh;
  padding-left: 1.5vw;
  padding-right: 1.5vw;
}

/* -- ---- -- ---- -- ---- -- SOURCES -- ---- -- ---- -- ---- -- */

#gradient {
  background-image: url(Assets/gradient.png);
  background-size: 100% 100%;
  width: 100%;
  height: 18vh;
  position: absolute;
  bottom: 0vh;
}

.source {
  color: #3e3e3e;
  position: absolute;
  height: 1vw;
  top: 95vh;
  width: 100%;
  text-align: center;
  left: 2vw;
  font-family: whyte;
  font-size: 1.6vw;
  text-decoration: none;
  z-index: 20;
}

.hide {
  display: none;
}

/* -- ---- -- ---- -- ---- -- TRIGGERS -- ---- -- ---- -- ---- -- */

.trigger {
  opacity: 1;
  border: rebeccapurple solid 1px;
}

/* -- ---- -- ---- -- ---- -- TUTORIAL -- ---- -- ---- -- ---- -- */

.active {
  height: 7vh;
  width: 36.5vh;
  background-color: #00c844;
  position: absolute;
  font-family: whyte;
  font-size: 3vh;
  text-align: center;
  right: 7.3vh;
  border-top: 0.3vh solid;
  border-top-color: #00c844;
  transform-origin: top right;
  transform: rotate(270deg);
  color: white;
}

.nonactive {
  height: 7vh;
  width: 36.5vh;
  background-color: white;
  position: absolute;
  font-family: whyte;
  font-size: 3vh;
  text-align: center;
  right: 7.3vh;
  border-top: 0.3vh solid;
  border-top-color: #00c844;
  transform-origin: top right;
  transform: rotate(270deg);
  color: #00c844;
  cursor: pointer;
}

.nonactive:hover {
  background-color: #00c844;
  color: white;
}

#containertutorial {
  display: flex;
  justify-content: space-between;
  background-color: white;
  width: 100%;
  height: 72.7vh;
  border-bottom: 0.3vh solid;
  border-bottom-color: #00c844;
  font-family: whyte;
  font-size: 2vh;
}

#containerbuttons {
  width: 7vh;
}

.containeractive {
  width: 100%;
  display: flex;
  justify-content: space-around;
  padding-left: 2vw;
  padding-right: 2vw;
}

.tutorialdivs {
  display: flex;
  flex-direction: column;
  width: 15vw;
}

.imgtutorial {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: #00c844;
  margin-top: 4vh;
  margin-bottom: 5vh;
  background-size: cover;
  border: #00c844 solid 0.3vh;
}

.containernonactive {
  display: none;
}

.keydivs {
  display: flex;
  flex-direction: column;
  width: 20vw;
  margin-top: 2vh;
  margin-bottom: 5vh;
}

.keyelemets {
  display: flex;
  margin-top: 1.8vh;
}

.keytitles {
  color: #00c844;
  font-weight: bold;
}

.phaseimg {
  width: 5vh;
  height: 5vh;
  margin-right: 1vw;
  background-size: cover;
  border-radius: 3vw;
}

.keyelements {
  color: white;
  width: 100%;
  text-align: center;
  background-color: #00c844;
  margin-top: 12vh;
}

.noncurrentmode {
  display: none;
}