open-vault/website/components/before-after-diagram/style.module.css

/* Container */

.beforeAfterDiagram {
  /* CSS custom properties to control theming */
  --product-color: var(--black);
  --gray-6-transparent: rgba(210, 212, 219, 0);
  --after-bullet-background: url('/img/icons/check-square-vault.svg');
  --after-bullet-height: 18px;

  display: flex;
  flex-wrap: wrap;
  margin: 0 -16px;
  position: relative;

  @media (max-width: 1023px) {
    margin-left: -12px;
    margin-right: -12px;
  }

  @media (max-width: 767px) {
    flex-direction: column;
    margin-left: 40px;
    margin-right: 0;
  }
}

/* Before and after columns */

.side {
  display: flex;
  flex-direction: column;
  margin: 0 16px;
  position: relative;
  width: calc(50% - 32px);

  @media (max-width: 1023px) {
    margin: 0 12px;
    width: calc(50% - 24px);
  }

  @media (max-width: 767px) {
    margin: 0;
    width: 100%;
  }
}

.beforeSide {
  composes: side;
  @media (max-width: 767px) {
    margin-bottom: 62px;
  }
}

.afterSide {
  composes: side;
}

/* Diagram images */

.image {
  align-items: flex-end;
  display: flex;
  height: 320px;
  justify-content: center;
  margin-bottom: 96px;

  @media (max-width: 767px) {
    margin-bottom: 40px;
  }

  @media (max-width: 640px) {
    height: 284px;
  }

  @media (max-width: 540px) {
    height: 238px;
  }

  @media (max-width: 480px) {
    height: 211px;
  }

  @media (max-width: 375px) {
    height: 163px;
  }

  & div {
    height: 100%;
    text-align: center;
    width: 100%;
  }

  & picture {
    height: 100%;
  }
  & img,
  & svg {
    height: 100%;
    max-width: 100%;
    object-fit: contain;
  }

  @media (--medium-up) {
    & div {
      height: unset;
    }

    & picture {
      height: unset;
    }
    & img,
    & svg {
      height: unset;
    }
  }
}

/* icon / line container above content */

.iconLineContainer {
  padding: 0;
  position: absolute;
  right: 0;
  top: -75px;
  width: 100%;

  @media (max-width: 767px) {
    height: 100%;
    left: -28px;
    right: auto;
    top: 28px;
    width: auto;
  }
}

/* Line segment above content (before side only) */

.lineSegment {
  background: black;
  display: block;
  height: 2px;
  left: calc(50% + 30px);
  position: absolute;
  top: 12px;
  width: calc(100% - 24px);

  @media (max-width: 767px) {
    height: calc(100% + 375px);
    left: auto;
    top: 38px;
    width: 2px;
  }

  @media (max-width: 640px) {
    height: calc(100% + 339px);
  }

  @media (max-width: 540px) {
    height: calc(100% + 293px);
  }

  @media (max-width: 480px) {
    height: calc(100% + 266px);
  }

  @media (max-width: 375px) {
    height: calc(100% + 218px);
  }

  &::before {
    border-radius: 100%;
    border-style: solid;
    border-width: 5.5px 0 5.5px 8px;
    border-width: 2px;
    content: '';
    height: 8px;
    left: -8px;
    position: absolute;
    top: -3px;
    width: 8px;

    @media (max-width: 767px) {
      left: -3px;
      top: -8px;
    }
  }

  &::after {
    border-color: transparent transparent transparent var(--product-color);
    border-style: solid;
    border-width: 6px 0 6px 8px;
    content: '';
    height: 0;
    position: absolute;
    right: -8px;
    top: -5px;
    width: 0;

    @media (max-width: 767px) {
      bottom: -8px;
      right: -4px;
      top: auto;
      transform: rotate(90deg);
    }
  }
}

/* Icon above each content container */

.contentIcon {
  & svg {
    left: 50%;
    margin: 0 0 0 -11px;
    position: absolute;
  }
}

.beforeIcon {
  composes: contentIcon;
}

.afterIcon {
  composes: contentIcon;
  & svg path:first-child {
    fill: var(--product-color);
    stroke: var(--product-color);
  }
}

/* Content container */

.contentContainer {
  border: 1px solid var(--gray-5);
  flex-grow: 1;
  padding: 24px 32px 20px;
  position: relative;

  @media (max-width: 1023px) {
    padding-left: 24px;
    padding-right: 24px;
  }

  @media (max-width: 767px) {
    padding-left: 20px;
    padding-right: 20px;
  }

  &::before,
  &::after {
    border: solid transparent;
    bottom: 100%;
    content: '';
    height: 0;
    left: 50%;
    pointer-events: none;
    position: absolute;
    width: 0;
  }

  &::before {
    border-color: rgba(229, 230, 235, 0);
    border-bottom-color: var(--gray-5);
    border-width: 18px;
    margin-left: -18px;
  }

  &::after {
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: var(--white);
    border-width: 17px;
    margin-left: -17px;
  }

  & > div {
    height: 100%;

    & > div {
      @media (min-width: 768px) {
        margin: 0 auto;
        max-width: 480px;
      }
    }
  }
}

/* Content headline */

.contentHeadline {
  border-bottom: 1px solid var(--gray-5);
  color: var(--black);
  composes: g-type-display-3 from global;
  margin: 0 0 24px;
  padding-bottom: 24px;
  text-align: center;
}

/* Content styles (for rendered markdown) */

.content {
  & :global(.__permalink-h) {
    display: none;
  }

  & :global(.g-type-label) {
    margin: 24px 0 26px 0;
  }

  & ul,
  & ol {
    list-style: none;
    padding-left: 32px;
    position: relative;
  }

  & li {
    margin: 8px 0;

    &::before {
      background-repeat: no-repeat;
      content: '';
      left: 0;
      position: absolute;
    }
  }
}

.beforeContent {
  composes: content;

  & li::before {
    background: url('/img/icons/alert-check.svg');
    background-repeat: no-repeat;
    height: var(--after-bullet-height);
    margin-top: 3px;
    width: 20px;
  }
}

.afterContent {
  composes: content;

  & li::before {
    background: var(--after-bullet-background);
    height: var(--after-bullet-height);
    margin-top: 4px;
    width: 18px;
  }
}