jukebox-web/src/assets/stylesheets/map.scss

$dark-blue: #002554;
$medium-blue: #004990;
$light-blue: #007cbe;
$hover-blue: #25b3ff;
$black: #000;
$gray: #bdbdbd;
$white: #fff;

.map {
  background: linear-gradient(
    180deg,
    rgb(0 37 84 / 100%) 0%,
    rgb(0 124 190 / 100%) 50%,
    rgb(255 255 255) 100%
  );
  background-color: transparent;
  overflow-y: visible;
  width: calc(100% - 300px);
  height: auto;
  display: block;
  justify-content: center;
  align-items: center;
}

.map-image {
  width: 100%;
  height: 200px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.map-image img {
  width: auto;
  height: 200px;
  background-color: transparent;
  margin-top: 50px;
}

.map-fieldContainer {
  width: 100%;
  min-height: calc(100% - 200px);
  height: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  overflow: visible;
  background-color: transparent;
  animation: fadeInUp;
  animation-duration: 0.5s;
}

.map-title {
  width: 80%;
  height: auto;
  font-size: 32px;
  font-weight: bold;
  color: $white;
  font-family: "Gotham Medium";
  margin: 10px;
  background-color: transparent;
  margin-bottom: 25px;
}

.map-boxContainer {
  width: 80%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  background-color: transparent;
  overflow: visible;
}

.map-box,
.map-details {
  height: 68vh;
  background: linear-gradient(
    -30deg,
    rgb(187 208 236) 0%,
    rgb(255 255 255 / 100%) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 20px;
  border: 1px solid $gray;
  transition: all 0.3s ease-in-out;
  text-decoration: none;
  filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%));
  overflow: visible;
}

.map-box {
  width: 60%;
}

.map-details {
  width: 38%;
  justify-content: space-between;
}

.map-box-row {
  width: 100%;
  height: 60px;
  background-color: transparent;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  overflow: visible;
}

.map-box-circle,
.map-box-spacer {
  width: 60px;
  height: 60px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: linear-gradient(
    15deg,
    rgb(223 223 223) 0%,
    rgb(255 255 255) 100%
  );
  margin-left: 3px;
  margin-right: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease-in-out;
}

.map-box-circle {
  filter: drop-shadow(5px 5px 2px rgb(0 0 0 / 15%));
  cursor: pointer;
}

.map-box-spacer {
  background-color: transparent;
  box-shadow: 0 2px 2px rgb(0 0 0 / 0%);
  border: 1px solid transparent;
  background: transparent;
}

.map-box-circle-inner {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.map-box-circle-inner span {
  width: auto;
  height: auto;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  font-size: 16px;
  font-weight: bold;
  color: $dark-blue;
  margin-top: 2px;
  font-family: "Gotham Bold";
}

.map-cable-image {
  width: auto;
  height: 35%;
  aspect-ratio: 1/1;
  border: $gray solid 1px;
  border-radius: 20px;
  background-color: white;
  filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%));
  margin-bottom: 30px;
  margin-top: 30px;
}

.map-cable-label {
  width: 90%;
  height: 80%;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  overflow: hidden;
}

.map-cable-name {
  background-color: transparent;
  font-size: 28px;
  color: $medium-blue;
  width: 100%;
  text-align: left;
  height: auto;
  font-family: "Gotham Bold";
  margin-bottom: 3px;
}

.map-cable-shortdescription {
  background-color: transparent;
  font-size: 18px;
  color: $medium-blue;
  width: 100%;
  text-align: left;
  height: auto;
  font-family: "Gotham Medium";
  margin-bottom: 15px;
}

.map-cable-description {
  background-color: transparent;
  font-size: 16px;
  color: $black;
  width: 100%;
  text-align: left;
  height: auto;
  font-family: "Gotham Medium";
  margin-bottom: 15px;
}

.map-cable-brand,
.map-cable-short,
.map-cable-position,
.map-cable-category {
  background-color: transparent;
  font-size: 15px;
  margin-bottom: 5px;
  color: $light-blue;
  width: 100%;
  text-align: left;
  height: auto;
  font-family: "Gotham Medium";
}

.map-cable-moreinfo {
  width: 200px;
  height: 50px;
  border-radius: 20px;
  background: linear-gradient(
    15deg,
    rgb(223 223 223) 0%,
    rgb(255 255 255) 100%
  );
  margin-left: 3px;
  margin-right: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease-in-out;
  filter: drop-shadow(5px 5px 2px rgb(0 0 0 / 15%));
  cursor: pointer;
  margin-bottom: 40px;
  text-decoration: none;
}

.map-cable-moreinfo span {
  width: auto;
  height: auto;
  font-size: 20px;
  margin-top: 2px;
  color: $medium-blue;
  font-family: "Gotham Bold";
  background-color: transparent;
}