stand/assets/sass/main.scss

@use "sass:map";
@import 'reset';

body {
  font-family: Roboto, sans;
}

$column1: (1030*2/3/16-1);
$column2: (1030/3/16-1);

.ui.container {
  max-width: 1030px;
}
section>.container {
  height: 100%;

  &>.column1 {
    display: inline-block;
    width: ($column1)+rem;
  }
  &>.column2 {
    display: inline-block;
    width: ($column2)+rem;
  }
}

#header {
  background-image: url('../images/header.png');
  background-repeat: no-repeat;
  background-size: auto;
  $header-background: rgba(70, 49, 12, .8);
  background-color: $header-background;
  color: rgb(255, 255, 255);

  width: 100%;
  &>.container {
    height: 400px;
  }

  .ui.menu {
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    margin: 0 !important;

    .dropdown .menu {
      background: none !important;
      border: none !important;
      box-shadow: none !important;
    }

    .item {
      color: inherit !important;
      font-size: 2rem;

      .shopping.cart div {
        position: relative;
        color: black;
        display: inline-block;
        top: -2.6rem;
        left: 0.2rem;
        font-size: 1rem;
        font-family: Roboto, sans;
      }
    }
  }

  .logo {
    padding: 0 !important;
    margin: 0 !important;

    img {
      width: 50%;
    }
    .frase1 {
      font-size: 1.5rem;
    }
    .frase2 {
      font-size: 1rem;
    }
  }
}

.simple.segment {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;

  &>.ui.grid {
    height: 100%;
  }
}

$heights: (
  "seccion1": 25,
  "seccion2": 27.5,
  "dimensiones": 27.5,
  "construido": 21.875,
  "corporativos": 25,
  "felices": 21.875,
  "formulario": 30
);

#seccion1 {
  background-image: linear-gradient(rgb(200, 200, 200), rgb(200, 200, 200));
  background-position: left 6.3rem;
  background-size: 100% (134/16)+rem;
  background-repeat: no-repeat;

  height: (map.get($heights, "seccion1"))+rem;
  margin-bottom: 2rem !important;

  .column1 {
    width: (1030*2/3/16)+rem;

    .image-container {
      display: flex;
      justify-content: space-between;

      img {
        height: (155/16)+rem;
        width: (188/16)+rem;
        margin-top: 5rem;
      }
    }
  }
  .column2 {
    height: 100%;
  }
}

#seccion2 {
  height: (map.get($heights, "seccion2"))+rem;

  background-image: url('../images/fondo23.png');
  background-color: rgb(240, 240, 240);

  .column2 {
    height: 100%;
  }
}

#dimensiones {
  height: (map.get($heights, "dimensiones"))+rem;

  background-image: url('../images/fondo23.png');

  .column2 {
    height: 100%;
  }
}

#construido {
  height: (map.get($heights, "construido"))+rem;

  background-image: url('../images/fondo4.png');
  background-color: rgb(100, 200, 255);

  .column2 {
    height: 100%;
  }
}

#corporativos {
  height: (map.get($heights, "corporativos"))+rem;

  background-image: url('../images/fondo5.png');

  .column2 {
    height: 100%;
  }
}

#felices {
  background-image: linear-gradient(rgb(200, 200, 200), rgb(200, 200, 200));
  background-position: left 3rem;
  background-size: 100% 5rem;
  background-repeat: no-repeat;

  height: (map.get($heights, "felices"))+rem;
}

#formulario {
  height: (map.get($heights, "formulario"))+rem;

  .whatsapp-link {
    color: inherit;
  }
}

$column_height1: 0;
$sticky: 0;
@each $name, $val in $heights {
  $sticky: $sticky + $val;
  @if $name != 'corporativos' and $name != 'felices' and $name != 'formulario' {
    $column_height1: $column_height1 + $val;
  }
}
#sticky_container {
  position: relative;
  height: ($column_height1)+rem;
  top: -($sticky)+rem;

  #column {
    position: absolute;
    width: ($column1)+rem;
    height: ($column_height1)+rem;
    top: 0;
    left: 0;
    padding: 0;
  }
  .sticky {
    float: right;
    height: (265/16)+rem;
    width: (310/16)+rem;
    margin-left: ($column1)+rem;

    .row:first-child {
      height: (170/16)+rem;

      .column1 {
        display: inline-block;
        vertical-align: bottom;
        padding-top: (2/16)+rem;
        width: (310/16*2/3)+rem;

        .linea {
          margin-bottom: (10/16)+rem;
        }

        .titulo {
          font-size: (25/12)+rem;
        }
        .precio {
          font-size: (16/12)+rem;
        }
        font-size: (14/12)+rem;

        .colores {
          vertical-align: center;

          .white {
            border: thin solid rgb(0, 0, 0);
            background-color: rgb(255, 255, 255);
          }
          .black {
            background-color: rgb(0, 0, 0);
          }
          .blue {
            background-color: rgb(0, 0, 255);
          }
          .green {
            background-color: rgb(0, 255, 0);
          }
          .yellow {
            background-color: rgb(255, 255, 0);
          }
          .orange {
            background-color: rgb(255, 130, 0);
          }
          .red {
            background-color: rgb(255, 0, 0);
          }
          .circle {
            display: inline-block;
            width: 1rem;
            height: 1rem;
            border-radius: 8000px;
          }
        }
        .input {
          width: 4.5rem;
          border: thin solid rgb(0, 0, 0);
          text-align: center;
          padding: .5rem 0.05rem;
          font-size: (10/12)+rem;

          button {
            background: none;
            border: none;
            width: 1rem;
            margin: 0;
            padding: 0;
            cursor: pointer;
          }
          input {
            width: 2rem;
            background: none;
            margin: 0;
            border: 0;
            padding: 0;
            text-align: right;
          }
        }
      }
      .column2 {
        display: inline-block;
        width: ((310/16-1)/3)+rem;

        img {
          width: (110/16)+rem;
          height: (170/16)+rem;
        }
      }
    }
    .row:last-child {
      .button {
        border-radius: 0 !important;
        width: 100%;
      }
    }
  }
}

.fondo-blanco {
  float: right;
  background-color: rgba(255, 255, 255, .5);
}