<commit_before>@zindex_outer_nav: 20;


.home-footer {
  margin-top: auto;
}
.pricing {
  &.page {
    .flexy(column);
    min-height: 100vh;
    font-size: 1.1428572em; // 16px
    line-height: 1.5em; // 24px
    margin-top: @tile;
    .torso {
      max-width: (@tile * 15);
      margin: 0 auto (@tile * 3);
    }
    section {
      width: (@tile * 15);
    }
    article {
      + article {
        margin-top: 2em;
      }
    }
    p {
      color: @gray;
    }
    h1 {
      font-size: @prolog_h1_font;
      line-height: @prolog_h1_line;
      font-weight: 300;
    }
    h2 {
      font-weight: normal;
    }
    h3 {
      font-size: @prolog_h3_font;
      line-height: @prolog_h3_line;
      font-weight: normal;
    }
    h2 {
      margin: 8px 0;
    }
    h5 {
      font-size: @prolog_h5_font;
      line-height: @prolog_h5_line;
      font-weight: normal;
      margin: 8px 0;
    }
  }
  a {
    &:hover {
      i {
        path {
          stroke: @linkColorHover;
          transition: stroke 200ms;
        }
      }
    }
    &:not(:hover) {
      color: @black;
    }
    i {
      path {
        stroke: @grayDark;
        stroke-width: 8;
      }
    }
  }
}
.outer-nav {
  .box-sizing(border-box);
  .flexy(center);
  .vertGradient(@white, @white);
  position: fixed;
  z-index: @zindex_outer_nav; // ducks under prolog content intentionally
  left: 0;
  top: 0;
  width: 100%;
  height: @tile;
  border-bottom: 1px solid @grayBoxBorder;
  overflow: hidden;
  a {
    &:not(:first-of-type) {
      &:not(:last-of-type) {
        margin-right: 1.5em;
      }
    }
  }
  &.logo-visible {
    .promo {
      top: -100%;
      opacity: 0;
    }
    .logo-circleci {
      left: 0;
      opacity: 1;
      pointer-events: auto;
      transition+: left @prolog_cover_fadein;
      transition+: opacity @prolog_cover_fadein (@prolog_cover_fadeout / 2);
    }
  }
  .logo-circleci {
    padding: 0 1.5em;
    figure {
      margin: 0;
      width: 6em;
      height: 1.5em;
    }
    svg {
      height: 100%;
      fill: @grayDark;
    }
  }
  .action {
    .flexy(center, center);
    height: auto;
    font-size: .875em;
    color: @black;
    margin: 0 1.5em 0 auto;
    padding: .5em 1em;
    background: @white;
    border: 1px solid @gray;
    border-radius: (@home_action_height / 2);
    white-space: nowrap;
    &:hover {
      color: @white;
      background: @gray;
      transition: 100ms;
    }
  }
}
.pricing-intro {
  margin-top: (@tile * 2);
}
.pricing-calculator {
  .flexy();
  margin: (@tile * 2) 0;
}
.pricing-calculator-controls {
  .flex(1);
  .flexy(stretch, center, column);
  padding-right: 3em;
}
.containers-range {
  .flexy(column);
  margin: 3em 0;
  figure {
    .box-sizing(border-box);
    height: 1em;
    margin: 0;
    border-radius: 1em;
  }
  .range-back {
    background: @white;
    border: 1px solid @grayBoxBorder;
  }
  .range-highlight {
    // background: @green;
    background: @grayDark;
    width: 20%;
    margin-top: -1em;
  }
  .range-knob {
    width: 2em;
    height: 2em;
    margin-top: -1.5em;
    border-radius: 1em;
    margin-left: ~"calc(20% - 1em)";
    background: @white;
    border: 1px solid @grayBoxBorder;
  }
}
.parallelism-options {
  .flexy();
  margin: 3em 0;
  button {
    .box-sizing(border-box);
    .flex(1 1 20%);
    height: 3em;
    margin: 0;
    padding: 0;
    background: none;
    border: 1px solid @grayBoxBorder;
    outline: none;
    transition: 200ms;
    &:hover,
    &:active {
      background: @grayBoxBorder;<commit_msg>styles for colored slider values<commit_after>@zindex_outer_nav: 20;


.home-footer {
  margin-top: auto;
}
.pricing {
  &.page {
    .flexy(column);
    min-height: 100vh;
    font-size: 1.1428572em; // 16px
    line-height: 1.5em; // 24px
    margin-top: @tile;
    .torso {
      max-width: (@tile * 15);
      margin: 0 auto (@tile * 3);
    }
    section {
      width: (@tile * 15);
    }
    article {
      + article {
        margin-top: 2em;
      }
    }
    p {
      color: @gray;
    }
    h1 {
      font-size: @prolog_h1_font;
      line-height: @prolog_h1_line;
      font-weight: 300;
    }
    h2 {
      font-weight: normal;
    }
    h3 {
      font-size: @prolog_h3_font;
      line-height: @prolog_h3_line;
      font-weight: normal;
    }
    h2 {
      margin: 8px 0;
    }
    h5 {
      font-size: @prolog_h5_font;
      line-height: @prolog_h5_line;
      font-weight: normal;
      margin: 8px 0;
    }
  }
  a {
    &:hover {
      i {
        path {
          stroke: @linkColorHover;
          transition: stroke 200ms;
        }
      }
    }
    &:not(:hover) {
      color: @black;
    }
    i {
      path {
        stroke: @grayDark;
        stroke-width: 8;
      }
    }
  }
}
.outer-nav {
  .box-sizing(border-box);
  .flexy(center);
  .vertGradient(@white, @white);
  position: fixed;
  z-index: @zindex_outer_nav; // ducks under prolog content intentionally
  left: 0;
  top: 0;
  width: 100%;
  height: @tile;
  border-bottom: 1px solid @grayBoxBorder;
  overflow: hidden;
  a {
    &:not(:first-of-type) {
      &:not(:last-of-type) {
        margin-right: 1.5em;
      }
    }
  }
  &.logo-visible {
    .promo {
      top: -100%;
      opacity: 0;
    }
    .logo-circleci {
      left: 0;
      opacity: 1;
      pointer-events: auto;
      transition+: left @prolog_cover_fadein;
      transition+: opacity @prolog_cover_fadein (@prolog_cover_fadeout / 2);
    }
  }
  .logo-circleci {
    padding: 0 1.5em;
    figure {
      margin: 0;
      width: 6em;
      height: 1.5em;
    }
    svg {
      height: 100%;
      fill: @grayDark;
    }
  }
  .action {
    .flexy(center, center);
    height: auto;
    font-size: .875em;
    color: @black;
    margin: 0 1.5em 0 auto;
    padding: .5em 1em;
    background: @white;
    border: 1px solid @gray;
    border-radius: (@home_action_height / 2);
    white-space: nowrap;
    &:hover {
      color: @white;
      background: @gray;
      transition: 100ms;
    }
  }
}
.pricing-intro {
  margin-top: (@tile * 2);
}
.pricing-calculator {
  .flexy();
  margin: (@tile * 2) 0;
}
.pricing-calculator-controls {
  .flex(1);
  .flexy(stretch, center, column);
  padding-right: 3em;
}
.containers-range {
  .flexy(column);
  margin: 3em 0;
  figure {
    .box-sizing(border-box);
    height: 1em;
    margin: 0;
    border-radius: 1em;
  }
  .range-back {
    background: @white;
    border: 1px solid @grayBoxBorder;
  }
  .range-highlight {
    // background: @green;
    background: @grayDark;
    width: 20%;
    margin-top: -1em;
  }
  .range-knob {
    width: 2em;
    height: 2em;
    margin-top: -1.5em;
    border-radius: 1em;
    margin-left: ~"calc(20% - 1em)";
    background: @white;
    border: 1px solid @grayBoxBorder;
  }
}
.controls-parallelism {
  p {
    .flexy();
  }
  strong {
    position: relative;
    font-size: 0.875em;
    font-weight: normal;
    width: 24px;
    margin: 0 .25em;
    text-align: center;
    &:before {
      .box-sizing(border-box);
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 1px solid @green;
      border-radius: 1em;
      z-index: -1;
    }
  }
}
.parallelism-options {
  .flexy();
  margin: 3em 0;
  button {
    .box-sizing(border-box);
    .flex(1 1 20%);
    height: 3em;
    margin: 0;
    padding: 0;
    background: none;
    border: 1px solid @grayBoxBorder;
    outline: none;
    transition: 200ms;
    &:hover,
    &:active {
      background: @grayBoxBorder;
{'fraction_non_alphanumeric': 0.14672686230248308, 'fraction_numerical': 0.03532067454521312, 'mean_word_length': 1.9013867488443759, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5972743', 'n_tokens_mistral': 3123, 'n_tokens_neox': 2889, 'n_words': 613}