<commit_before>// temporary hacks for mocking up initial design
#navbar,
#sticky-help-link,
.main-foot {
  display: none !important;
}
#app {
  min-width: inherit;
}
// temporary hacks for mocking up initial design

@bezier_fadein: cubic-bezier(0.445, 0.05, 0.55, 0.95);
@bezier_transform: cubic-bezier(0.39, 0.575, 0.565, 1);

@prolog_open_duration: 500ms; // default 1000ms
@prolog_open_delay: (@prolog_open_duration / 10);

@prolog_light_on_dark: #aaa;

@home_drawing_offset: 5px;

@prolog_h1_font: 72px;
@prolog_h1_line: @prolog_h1_font;
@prolog_h3_font: 20px;
@prolog_h3_line: (@prolog_h3_font * 1.5); // 30px

@prolog_cover_fadein: 500ms; // default 500ms
@prolog_cover_fadeout: (@prolog_cover_fadein / 2);

@purpose_font: 16px;
@purpose_line: 24px;
@purpose_line_margin: @purpose_line - @purpose_font;

@purpose_drawings_width: 34%; // default 34%

@zindex_home_cover: 10; // These should move to a less file in charge of managing z-indexes
@zindex_home_nav:          (@zindex_home_cover + 2);
@zindex_home_top_shelf:    (@zindex_home_cover + 1);
@zindex_home_avatars:      (@zindex_home_cover + 2);
@zindex_home_slogans:      (@zindex_home_cover + 2);
@zindex_home_bottom_shelf: (@zindex_home_cover + 2);
@zindex_home_action:       (@zindex_home_cover + 2);

@em: @purpose_font;

.page {
  &.home {
    font-size: @purpose_font;
    line-height: @purpose_line;
    h1 {
      font-size: @prolog_h1_font;
      line-height: @prolog_h1_line;
      font-weight: 300;
    }
    h3 {
      font-size: @prolog_h3_font;
      line-height: @prolog_h3_line;
      font-weight: normal;
    }
    h5 {
      font-size: @purpose_font;
      line-height: @purpose_line;
      font-weight: normal;
      margin: @purpose_line_margin 0;
    }
  }
}

@home_nav_logo: @purpose_line;
@home_action_width: (@tile * 3);
@home_action_height: @tile;

.home-nav {
  .animation(prolog-down @prolog_open_duration @bezier_fadein @prolog_open_duration both);
  .box-sizing(border-box);
  .vertGradient(fade(@white, 0), fade(@white, 0));
  position: fixed;
  z-index: @zindex_home_nav; // ducks under prolog content intentionally
  left: 0;
  top: 0;
  width: 100%;
  height: @tile;
  background-size: 100% 0;
  background-position: bottom center;
  background-repeat: no-repeat;
  border-bottom: 1px solid fade(@black, 13);
  overflow: hidden;
  &.logo-visible {
    .promo {
      top: (((@tile - @purpose_line) / 2) * -1);
      opacity: 0;
    }
    .logo-circleci {
      left: ((@tile - @baseLineHeight) / 2);
      opacity: 1;
      pointer-events: auto;
      transition: left @prolog_cover_fadein,
                  opacity @prolog_cover_fadein (@prolog_cover_fadeout / 2);
    }
  }
  &.cta-visible {
    &:not(.cta-invisible) {
      .login {
        top: (((@tile - @purpose_line) / 2) * -1);
        opacity: 0;
      }
      .action {
        right: ((@tile - @baseLineHeight) / 2);
        opacity: 1;
        pointer-events: auto;
        transition: right @prolog_cover_fadein,
                    opacity @prolog_cover_fadein (@prolog_cover_fadeout / 2);
      }
    }
  }
  &.bkg-visible {
    .vertGradient(@white, @white);
    background-size: 100% 100%;
    &:not(.bkg-invisible) {
      box-shadow: 1px 2px fade(@black, 08);
      border-color: @white;
    }
  }
  &.bkg-invisible {
    background-position: top center;
  }
  a {
    position: absolute;
    top: ((@tile - @purpose_line) / 2);
    transition: top @prolog_cover_fadeout,
                left @prolog_cover_fadeout,
                right @prolog_cover_fadeout,
                opacity @prolog_cover_fadeout;
  }
  .promo,
  .login {
    opacity: 1;
    &:not(:hover) {
      color: @grayLight;
    }
  }
  .promo {
    left: ((@tile - @baseLineHeight) / 2);
  }
  .login {
    right: ((@tile - @baseLineHeight) / 2);
  }
  .logo-circleci {
    left: @tile;
    top: ((@tile - @home_nav_logo) / 2);
    width: (@home_nav_logo * 4.5);
    height: @home_nav_logo;
    opacity: 0;
    pointer-events: none;
    svg {
      fill: @grayLighter;
    }
  }
  .action {
    .box-sizing(border-box);
    .flexy(center, center);
    right: @tile;
    top: ((@tile - (@home_action_height / 2)) / 2);
    width: (@home_action_width / 2);
    height: (@home_action_height / 2);
    font-size: round(@em * .89);
    color: @black;
    background: @white;
    border: 1px solid @gray;
    border-radius: (@home_action_height / 2);
    pointer-events: none;
    opacity: 0;
    &:hover {
      color: @white;
      background: @gray;
      transition: 100ms;
    }
  }
}
.home-prolog,
.home-epilog {
  .flexy(column);
  position: relative;
  height: 100vh;
}
.home-prolog {
  background: @grayDark;
  color: @prolog_light_on_dark;
  a:not([role="button"]) {
    color: @gray;
    transition: color 300ms;
    i {
      path {
        stroke: @gray;
        stroke-width: 8;
        transition: stroke 300ms;
      }
    }
    &:hover {
      color: @white;
      transition: color 200ms;
      i {
        path {
          stroke: @white;
          transition: stroke 200ms;
        }
      }
    }
  }
}
.home-top-shelf {
  .order(1);
  position: relative;
  z-index: @zindex_home_top_shelf;
  height: @tile;
  margin-bottom: auto;
}
.home-cover {
  background: @white;
  width: (@tile * 3);
  height: @tile;
  border-radius: (@tile / 2);
  position: absolute;
  z-index: @zindex_home_cover;
  pointer-events: none;
  left: ~"calc(50% - 105px)";
  top: ~"calc(50% + 140px)";
  opacity: 0;
  // transition: all @prolog_cover_fadeout,
  //             opacity 0 @prolog_cover_fadeout;
  transition: width @prolog_cover_fadeout,
              height @prolog_cover_fadeout,
              left @prolog_cover_fadeout,
              top @prolog_cover_fadeout,
              border-radius @prolog_cover_fadeout,
              opacity 0 @prolog_cover_fadeout;
  transition-timing-function: @bezier_transform;
}
.home-avatars {
  .flexy(center, center);
  .order(2);
  position: relative;
  z-index: @zindex_home_avatars;
  .avatars {
    position: relative;
    width: @tile;
    height: @tile;
  }
  i.ico {
    svg {
      width: @tile;
      height: @tile;
    }
    path {
      fill: @white;
      transition: @prolog_cover_fadeout;
    }
  }
  .avatar-circle {
    .animation(prolog-logo @prolog_open_duration @bezier_fadein);
    position: absolute;
    top: 0;
    left: 0;
    transition: @prolog_cover_fadeout;
    transition-timing-function: @bezier_transform;
  }
  .avatar-github {
    position: absolute;
    top: (-@tile / 4);
    left: (-@tile / 4);
    opacity: 0;
    transition: (@prolog_cover_fadeout / 2);
    &:before,
    &:after {
      .box-sizing(border-box);
      content: "";
      position: absolute;
      width: 90px;
      height: 90px;
      border: 1px solid @grayBoxBorder;
      border-radius: 5px;
    }
    &:before {
      top: -10px;
      left: -10px;
    }
    &:after {
      top: (@tile / 2);
      left: (@tile / 2);
      background: @white;
    }
  }
}
.home-slogans {
  .order(3);
  position: relative;
  z-index: @zindex_home_slogans;
  text-align: center;
  margin: @tile 0;
  h3 {
    margin: 0;
  }
  .slogan {
    position: relative;
    color: transparent;
    &:before,
    &:after {
      position: absolute;
      left: 0;
      width: 100%;
      pointer-events: none;
      transition-timing-function: @bezier_transform;
    }
    &:before {
      content: attr(title);
      top: 0;
      transition: opacity @prolog_cover_fadeout (@prolog_cover_fadeout / 2),
                  top (@prolog_cover_fadeout * 1.5) (@prolog_cover_fadeout / 2);
    }
    &:after {
      content: attr(alt);
      opacity: 0;
      transition: (@prolog_cover_fadeout / 2);
    }
  }
  .proverb {
    height: @prolog_h1_font;
    margin: 0 0 ((@tile * 2) - (@prolog_h1_line + (@prolog_h3_line * 2)));
    &:before {
      color: @grayBoxBorder;
    }
    &:after {
      top: @prolog_h1_font;
      color: @grayDark;
    }
  }
  .context {
    height: @prolog_h3_line;
    &:nth-of-type(1) { .animation(prolog-up @prolog_open_duration @bezier_fadein (@prolog_open_delay * 1) both); }
    &:nth-of-type(2) { .animation(prolog-up @prolog_open_duration @bezier_fadein (@prolog_open_delay * 2) both); }
    &:before,
    &:after {
      color: @prolog_light_on_dark;
    }
    &:after {
      top: @prolog_h3_line;
    }
  }
}
.home-bottom-shelf {
  .animation(prolog-up @prolog_open_duration @bezier_fadein @prolog_open_duration both);
  .flexy(center, center);
  .order(5);
  position: relative;
  z-index: @zindex_home_bottom_shelf;
  height: @tile;
  margin-top: auto;
  a {
    .flexy();
  }
  .chevron-down {
    width: round(@em * .89);
    height: round(@em * .89);
    margin: 0 1ex;
  }
}
//
// Where the magic happens.
//
.home-action {
  .animation(prolog-action @prolog_open_duration @bezier_fadein);
  .box-sizing(border-box);
  .flexy(center, center);
  .order(4);
  position: relative;
  z-index: @zindex_home_action;
  color: @grayDark;
  font-size: 20px;
  background: @white;
  width: @home_action_width;
  height: @home_action_height;
  margin: 0 auto;
  border: 1px solid @white;
  border-radius: (@home_action_height / 2);
  transition: color @prolog_cover_fadeout,
              background @prolog_cover_fadeout,
              border-color @prolog_cover_fadeout @prolog_cover_fadeout;
  transition-timing-function: @bezier_fadein;
  &:hover {
// Button
    color: @white;
    background: @grayDark;
    border-color: @grayBoxBorder;
    transition: color @prolog_cover_fadein @prolog_cover_fadeout,
                background @prolog_cover_fadein @prolog_cover_fadeout,
                border-color 0 0;
// Cover
    ~ .home-cover {
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      opacity: 1;
      border-radius: 0;
      transition: width @prolog_cover_fadein,
                  height @prolog_cover_fadein,
                  left @prolog_cover_fadein,
                  top @prolog_cover_fadein,
                  border-radius (@prolog_cover_fadein / 2),
                  opacity 0;
    }
// Logos
    ~ .home-avatars {
      i.ico {
        path {
          fill: @grayDark;
          transition: @prolog_cover_fadein;
        }
      }
      .avatar-circle {
        top: ((@tile / 4) + 10px);
        left: ((@tile / 4) + 10px);
        transition: @prolog_cover_fadein;
      }
      .avatar-github {
        opacity: 1;
        transition: @prolog_cover_fadein @prolog_cover_fadeout;
      }
    }
// Taglines
    ~ .home-slogans {
      .proverb {
        &:before {
          top: -@prolog_h1_font;
          opacity: 0;
          transition: (@prolog_cover_fadein * .3);
        }
        &:after {
          top: 0;
          opacity: 1;
          transition: top @prolog_cover_fadein,
                      opacity @prolog_cover_fadein (@prolog_cover_fadeout * .5);
        }
      }
      .context {
        &:before {
          top: -@prolog_h3_line;
          opacity: 0;
          transition: (@prolog_cover_fadein * .3);
        }
        &:after {
          top: 0;
          opacity: 1;
          transition: top @prolog_cover_fadein,
                      opacity @prolog_cover_fadein (@prolog_cover_fadeout * .5);
        }
      }
    }
  }
}


@home_drawings_speed: 500ms;
@home_drawings_cascade: (@home_drawings_speed / 15);
@home_drawings_bounce: cubic-bezier(.55,-0.55,.55,2.33);


.home-purpose {
  .flexy();
  font-size: @purpose_font;
  line-height: @purpose_line;
  height: 100vh;
  background: @whiten;
  box-shadow: 0 1px 3px fade(@black, 5) inset;
  overflow: hidden;
//
// Purpose Animation
//
  .draw-new {
    text {
      transition: (@home_drawings_speed / 2) (@home_drawings_speed / 2);
      transition-timing-function: @bezier_fadein;
    }
    g,
    rect,
    path,
    circle {
      .transform-origin(center);
    }
  }
  .draw-filler {
    fill: @grayBoxBorder;
  }
  .draw-status-background {
    rect,
    circle {
      fill: @grayBoxBorder;
      transition: @home_drawings_speed;
      transition-timing-function: @home_drawings_bounce;
    }
    .background-left   {
      .translate(25px, 0);
    }
    .background-center {
      .transform(translate(0,0); scale(0,1));
    }
    .background-right  {
      .translate(-25px, 0);
    }
  }
  .draw-status-icon {
    .translate(25px, 0);
    opacity: 0;
    transition: @home_drawings_speed;
    transition-timing-function: @home_drawings_bounce;
    .draw-status-turn {
      .rotate(0deg);
    }
    .draw-status-circle {
      .scale(1, 1);
      transition: @home_drawings_speed;
      transition-timing-function: @home_drawings_bounce;
    }
    .draw-status-check {
      .scale(0, 0);
      transition: @home_drawings_speed;
      transition-timing-function: @home_drawings_bounce;
      fill: @white;
    }
  }
  .draw-status-text {
    path {
      .scale(0, 0);
      opacity: 0;
      transition: @home_drawings_speed;
      transition-timing-function: @home_drawings_bounce;
    }
  }
  &.animate {
    .draw-new {
      text {
        fill: @green;
        transition: (@home_drawings_speed * 2) @home_drawings_speed;
      }
    }
    .draw-status-background {
      rect,
      circle {
        fill: @green;
        transition-delay: (@home_drawings_speed / 2);
        .transform(translate(0,0); scale(1,1));
      }
    }
    .draw-status-icon {
      .translate(0, 0);
      transition-delay: ((@home_drawings_speed / 2) + @home_drawings_cascade);
      opacity: 1;
      .draw-status-circle {
        .scale(0, 0);
        transition-delay: @home_drawings_speed;
      }
      .draw-status-check {
        .scale(1, 1);
        transition-delay: (@home_drawings_speed + @home_drawings_cascade);
      }
    }
    .draw-status-text {
      path {
        .scale(1, 1);
        opacity: 1;
        &:nth-child(6) { transition-delay: ((@home_drawings_speed / 2) + (@home_drawings_cascade * 1)); }
        &:nth-child(5) { transition-delay: ((@home_drawings_speed / 2) + (@home_drawings_cascade * 2)); }
        &:nth-child(4) { transition-delay: ((@home_drawings_speed / 2) + (@home_drawings_cascade * 3)); }
        &:nth-child(3) { transition-delay: ((@home_drawings_speed / 2) + (@home_drawings_cascade * 4)); }
        &:nth-child(2) { transition-delay: ((@home_drawings_speed / 2) + (@home_drawings_cascade * 5)); }
        &:nth-child(1) { transition-delay: ((@home_drawings_speed / 2) + (@home_drawings_cascade * 6)); }
      }
    }
  }
}
.home-drawings {
  .flex(0, 0, @purpose_drawings_width);
  .flexy(center, flex-end);
  position: relative;
  max-height: 100%;
  margin: auto 0;
  figure {
    @width: 1600px; // default 1600px
    .flex(0, 0, auto);
    position: relative;
    width: @width;
    height: (@width / 1.6);
    background: @appBackgroundColor;
    border: 1px solid @grayBoxBorder;
    border-radius: 5px;
    overflow: hidden;
    // pointer-events: none;      // turned off for dev
    // -webkit-user-select: none; // turned off for dev
    &:nth-child(-n+2) {
      position: absolute;
      background-image: url("../../img/drawing-dashboard.svg");
      background-size: cover;
      background-position: top center;
      background-repeat: no-repeat;
    }
    &:nth-child(1) {
      right: (@home_drawing_offset * 2);
      bottom: (-@home_drawing_offset * 2);
    }
    &:nth-child(2) {
      right: @home_drawing_offset;
      bottom: -@home_drawing_offset;
    }
  }
}
.home-articles {
  .box-sizing(border-box);
  .flex(0, 0, (100% - @purpose_drawings_width));
  .flexy(center, center, column);
  padding: 0 @tile;
  article {
    max-width: 1000px;
  }
  p {
    color: @gray;
  }
  a {
    &:not(:hover) {
      color: @grayDark;
    }
  }
  .shopify-link {
    .flexy();
    &:hover {
      svg {
        stroke: @blueLight;
        margin-left: 1ex;
      }
    }
    svg {
      stroke: @grayDark;
      stroke-width: 8;
      margin-left: .5ex;
      transition: margin 100ms ease-in-out;
    }
  }
}



@practice_subtle: @grayLighter;

@practice_tool_size: 50px;
@practice_tool_grow: 1.2;
@practice_tool_speed: 400ms;
@practice_tool_timing: ease-in-out;
@practice_tool_weight: 3;

@practice_logo_height: @purpose_line;

@quote_avatar_size: (@tile / 2);
@quote_animation_speed: 500ms;

.home-practice {
  .flexy(column);
  font-size: @purpose_font;
  line-height: @purpose_line;
  height: 100vh;
  padding: 0 (@tile / 2);
  background: @white;
  box-shadow: 0 -1px 3px fade(@black, 5);
  overflow: hidden;
  article {
    .flex(1, 1, 1000px);
    .flexy(column);
    max-width: 1000px;
    margin: 0 auto;
  }
}
.practice-tools {
  .flex(1, 1, 0);
  .flexy();
  article {
    .justify-content(flex-end);
  }
  i.ico {
    display: block;
    padding-right: @purpose_font;
    width: (@practice_tool_size * @practice_tool_grow);
    height: (@practice_tool_size * @practice_tool_grow);
    &:hover {
      svg {
        stroke-width: (@practice_tool_weight + 1);
        width: (@practice_tool_size * @practice_tool_grow);
        height: (@practice_tool_size * @practice_tool_grow);
        -webkit-filter: drop-shadow(0 13px 3px fade(@black, 13));
        filter: drop-shadow(0 13px 3px fade(@black, 13));
        transition: (@practice_tool_speed / 2) @practice_tool_timing;
      }
      .slim-ruby,
      .slim-rails  { stroke: #CC342D; }
      .slim-python { stroke: #3776ab; }
      .slim-js     { stroke: #FFCD0A; }
      .slim-java   { stroke: #E76F00; }
      .slim-php    { stroke: #6A9AD1; }
      .slim-django { stroke: #092e20; }
      .slim-node   { stroke: #8CC84B; }
    }
    svg {
      width: @practice_tool_size;
      height: @practice_tool_size;
      stroke: @practice_subtle;
      stroke-width: @practice_tool_weight;
      stroke-linecap: round;
      stroke-linejoin: bevel;
      transition: @practice_tool_speed @practice_tool_timing;
    }
  }
}
.practice-tools-high {
  .flexy();
  width: 100%;
  margin-bottom: @purpose_font;
}
.practice-tools-low {
  .flexy();
  width: 100%;
}
.practice-articles {
  .flex(0, 0, 34%);
  .flexy();
  article {
    .justify-content(center);
  }
}
.practice-customers {
  .flex(1, 1, 0);
  .flexy();
  article {
    .justify-content(flex-start);
  }
}
.customers-brands {
  .flexy();
  width: 100%;
  figure {
    margin: 0;
  }
  &.selected-0 {
    .customers-brand:nth-of-type(1) {
      &:before, &:after { opacity: 1; transition: opacity (@quote_animation_speed / 2) (@quote_animation_speed / 2); }
    }
  }
  &.selected-1 {
    .customers-brand:nth-of-type(2) {
      &:before, &:after { opacity: 1; transition: opacity (@quote_animation_speed / 2) (@quote_animation_speed / 2); }
    }
    & + .quote-card { margin-left: (@tile * 1); }
  }
  &.selected-2 {
    .customers-brand:nth-of-type(3) {
      &:before, &:after { opacity: 1; transition: opacity (@quote_animation_speed / 2) (@quote_animation_speed / 2); }
    }
    & + .quote-card { margin-left: (@tile * 2); }
  }
  &.selected-3 {
    .customers-brand:nth-of-type(4) {
      &:before, &:after { opacity: 1; transition: opacity (@quote_animation_speed / 2) (@quote_animation_speed / 2); }
    }
    & + .quote-card { margin-left: (@tile * 3); }
  }
  &.selected-4 {
    .customers-brand:nth-of-type(5) {
      &:before, &:after { opacity: 1; transition: opacity (@quote_animation_speed / 2) (@quote_animation_speed / 2); }
    }
    & + .quote-card { margin-left: (@tile * 4); }
  }
}
.customers-brand {
  .flexy();
  position: relative;
  height: (@practice_logo_height * @practice_tool_grow);
  &:before,
  &:after {
    content: "";
    position: absolute;
    opacity: 0;
    top: 100%;
    left: 50%;
    height: 0;
    width: 0;
    border: solid transparent;
    pointer-events: none;
    transition: opacity 0;
  }
  &:before {
    border-bottom-color: @grayBoxBorder;<commit_msg>create loop for quote positioning css<commit_after>// temporary hacks for mocking up initial design
#navbar,
#sticky-help-link,
.main-foot {
  display: none !important;
}
#app {
  min-width: inherit;
}
// temporary hacks for mocking up initial design

@bezier_fadein: cubic-bezier(0.445, 0.05, 0.55, 0.95);
@bezier_transform: cubic-bezier(0.39, 0.575, 0.565, 1);

@prolog_open_duration: 500ms; // default 1000ms
@prolog_open_delay: (@prolog_open_duration / 10);

@prolog_light_on_dark: #aaa;

@home_drawing_offset: 5px;

@prolog_h1_font: 72px;
@prolog_h1_line: @prolog_h1_font;
@prolog_h3_font: 20px;
@prolog_h3_line: (@prolog_h3_font * 1.5); // 30px

@prolog_cover_fadein: 500ms; // default 500ms
@prolog_cover_fadeout: (@prolog_cover_fadein / 2);

@purpose_font: 16px;
@purpose_line: 24px;
@purpose_line_margin: @purpose_line - @purpose_font;

@purpose_drawings_width: 34%; // default 34%

@zindex_home_cover: 10; // These should move to a less file in charge of managing z-indexes
@zindex_home_nav:          (@zindex_home_cover + 2);
@zindex_home_top_shelf:    (@zindex_home_cover + 1);
@zindex_home_avatars:      (@zindex_home_cover + 2);
@zindex_home_slogans:      (@zindex_home_cover + 2);
@zindex_home_bottom_shelf: (@zindex_home_cover + 2);
@zindex_home_action:       (@zindex_home_cover + 2);

@em: @purpose_font;

.page {
  &.home {
    font-size: @purpose_font;
    line-height: @purpose_line;
    h1 {
      font-size: @prolog_h1_font;
      line-height: @prolog_h1_line;
      font-weight: 300;
    }
    h3 {
      font-size: @prolog_h3_font;
      line-height: @prolog_h3_line;
      font-weight: normal;
    }
    h5 {
      font-size: @purpose_font;
      line-height: @purpose_line;
      font-weight: normal;
      margin: @purpose_line_margin 0;
    }
  }
}

@home_nav_logo: @purpose_line;
@home_action_width: (@tile * 3);
@home_action_height: @tile;

.home-nav {
  .animation(prolog-down @prolog_open_duration @bezier_fadein @prolog_open_duration both);
  .box-sizing(border-box);
  .vertGradient(fade(@white, 0), fade(@white, 0));
  position: fixed;
  z-index: @zindex_home_nav; // ducks under prolog content intentionally
  left: 0;
  top: 0;
  width: 100%;
  height: @tile;
  background-size: 100% 0;
  background-position: bottom center;
  background-repeat: no-repeat;
  border-bottom: 1px solid fade(@black, 13);
  overflow: hidden;
  &.logo-visible {
    .promo {
      top: (((@tile - @purpose_line) / 2) * -1);
      opacity: 0;
    }
    .logo-circleci {
      left: ((@tile - @baseLineHeight) / 2);
      opacity: 1;
      pointer-events: auto;
      transition: left @prolog_cover_fadein,
                  opacity @prolog_cover_fadein (@prolog_cover_fadeout / 2);
    }
  }
  &.cta-visible {
    &:not(.cta-invisible) {
      .login {
        top: (((@tile - @purpose_line) / 2) * -1);
        opacity: 0;
      }
      .action {
        right: ((@tile - @baseLineHeight) / 2);
        opacity: 1;
        pointer-events: auto;
        transition: right @prolog_cover_fadein,
                    opacity @prolog_cover_fadein (@prolog_cover_fadeout / 2);
      }
    }
  }
  &.bkg-visible {
    .vertGradient(@white, @white);
    background-size: 100% 100%;
    &:not(.bkg-invisible) {
      box-shadow: 1px 2px fade(@black, 08);
      border-color: @white;
    }
  }
  &.bkg-invisible {
    background-position: top center;
  }
  a {
    position: absolute;
    top: ((@tile - @purpose_line) / 2);
    transition: top @prolog_cover_fadeout,
                left @prolog_cover_fadeout,
                right @prolog_cover_fadeout,
                opacity @prolog_cover_fadeout;
  }
  .promo,
  .login {
    opacity: 1;
    &:not(:hover) {
      color: @grayLight;
    }
  }
  .promo {
    left: ((@tile - @baseLineHeight) / 2);
  }
  .login {
    right: ((@tile - @baseLineHeight) / 2);
  }
  .logo-circleci {
    left: @tile;
    top: ((@tile - @home_nav_logo) / 2);
    width: (@home_nav_logo * 4.5);
    height: @home_nav_logo;
    opacity: 0;
    pointer-events: none;
    svg {
      fill: @grayLighter;
    }
  }
  .action {
    .box-sizing(border-box);
    .flexy(center, center);
    right: @tile;
    top: ((@tile - (@home_action_height / 2)) / 2);
    width: (@home_action_width / 2);
    height: (@home_action_height / 2);
    font-size: round(@em * .89);
    color: @black;
    background: @white;
    border: 1px solid @gray;
    border-radius: (@home_action_height / 2);
    pointer-events: none;
    opacity: 0;
    &:hover {
      color: @white;
      background: @gray;
      transition: 100ms;
    }
  }
}
.home-prolog,
.home-epilog {
  .flexy(column);
  position: relative;
  height: 100vh;
}
.home-prolog {
  background: @grayDark;
  color: @prolog_light_on_dark;
  a:not([role="button"]) {
    color: @gray;
    transition: color 300ms;
    i {
      path {
        stroke: @gray;
        stroke-width: 8;
        transition: stroke 300ms;
      }
    }
    &:hover {
      color: @white;
      transition: color 200ms;
      i {
        path {
          stroke: @white;
          transition: stroke 200ms;
        }
      }
    }
  }
}
.home-top-shelf {
  .order(1);
  position: relative;
  z-index: @zindex_home_top_shelf;
  height: @tile;
  margin-bottom: auto;
}
.home-cover {
  background: @white;
  width: (@tile * 3);
  height: @tile;
  border-radius: (@tile / 2);
  position: absolute;
  z-index: @zindex_home_cover;
  pointer-events: none;
  left: ~"calc(50% - 105px)";
  top: ~"calc(50% + 140px)";
  opacity: 0;
  // transition: all @prolog_cover_fadeout,
  //             opacity 0 @prolog_cover_fadeout;
  transition: width @prolog_cover_fadeout,
              height @prolog_cover_fadeout,
              left @prolog_cover_fadeout,
              top @prolog_cover_fadeout,
              border-radius @prolog_cover_fadeout,
              opacity 0 @prolog_cover_fadeout;
  transition-timing-function: @bezier_transform;
}
.home-avatars {
  .flexy(center, center);
  .order(2);
  position: relative;
  z-index: @zindex_home_avatars;
  .avatars {
    position: relative;
    width: @tile;
    height: @tile;
  }
  i.ico {
    svg {
      width: @tile;
      height: @tile;
    }
    path {
      fill: @white;
      transition: @prolog_cover_fadeout;
    }
  }
  .avatar-circle {
    .animation(prolog-logo @prolog_open_duration @bezier_fadein);
    position: absolute;
    top: 0;
    left: 0;
    transition: @prolog_cover_fadeout;
    transition-timing-function: @bezier_transform;
  }
  .avatar-github {
    position: absolute;
    top: (-@tile / 4);
    left: (-@tile / 4);
    opacity: 0;
    transition: (@prolog_cover_fadeout / 2);
    &:before,
    &:after {
      .box-sizing(border-box);
      content: "";
      position: absolute;
      width: 90px;
      height: 90px;
      border: 1px solid @grayBoxBorder;
      border-radius: 5px;
    }
    &:before {
      top: -10px;
      left: -10px;
    }
    &:after {
      top: (@tile / 2);
      left: (@tile / 2);
      background: @white;
    }
  }
}
.home-slogans {
  .order(3);
  position: relative;
  z-index: @zindex_home_slogans;
  text-align: center;
  margin: @tile 0;
  h3 {
    margin: 0;
  }
  .slogan {
    position: relative;
    color: transparent;
    &:before,
    &:after {
      position: absolute;
      left: 0;
      width: 100%;
      pointer-events: none;
      transition-timing-function: @bezier_transform;
    }
    &:before {
      content: attr(title);
      top: 0;
      transition: opacity @prolog_cover_fadeout (@prolog_cover_fadeout / 2),
                  top (@prolog_cover_fadeout * 1.5) (@prolog_cover_fadeout / 2);
    }
    &:after {
      content: attr(alt);
      opacity: 0;
      transition: (@prolog_cover_fadeout / 2);
    }
  }
  .proverb {
    height: @prolog_h1_font;
    margin: 0 0 ((@tile * 2) - (@prolog_h1_line + (@prolog_h3_line * 2)));
    &:before {
      color: @grayBoxBorder;
    }
    &:after {
      top: @prolog_h1_font;
      color: @grayDark;
    }
  }
  .context {
    height: @prolog_h3_line;
    &:nth-of-type(1) { .animation(prolog-up @prolog_open_duration @bezier_fadein (@prolog_open_delay * 1) both); }
    &:nth-of-type(2) { .animation(prolog-up @prolog_open_duration @bezier_fadein (@prolog_open_delay * 2) both); }
    &:before,
    &:after {
      color: @prolog_light_on_dark;
    }
    &:after {
      top: @prolog_h3_line;
    }
  }
}
.home-bottom-shelf {
  .animation(prolog-up @prolog_open_duration @bezier_fadein @prolog_open_duration both);
  .flexy(center, center);
  .order(5);
  position: relative;
  z-index: @zindex_home_bottom_shelf;
  height: @tile;
  margin-top: auto;
  a {
    .flexy();
  }
  .chevron-down {
    width: round(@em * .89);
    height: round(@em * .89);
    margin: 0 1ex;
  }
}
//
// Where the magic happens.
//
.home-action {
  .animation(prolog-action @prolog_open_duration @bezier_fadein);
  .box-sizing(border-box);
  .flexy(center, center);
  .order(4);
  position: relative;
  z-index: @zindex_home_action;
  color: @grayDark;
  font-size: 20px;
  background: @white;
  width: @home_action_width;
  height: @home_action_height;
  margin: 0 auto;
  border: 1px solid @white;
  border-radius: (@home_action_height / 2);
  transition: color @prolog_cover_fadeout,
              background @prolog_cover_fadeout,
              border-color @prolog_cover_fadeout @prolog_cover_fadeout;
  transition-timing-function: @bezier_fadein;
  &:hover {
// Button
    color: @white;
    background: @grayDark;
    border-color: @grayBoxBorder;
    transition: color @prolog_cover_fadein @prolog_cover_fadeout,
                background @prolog_cover_fadein @prolog_cover_fadeout,
                border-color 0 0;
// Cover
    ~ .home-cover {
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      opacity: 1;
      border-radius: 0;
      transition: width @prolog_cover_fadein,
                  height @prolog_cover_fadein,
                  left @prolog_cover_fadein,
                  top @prolog_cover_fadein,
                  border-radius (@prolog_cover_fadein / 2),
                  opacity 0;
    }
// Logos
    ~ .home-avatars {
      i.ico {
        path {
          fill: @grayDark;
          transition: @prolog_cover_fadein;
        }
      }
      .avatar-circle {
        top: ((@tile / 4) + 10px);
        left: ((@tile / 4) + 10px);
        transition: @prolog_cover_fadein;
      }
      .avatar-github {
        opacity: 1;
        transition: @prolog_cover_fadein @prolog_cover_fadeout;
      }
    }
// Taglines
    ~ .home-slogans {
      .proverb {
        &:before {
          top: -@prolog_h1_font;
          opacity: 0;
          transition: (@prolog_cover_fadein * .3);
        }
        &:after {
          top: 0;
          opacity: 1;
          transition: top @prolog_cover_fadein,
                      opacity @prolog_cover_fadein (@prolog_cover_fadeout * .5);
        }
      }
      .context {
        &:before {
          top: -@prolog_h3_line;
          opacity: 0;
          transition: (@prolog_cover_fadein * .3);
        }
        &:after {
          top: 0;
          opacity: 1;
          transition: top @prolog_cover_fadein,
                      opacity @prolog_cover_fadein (@prolog_cover_fadeout * .5);
        }
      }
    }
  }
}


@home_drawings_speed: 500ms;
@home_drawings_cascade: (@home_drawings_speed / 15);
@home_drawings_bounce: cubic-bezier(.55,-0.55,.55,2.33);


.home-purpose {
  .flexy();
  font-size: @purpose_font;
  line-height: @purpose_line;
  height: 100vh;
  background: @whiten;
  box-shadow: 0 1px 3px fade(@black, 5) inset;
  overflow: hidden;
//
// Purpose Animation
//
  .draw-new {
    text {
      transition: (@home_drawings_speed / 2) (@home_drawings_speed / 2);
      transition-timing-function: @bezier_fadein;
    }
    g,
    rect,
    path,
    circle {
      .transform-origin(center);
    }
  }
  .draw-filler {
    fill: @grayBoxBorder;
  }
  .draw-status-background {
    rect,
    circle {
      fill: @grayBoxBorder;
      transition: @home_drawings_speed;
      transition-timing-function: @home_drawings_bounce;
    }
    .background-left   {
      .translate(25px, 0);
    }
    .background-center {
      .transform(translate(0,0); scale(0,1));
    }
    .background-right  {
      .translate(-25px, 0);
    }
  }
  .draw-status-icon {
    .translate(25px, 0);
    opacity: 0;
    transition: @home_drawings_speed;
    transition-timing-function: @home_drawings_bounce;
    .draw-status-turn {
      .rotate(0deg);
    }
    .draw-status-circle {
      .scale(1, 1);
      transition: @home_drawings_speed;
      transition-timing-function: @home_drawings_bounce;
    }
    .draw-status-check {
      .scale(0, 0);
      transition: @home_drawings_speed;
      transition-timing-function: @home_drawings_bounce;
      fill: @white;
    }
  }
  .draw-status-text {
    path {
      .scale(0, 0);
      opacity: 0;
      transition: @home_drawings_speed;
      transition-timing-function: @home_drawings_bounce;
    }
  }
  &.animate {
    .draw-new {
      text {
        fill: @green;
        transition: (@home_drawings_speed * 2) @home_drawings_speed;
      }
    }
    .draw-status-background {
      rect,
      circle {
        fill: @green;
        transition-delay: (@home_drawings_speed / 2);
        .transform(translate(0,0); scale(1,1));
      }
    }
    .draw-status-icon {
      .translate(0, 0);
      transition-delay: ((@home_drawings_speed / 2) + @home_drawings_cascade);
      opacity: 1;
      .draw-status-circle {
        .scale(0, 0);
        transition-delay: @home_drawings_speed;
      }
      .draw-status-check {
        .scale(1, 1);
        transition-delay: (@home_drawings_speed + @home_drawings_cascade);
      }
    }
    .draw-status-text {
      path {
        .scale(1, 1);
        opacity: 1;
        &:nth-child(6) { transition-delay: ((@home_drawings_speed / 2) + (@home_drawings_cascade * 1)); }
        &:nth-child(5) { transition-delay: ((@home_drawings_speed / 2) + (@home_drawings_cascade * 2)); }
        &:nth-child(4) { transition-delay: ((@home_drawings_speed / 2) + (@home_drawings_cascade * 3)); }
        &:nth-child(3) { transition-delay: ((@home_drawings_speed / 2) + (@home_drawings_cascade * 4)); }
        &:nth-child(2) { transition-delay: ((@home_drawings_speed / 2) + (@home_drawings_cascade * 5)); }
        &:nth-child(1) { transition-delay: ((@home_drawings_speed / 2) + (@home_drawings_cascade * 6)); }
      }
    }
  }
}
.home-drawings {
  .flex(0, 0, @purpose_drawings_width);
  .flexy(center, flex-end);
  position: relative;
  max-height: 100%;
  margin: auto 0;
  figure {
    @width: 1600px; // default 1600px
    .flex(0, 0, auto);
    position: relative;
    width: @width;
    height: (@width / 1.6);
    background: @appBackgroundColor;
    border: 1px solid @grayBoxBorder;
    border-radius: 5px;
    overflow: hidden;
    // pointer-events: none;      // turned off for dev
    // -webkit-user-select: none; // turned off for dev
    &:nth-child(-n+2) {
      position: absolute;
      background-image: url("../../img/drawing-dashboard.svg");
      background-size: cover;
      background-position: top center;
      background-repeat: no-repeat;
    }
    &:nth-child(1) {
      right: (@home_drawing_offset * 2);
      bottom: (-@home_drawing_offset * 2);
    }
    &:nth-child(2) {
      right: @home_drawing_offset;
      bottom: -@home_drawing_offset;
    }
  }
}
.home-articles {
  .box-sizing(border-box);
  .flex(0, 0, (100% - @purpose_drawings_width));
  .flexy(center, center, column);
  padding: 0 @tile;
  article {
    max-width: 1000px;
  }
  p {
    color: @gray;
  }
  a {
    &:not(:hover) {
      color: @grayDark;
    }
  }
  .shopify-link {
    .flexy();
    &:hover {
      svg {
        stroke: @blueLight;
        margin-left: 1ex;
      }
    }
    svg {
      stroke: @grayDark;
      stroke-width: 8;
      margin-left: .5ex;
      transition: margin 100ms ease-in-out;
    }
  }
}



@practice_subtle: @grayLighter;

@practice_tool_size: 50px;
@practice_tool_grow: 1.2;
@practice_tool_speed: 400ms;
@practice_tool_timing: ease-in-out;
@practice_tool_weight: 3;

@practice_logo_height: @purpose_line;

@quote_avatar_size: (@tile / 2);
@quote_animation_speed: 500ms;

.home-practice {
  .flexy(column);
  font-size: @purpose_font;
  line-height: @purpose_line;
  height: 100vh;
  padding: 0 (@tile / 2);
  background: @white;
  box-shadow: 0 -1px 3px fade(@black, 5);
  overflow: hidden;
  article {
    .flex(1, 1, 1000px);
    .flexy(column);
    max-width: 1000px;
    margin: 0 auto;
  }
}
.practice-tools {
  .flex(1, 1, 0);
  .flexy();
  article {
    .justify-content(flex-end);
  }
  i.ico {
    display: block;
    padding-right: @purpose_font;
    width: (@practice_tool_size * @practice_tool_grow);
    height: (@practice_tool_size * @practice_tool_grow);
    &:hover {
      svg {
        stroke-width: (@practice_tool_weight + 1);
        width: (@practice_tool_size * @practice_tool_grow);
        height: (@practice_tool_size * @practice_tool_grow);
        -webkit-filter: drop-shadow(0 13px 3px fade(@black, 13));
        filter: drop-shadow(0 13px 3px fade(@black, 13));
        transition: (@practice_tool_speed / 2) @practice_tool_timing;
      }
      .slim-ruby,
      .slim-rails  { stroke: #CC342D; }
      .slim-python { stroke: #3776ab; }
      .slim-js     { stroke: #FFCD0A; }
      .slim-java   { stroke: #E76F00; }
      .slim-php    { stroke: #6A9AD1; }
      .slim-django { stroke: #092e20; }
      .slim-node   { stroke: #8CC84B; }
    }
    svg {
      width: @practice_tool_size;
      height: @practice_tool_size;
      stroke: @practice_subtle;
      stroke-width: @practice_tool_weight;
      stroke-linecap: round;
      stroke-linejoin: bevel;
      transition: @practice_tool_speed @practice_tool_timing;
    }
  }
}
.practice-tools-high {
  .flexy();
  width: 100%;
  margin-bottom: @purpose_font;
}
.practice-tools-low {
  .flexy();
  width: 100%;
}
.practice-articles {
  .flex(0, 0, 34%);
  .flexy();
  article {
    .justify-content(center);
  }
}
.practice-customers {
  .flex(1, 1, 0);
  .flexy();
  article {
    .justify-content(flex-start);
  }
}
.customers-brands {
  .flexy();
  width: 100%;
  figure {
    margin: 0;
  }
  .loop_quotes(@counter) when (@counter > 0) {
    .loop_quotes((@counter - 1));
    @i: (@counter - 1);
    &.selected-@{i} {
      .customers-brand:nth-of-type(@{counter}) {&:before, &:after {opacity: 1; transition: opacity (@quote_animation_speed / 2) (@quote_animation_speed / 2);}}
      .margin(@counter) when (@counter > 1) {& + .quote-card { margin-left: (@tile * @i);}}
      .margin(@counter);
    }
  }
  .loop_quotes(5);
}
.customers-brand {
  .flexy();
  position: relative;
  height: (@practice_logo_height * @practice_tool_grow);
  &:before,
  &:after {
    content: "";
    position: absolute;
    opacity: 0;
    top: 100%;
    left: 50%;
    height: 0;
    width: 0;
    border: solid transparent;
    pointer-events: none;
    transition: opacity 0;
  }
  &:before {
    border-bottom-color: @grayBoxBorder;
{'fraction_non_alphanumeric': 0.1449395010448647, 'fraction_numerical': 0.02603132014137922, 'mean_word_length': 2.4354338385181244, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 5, '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': '4477787', 'n_tokens_mistral': 15381, 'n_tokens_neox': 14174, 'n_words': 2735}