<commit_before>.outer {
  position: absolute;
  z-index: @zindex_landing;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
  background-color: @dye_outer;
  &:not(.entry) {
    .animate_pricing();
    .animate_early_access();
  }
  &.page-landing {
    background-color: fade(@dye_outer, 0); // VETO
    &.entry {
      .outer-head .nav,
      .our-philosphy,
      .our-proof {
        .animation-duration(@now);
        .animation-delay(@now);
      }
    }
    .nav-link {
      .icon(fill; fade(@white, 41.75)); // TODO use opacity variables here
      color: fade(@white, 41.75);       // TODO use opacity variables here
      transition: @run_fast @bezier_fadein;
      &:hover {
        .icon(fill; @white);
        color: @white;
        transition: @now;
      }
    }
    .outer-head {
      .nav {
        .shadow_inset(bottom; @color_inset_black; @color_inset_white);
      }
    }
    .outer-foot {
      .nav {
        .shadow_inset(top; @color_inset_black; @color_inset_white);
      }
    }
  }
  &:not(.page-landing) {
    padding: @tile 0;
    .content {
      padding-top: 10%;
      padding-bottom: @tile;
    }
  }
  ~ .inner {
    .canvas-background {
      &:after {
        .animation(in-fade @run @run_fast @bezier_fadein backwards);
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        .gradient(to bottom; lighten(@dye_inner, 0) 25%; darken(@dye_inner, 3) 75%);
      }
    }
    .canvas-frame {
      .scale3d(.8);
      width: 125%;
      height: 125%;
      transition+: all @run_slower @bezier_deform;
      transition+: width @now @bezier_deform;
      transition+: height @now @bezier_deform;
    }
    .grid-big {
      path {
        stroke-width: 0;
      }
    }
    .grid-small {
      path {
        stroke: darken(@dye_inner, 5);
        stroke-width: 3;
        stroke-dasharray: 2 20;
      }
    }
    .layer {
      .layer-outline {
        stroke: darken(@dye_inner, 5);
        transition-duration: @run;
      }
      .text-layer,
      .edit-handle {
        fill: darken(@dye_inner, 5);
        transition-duration: @run;
      }
    }
    .layer-properties {
      display: none;
    }
    .radial-hint {
      display: none;
    }
    .chat-window {
      display: none;
    }
    .mouse-stats {
      display: none;
    }
  }
  ~ .hud {
    opacity: 0;
    transition: @now;
  }
}
.outer-head,
.outer-foot {
  position: absolute;
  left: 0;
  width: 100%;
}
.outer-head {
  top: 0;
  .nav {
    .shadow_inset(bottom; fade(@black, (100 * @opacity_white_lighter)); fade(@black, 0));
    .animation(in-fade-top @run @run_slower @bezier_deform backwards);
  }
}
.outer-foot {
  bottom: 0;
  .nav {
    .shadow_inset(top; fade(@black, 0); fade(@black, (100 * @opacity_white_lighter)));
    .google-login {display: none;}
  }
  .nav-link {
    &:last-child {
      margin-left: auto;
    }
  }
}
.content {
  .box-sizing(content-box);
  max-width: @tile_content;
  margin-left: auto;
  margin-right: auto;
  padding-left: @padding_outer;
  padding-right: @padding_outer;
}
.content-copy {
  .user-select(auto);
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav {
  .flexy(center);
  height: @tile;
  padding: 0 @menu_padding;
  transition: box-shadow @run @bezier_fadein;
  .content {
    .flex(1 1 100%);
    .flexy(center);
  }
}
.nav-link {
  .icon(fill; @gray);
  overflow: hidden;
  text-overflow: ellipsis;
  color: @gray;
  transition: @run_fast @bezier_fadein;
  &:hover {
    .icon(fill; @black);
    color: @black;
    transition: @now;
  }
  &:first-child {
    margin-right: auto;
  }
  &:not(:first-child) {
    &:not(:last-child) {
      margin: 0 @menu_padding;
    }
  }
  &:last-child {
    margin-left: @menu_padding;
  }
}
.calls-to-action {
  .flexy(wrap);<commit_msg>make new nav more responsive<commit_after>.outer {
  position: absolute;
  z-index: @zindex_landing;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
  background-color: @dye_outer;
  &:not(.entry) {
    .animate_pricing();
    .animate_early_access();
  }
  &.page-landing {
    background-color: fade(@dye_outer, 0); // VETO
    &.entry {
      .outer-head .nav,
      .our-philosphy,
      .our-proof {
        .animation-duration(@now);
        .animation-delay(@now);
      }
    }
    .nav-link {
      .icon(fill; fade(@white, 41.75)); // TODO use opacity variables here
      color: fade(@white, 41.75);       // TODO use opacity variables here
      transition: @run_fast @bezier_fadein;
      &:hover {
        .icon(fill; @white);
        color: @white;
        transition: @now;
      }
    }
    .outer-head {
      .nav {
        .shadow_inset(bottom; @color_inset_black; @color_inset_white);
      }
    }
    .outer-foot {
      .nav {
        .shadow_inset(top; @color_inset_black; @color_inset_white);
      }
    }
  }
  &:not(.page-landing) {
    padding: @tile 0;
    .content {
      padding-top: 10%;
      padding-bottom: @tile;
    }
  }
  ~ .inner {
    .canvas-background {
      &:after {
        .animation(in-fade @run @run_fast @bezier_fadein backwards);
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        .gradient(to bottom; lighten(@dye_inner, 0) 25%; darken(@dye_inner, 3) 75%);
      }
    }
    .canvas-frame {
      .scale3d(.8);
      width: 125%;
      height: 125%;
      transition+: all @run_slower @bezier_deform;
      transition+: width @now @bezier_deform;
      transition+: height @now @bezier_deform;
    }
    .grid-big {
      path {
        stroke-width: 0;
      }
    }
    .grid-small {
      path {
        stroke: darken(@dye_inner, 5);
        stroke-width: 3;
        stroke-dasharray: 2 20;
      }
    }
    .layer {
      .layer-outline {
        stroke: darken(@dye_inner, 5);
        transition-duration: @run;
      }
      .text-layer,
      .edit-handle {
        fill: darken(@dye_inner, 5);
        transition-duration: @run;
      }
    }
    .layer-properties {
      display: none;
    }
    .radial-hint {
      display: none;
    }
    .chat-window {
      display: none;
    }
    .mouse-stats {
      display: none;
    }
  }
  ~ .hud {
    opacity: 0;
    transition: @now;
  }
}
.outer-head,
.outer-foot {
  position: absolute;
  left: 0;
  width: 100%;
}
.outer-head {
  top: 0;
  .nav {
    .shadow_inset(bottom; fade(@black, (100 * @opacity_white_lighter)); fade(@black, 0));
    .animation(in-fade-top @run @run_slower @bezier_deform backwards);
  }
  .nav-link {
    &:last-child {
      .mq_640({
        display: none;
      });
    }
  }
}
.outer-foot {
  bottom: 0;
  .nav {
    .shadow_inset(top; fade(@black, 0); fade(@black, (100 * @opacity_white_lighter)));
    .google-login {display: none;}
  }
  .nav-link {
    &:last-child {
      margin-left: auto;
      .mq_640({
        display: none;
      });
    }
    &:nth-last-child(2) {
      .mq_640({
        display: none;
      });
    }
    &:nth-last-child(3) {
      .mq_640({
        margin-right: 0;
      });
    }
  }
}
.content {
  .box-sizing(content-box);
  max-width: @tile_content;
  margin-left: auto;
  margin-right: auto;
  padding-left: @padding_outer;
  padding-right: @padding_outer;
}
.content-copy {
  .user-select(auto);
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav {
  .flexy(center);
  height: @tile;
  padding: 0 @menu_padding;
  transition: box-shadow @run @bezier_fadein;
  .content {
    .flex(1 1 100%);
    .flexy(center);
  }
}
.nav-link {
  .icon(fill; @gray);
  overflow: hidden;
  text-overflow: ellipsis;
  color: @gray;
  margin: 0 @menu_padding;
  transition: @run_fast @bezier_fadein;
  .mq_640({
    margin: 0 (@menu_padding / 3);
  });
  &:hover {
    .icon(fill; @black);
    color: @black;
    transition: @now;
  }
  &:first-child {
    margin-left: 0;
    margin-right: auto;
  }
  &:last-child {
    margin-right: 0;
  }
}
.calls-to-action {
  .flexy(wrap);
{'fraction_non_alphanumeric': 0.1586198336849944, 'fraction_numerical': 0.021347896239295023, 'mean_word_length': 2.041902604756512, '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': '3422218', 'n_tokens_mistral': 3175, 'n_tokens_neox': 2978, 'n_words': 576}