Manual_Vantive/css/timeline.scss

// Definición de colores principales
:root {
  --color1: #47545d;
  --color2: #c9d0d3;
}

// Estilos generales del timeline
.main-timeline {
  &:after {
    content: "";
    display: block;
    clear: both;
  }

  .timeline {
    border-right: 10px solid var(--color1);
    width: 50%;
    padding: 10px 20px 10px 0;
    box-shadow: 10px 0 var(--color2);
    float: left;
    min-height: 160px;

    &:last-child {
      min-height: 130px;
    }

    &-content {
      text-align: center;
      display: block;
      position: relative;
      border-radius: 10px 10px;

      &:hover {
        text-decoration: none;
      }

      &:before,
      &:after {
        content: "";
        background: var(--color2);
        width: 80px;
        height: 3px;
        transform: translateY(-50%);
        position: absolute;
        top: 50%;
        right: -120px;
      }

      &:after {
        width: 15px;
        height: 15px;
        border-radius: 50%;
        right: -125px;
      }
    }
  }

  .timeline-year {
    border-radius: 50%;
    transform: translateY(-50%);
    position: absolute;
    top: 50%;
    right: -300px;

    img {
      max-width: 120px;
    }
  }

  .title {
    color: #fff;
    background: var(--color2);
    font-size: 22px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 10px 10px 9px;
    margin: 0;
    border-radius: 10px 10px 0 0;
  }

  .description {
    letter-spacing: 1px;
    padding: 10px;
    border-radius: 10px;
    margin: 0;
  }

  .timeline:nth-child(even) {
    float: right;
    border: none;
    border-left: 10px solid var(--color2);
    box-shadow: -10px 0 var(--color1);
    padding: 10px 0 10px 20px;
    margin: 0 0 0 10px;

    .timeline-content {
      &:before {
        right: auto;
        left: -120px;
      }

      &:after {
        right: auto;
        left: -125px;
      }
    }

    .timeline-year {
      right: auto;
      left: -300px;
    }
  }
}

// Colores dinámicos según el índice
@for $i from 1 through 5 {
  .main-timeline .timeline:nth-child(#{$i}) {
    --color1: var(--bs-#{nth(success naranja-1 vino secondary naranja-2 , $i)});
    --color2: color-mix(in srgb, var(--color1) 80%, black);
  }
}

// Estilos responsive para móviles
@media screen and (max-width: 767px) {
  .main-timeline {
    .timeline,
    .timeline:nth-child(even) {
      width: 100%;
      padding: 100px 0 20px 20px;
      margin: 0 0 0 10px;
      box-shadow: -10px 0 var(--color2);
      border: none;
      border-left: 10px solid var(--color1);
      float: none;
    }

    .timeline-content {
      &:before,
      &:after {
        top: -50px;
        left: -20px;
        width: 50px;
      }

      &:after {
        width: 15px;
        right: auto;
        left: 15px;
      }
    }

    .timeline-year,
    .timeline:nth-child(even) .timeline-year {
      transform: translateX(-50%);
      top: -85px;
      left: 50%;
      right: auto;
      position: relative;
    }

    .description {
      margin-top: -73px;
    }
  }

    .timeline:nth-child(even) {
    float: right;
    border: none;
    border-left: 10px solid var(--color2);
    box-shadow: -10px 0 var(--color1);
    padding: 10px 0 10px 20px;
    margin: 0 0 0 10px;

    .timeline-content {
      &:before {
        right: auto;
        left: -20px !important;
      }

      &:after {
        width: 15px !important;
        right: auto !important;
        left: 15px !important;
      }
    }

    .timeline-year {
      right: auto;
      left: -300px;
    }
  }

}