gistfile1.txt

// DEBUG Styles:
#time_of_day_debug {
  position: fixed;
  padding: .25em;
  bottom: 0;
  right: 0;
  font-size: 10px;
  > a {
    display:block;
    margin: .5em .5em .5em 1.1em;
  }
  pre {
    font-family: monospace;
  }

  .day & {
    // content: "DAY TIME";
    background-color: $secondary_blue;
  }
  .night & {
    // content: "LATE NIGHT";
    background-color: $purple;
  }
}

body {
  background: $primary_red url(hex_red.png)center top;
  font-size: 24px;
  color: white;
  min-width: 1083px;
  &.night {
    background: $bg_purple;
  }
}

@mixin container {
  width: 962px;
  position: relative;
  margin: 0 auto;
}
.container {
  @include container;
}

// 
// A Tags
// 
a, a:link, a:visited {
  color: $red;
  .night & {
    // color: $purple;
    color: #816fd1;
  }
}
a:hover, a:focus {
  color: $dark_red;
  .night & {
    color: $primary_purple;
  }
}

// 
// General HR tags. Prefer to use div.hr instead of hr
// 
.hr, .hr.white {
  @extend .sprite-base;
  margin: .75em auto;
  @extend .core-sprite-hr_white;
  body.night & { opacity: .31; }
}
.hr.gray {
  @extend .core-sprite-hr_gray;
  opacity: 1;
}
.white .hr {
  @extend .hr.gray;
} 

// 
// GLOBAL HEADER
// 
#header {
  height: 128px;
  background: white; 
  position: relative;
  z-index: 10;

  hgroup {
    @include container;
    h1 {
      position: absolute;
      margin: 0;
      top: 11px;
      left: 3px;
      a {
        @include sprite-base;
        @extend .core-sprite-header_logo;
      }
    }
  }

  nav.primary {
    @include heading-font;
    display: block;
    @include container;

    ul {
      @include clearfix;
      float:right;
      margin: 0 -12px;
      height: 87px;

      > li {
        float: left;
        padding: 16px 12px 10px 12px;
        position: relative;
        height: 62px;

        &.divider {
          @include sprite-base;
          @extend .core-sprite-jack_head_trans_gray;
          margin: 26px 12px 10px 12px;
          padding: 0;
          .night & { 
            @extend .core-sprite-jack_head_gray;
          }
        }

        > a {
          display:block;
          height: 100%;
          color: $primary_red;

          > span {
            display: block;
            font-size: 24px;
            // line-height: .92em;
            line-height: 39px;
            &:first-child { 
              line-height: 20px; 
              text-indent: 2px;
              color: $light_gray;
            }
          }

          &:focus, &:hover {
            > span { color: $dark_red; }
            > span:first-child { color: $red; }
          }
        }

        &.products > a > span { font-size: 43px; }
        &.products > a > span:first-child { font-size: 22.25px; }
        &.locations > a > span { font-size: 35.66px; }
        &.locations > a > span:first-child { font-size: 24px; }
        &.sign-up > a > span { font-size: 43.12px; }
        &.sign-up > a > span:first-child { font-size: 20.3px; }

        // 
        // CURRENT PAGE
        // 
        body.products.show &.products, body.product_categories.show &.products {
          &:after {
            content: "\25B2"; // up triangle
            display:inline-block;
            width: 20px;
            height: 20px;
            position: absolute;
            bottom: -6px;
            left: 42%;
            color: #222;
            .night & { color: #666; }
          }
        } 

      }
    }
  }

  nav.social {
    @include gradient-vertical(#b2132a, #a81025);
    padding: 6px 0; 

    > .container {
      > * { float: right; }
      @include clearfix;
    }

    .location-finder {
      margin-left: 1em;
      li.current_location {
        @include heading-font;
        margin: -2px 8px 0 0;
        font-size: 10px;
        text-align: right;
        color: white;

        span.label {
          display: block;
          font-size: 14px;
          color: inherit;
        }

        label {
          color: inherit;
          display: block;
          font-size: 14px;
        }

        span {
          color: inherit;
          display: block;
          margin-top: -5px;
        }

        html.no-geolocation & {
          display: none;
        }

      }
    }

    ul {
      > li {
        float: left;
        padding: 0 3px;

        > a {
          @include sprite-base;
          height: 100%;
          display: inline-block;
        }

        &.facebook > a { @extend .core-sprite-header_facebook }
        &.twitter > a { @extend .core-sprite-header_twitter }
        &.youtube > a { @extend .core-sprite-header_youtube }
      }
    }
  }

  nav {
    ul, ul > li, ul > li > a { display: block; }
  }

  body.night & {
    // background-color: black;
    @include gradient-vertical(black, #262626);

    hgroup h1 {
      top: 2px;
      a {
        @extend .latenight_core-sprite-header_logo;
      }
    }


    nav.primary {
      ul > li > a {
        span { color: white; }

        // span:first-child { color: white; }

        &:hover, &:focus {
          &, span {
            color: #C8B6FE;
          }
        }
      }
    }

    nav.social {
      @include gradient-vertical(#564585, #483970);
    }

  }
}

// 
// STICKY NAVIGATION
// 
#sticky_header {
  background: #b21228;
  border-bottom: 4px solid #fff;
  height: 61px;
  left: 0;
  position: fixed;
  top: -75px; // Height plus border plus shadow
  width: 100%;
  z-index: 99;
  @include transition-property(top);
  @include transition-duration(.375s);

  &.active {
    top: 0;
  }

  html.night & {
    @include gradient-vertical(#333, #000);
    border-bottom: 4px solid #7373a9;
  }

  h2 {
    height: 46px;
    float: left;
    margin-left: -3px;
    margin-top: 7px;
    width: 165px;

    a {
      @extend .sprite-base;
      background: url(desktop/header_sticky_logo.png) center center no-repeat;
      height: 100%;
      width: 100%;

      html.night & {
        background: url(desktop/latenight/header_sticky_logo.png) center center no-repeat;
      }
    }
  }

  nav {
    @include heading-font;
    float: left;
    margin-left: 104px;
    margin-top: 14px;

    ul {
      @include clearfix;

      > li {
        float: left;
        margin-top: 5px;
        padding: 0;
        position: relative;
        height: 35px;

        &.divider {
          @extend .sprite-base;
          background: url(desktop/header_sticky_divider.png) center center no-repeat;
          height: 23px;
          margin: 6px 23px 0;
          padding: 0;
          width: 17px;

          .night & {
            background: url(desktop/latenight/header_sticky_divider.png) center center no-repeat;
          }
        }

        > a {
          display:block;
          height: 100%;
          color: $white;
          margin-top: 0px;
          padding-bottom: 0px;

          > span {
            display: block;
            font-size: 24px;
            line-height: 39px;
            &:first-child {
              line-height: 0;
              text-indent: 2px;
            }
          }

          &:hover, &:focus {
            opacity: .9;

            html.night & .glow {
              color: #c8b6fe;
            }
          }
        }

        &.products > a > span { font-size: 29.04px; }
        &.products > a > span:first-child { font-size: 14.56px; }
        &.locations > a > span { font-size: 24.59px; }
        &.locations > a > span:first-child { font-size: 16.55px; }
        &.sign-up > a > span { font-size: 29.63px; }
        &.sign-up > a > span:first-child { font-size: 13.59px; }
      }
    }
  }

  .location-finder {
    float: right;
    margin-top: 15px;

    // form {
    //   @include reset-form;

    //   fieldset {
    //     @include heading-font;
    //     font-size: 14px;

    //     ol.inputs {

    //       li.input {
    //         background: none;
    //         clear: none;
    //         float: left;
    //         padding: 0;

    //         label {
    //           display: none;
    //         }

    //         &.zipcode > input {
    //           // height: 31px;
    //           // width: 86px;
    //           @include mini-text-input(86px);
    //           border-bottom-left-radius: 2px;
    //           border-top-left-radius: 2px;
    //           text-align: center;
    //           text-transform: uppercase;
    //         }

    //         &.submit > button {
    //           @extend .sprite-base;
    //           height: 31px;
    //           width: 32px;
    //           margin: 0;
    //           border: 0;
    //           border-bottom-right-radius: 2px;
    //           border-top-right-radius: 2px;
    //           background: #333 url(desktop/sprites/core/locator_pin.png) 7px 7px no-repeat;

    //           html.night & {
    //             background: #606087 url(desktop/sprites/core/locator_pin.png) 7px 7px no-repeat;
    //           }
    //         }
    //       }
    //     }
    //   }
    // }
  }
}

// Zip code search in headers and sidebars
header, aside {
  .location-finder form {
    @include reset-form;
    @include heading-font;
    font-size: 14px;

    .input {
      background: none;
      clear: none;
      float: left;
      padding: 0;

      label {
        display: none;
      }
    }

    .input.zipcode > input {
      text-align: center;
      text-transform: uppercase;
      @include mini-text-input(86px);
    }

    .input.submit > button {
      height: 27px;
      width: 32px;
      margin: 0;
      border: 0;
      border-bottom-right-radius: 2px;
      border-top-right-radius: 2px;
      // background: #333 url(desktop/sprites/core/locator_pin.png) 7px 5px no-repeat;
      // background-color: #333;
      // text-indent: -9999px;
      @include sprite-base;

      &:before {
        @include sprite-base;
        content: "";
        @extend .core-sprite-locator_pin;
        // margin: 5px 6px;
        position: absolute;
        top: 5px;
        left: 6px;
      }
    }

  }
}

// Subnavs
aside.subnav {
  position: relative;
  z-index: 10;

  @include gradient-vertical(#313131, #020202);

  a, a:link, a:visited { color: white; }
  a:hover, a:focus { opacity: .8; }
  a.current, .current a { color: #ffea00; }
  @include heading-font;
  font-size: 14px;
  border-bottom: 1px solid rgba(#999, .5); 

  .night & {
    background: #666666;
    border-bottom-color: rgba(black, .25);
    a.current, .current a { color: #c8b6fe; }
  }

  nav { 
    @include container; 
  }

  li {
    display:inline-block; 
    line-height: 3em;
    // margin: 0 1em;
    a {
      margin: 0 .5em;
    }
    &:after {
      content: "|";
      display:inline;
      @include light-font;
      color: #666;
    }

    &:first-child {
      a { margin-left: 0; }
    }

    &:last-child {
      &:after { display:none; }
      a { margin-right: 0; }
    }
  }

  ul, ol { 
    white-space:nowrap;
    text-align: center;
    display:block;
  }
}

// 
// GLOBAL FOOTER
// 
#footer {
  @include gradient-vertical(#313131, #2e2e2e);
  border-top: 1px solid #494949;
  padding-bottom: 100px;
  padding-top: 5px;
  &, a, a:link, a:visited { color: white; }
  font-size: 14px;
  text-transform: uppercase;
  // overflow: hidden;
  position: relative;
  width: 100%;

  a, a:link, a:visited {
    color: white;
  }
  a:hover, a:focus {
    color: #ccc;
  }

  nav ul, nav li { display:inline; }

  nav.secondary {
    float:left; 
    padding: 1em 0;
    line-height: 45px;

    a {
      float:left;
      margin-right: 1em;
    }

    ul { @include clearfix; }

    li {
      float:left;
      display:block;

      &:after {
        content: "•";
        float:left;
        color: #ccc;
        font-size: 90%;
        padding-bottom: 5px;
        display:inline-block;
        margin: -2px 10px 0 -5px;
      }
      &:last-child:after { display:none; }
    }

    .home {
      display:block;
      float:left;
      a {
        @extend .sprite-base;
        @extend .core-sprite-footer_logo;
        body.night & { 
          @extend .latenight_core-sprite-footer_logo; 
          margin-top: -3px;
        }
      }
      &:after { display:none; }
      + li:before {
        content: "|";
        float:left;
        color: #666;
        font-size: 90%;
        padding-bottom: 5px;
        display:inline-block;
        margin: -2px 10px 0 -5px;
      }
    }
    @include heading-font;
  }  

  nav.social {
    float:right;
    padding: 1em 0;

    a {
      @extend .sprite-base;
      float:left;
      margin-left: 1em;
    }
    .facebook a {
      @extend .core-sprite-footer_facebook;
    }
    .twitter a {
      @extend .core-sprite-footer_twitter;
    }
    .youtube a {
      @extend .core-sprite-footer_youtube;
    }
  }

  nav.legal {
    max-width: 100%;
    // display:inline-block;
    clear:both;
    @extend .core-sprite-legal_bg;
    padding: 8px 0;
    margin: 0 auto;
    // margin: 0 -134px;
    line-height: 32px;
    font-size: 11px;
    .copyright { display:inline; }
    ul {
      float:right;
    }

    li:after {
      content: "|";
      color: #666;
      font-size: 90%;
      line-height: 70%;
      padding-bottom: 5px;
      display:inline-block;
      margin: 0 4px 0 6px;
    }
    li:last-child:after {
      display:none;
    }
  }

  body.night & {
    margin-top: 92px;
    &:before {
      content: "";
      display:block;
      position: absolute;
      width: 100%;
      height: 92px;
      background: url(desktop/latenight/footer_illustrations.png) repeat-x center top;
      top: -93px;
      left: 0;
    }

    nav.secondary .home {
    }
  }
}

.quick_signup { 

  > .container {
    > header { display:none; }
    position:relative;
  }

  section {
    width: 425px;
    margin: 0;
    > header > h3 > span:first-child { 
      font-size:41px; 
      text-align: center;
      display:block;
    }
    > header > h3 > span:last-child {
      line-height: 138px;
    }
  }
  form {
    label {
      display:none;
    }

    .button { 
      @include inline-button;
      padding: 0;
      width: 146px;
      margin: 0;
      display:block;
      float:right;
    }

    input[type=email],
    input[type=text],
    input[type=tel] {
      float:left;
      // will set the height and top/bottom border of the input
      @include oversized-text-input(false);
      // will set the width and left/right border of the input
      @include input-width(279px, false);
    } 

    @include clearfix;
  }

  section.mobile {
  }
  section.email {
    float:right;
  }
  .divider {
    position: absolute;
    z-index: 0;
    @include heading-font;
    @include heading-text-shadow;
    font-size: 36px;
    width: 100%;
    text-align: center;
    top: 108px;
  }

  // The top margin
  // margin-top: 4em;
  &.pushed .container {
    margin-top: 50px;
    .divider { top: 164px; }
  }
}

@include quick_signup_on_transparent;

body.product_categories, body.locations, body.legal, body.commercials {
  .night & {
    @include quick_signup_on_black;
  }
}
.night body.products {
  @include quick_signup_on_black;
}



// 
// CONTENT SECTION
// 
#main {
  // Will need to rethink how to accomplish the below, major performance killer (chrome/ff)

  // Red gradient coming up from the bottom of the page
  // background: -moz-linear-gradient(bottom, $red 25%, rgba($red, 0) 50%); /* FF3.6+ */
  // background: -webkit-gradient(linear, left bottom, left top, color-stop( 25%,$red), color-stop(50%,rgba($red, 0))); /* Chrome,Safari4+ */
  // background: -webkit-linear-gradient(bottom, $red 25%, rgba($red, 0) 50%); /* Chrome10+,Safari5.1+ */
  // background: linear-gradient(bottom, $red 25%, rgba($red, 0) 50%); // Standard, IE10

  //@include box-shadow(inset 0 0 500px rgba(black, .5));


  body.night & {
    background: transparent;
  }
}
section.white, article.white { width: auto; }
section { @include container; }
section, article { padding: 1em 0; }

// 
// WHITE BOX
// 
.box { @include whitebox; }
.white {
  .box {
    background: transparent;
    @include box-shadow(none);
    &:after { display:none; } // Removes the .box bottom shadow
  }
} 
.white.hex { @include white-hex-top; }



// 
// Section Box Shadows
// 
#header { @include box-shadow(0 4px 10px rgba(0,0,0,.3)); }
.ie8 #header { -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=8, Direction=180, Color='#aaaaaa')"; }
#sticky_header { @include box-shadow(0 4px 10px rgba(0,0,0,.4)); }
.ie8 #sticky_header { -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=8, Direction=180, Color='#aaaaaa')"; }
.white { @include box-shadow(0 3px 12px rgba(black, .35)); }
.ie8.day .white { -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=10, Direction=180, Color='#8e082c')"; }

// 
// GRIDS
// 
// .grid-2, .grid-3, .grid-4, .grid-5 {
*[class*=grid-] {
  position: relative;
  width: 100%;
  
  @include clearfix;
  > * { 
    float:left;
    margin-bottom: 0;
    &.last { margin-right: 0; }
  }
}
.grid-2 > * {
  width: 49%;
  margin-right: 2%;
  &:nth-child(2n+0), &:last-child { margin-right: 0; }
}
.grid-3 > * {
  width: 32%;
  margin-right: 2%;
  &:nth-child(3n+0), &:last-child { margin-right: 0; }
}
.grid-4 > * {
  width: 23.5%;
  margin-right: 2%;
  &:nth-child(4n+0), &:last-child { margin-right: 0; }
}
.grid-5 > * {
  width: 18.4%;
  margin-right: 2%;
  &:nth-child(5n+0), &:last-child { margin-right: 0; }
}

.ie8 *[class*=grid-] { margin-right: -500px; }

// Automatically apply product-grid to .products and .products_categories lists.
.products, .product_categories, .food, .menu {
  &[class*=grid-] {
    @include product-grid;
  }
}

// 
// Standard CAROUSELS
// 
.carousel {
}
a.carousel-control {
  @extend .sprite-base;
  border: none;
  top: 50%;
  opacity: .8;
  z-index: 6;

  &:hover, &:focus { opacity: 1; }
}
a.carousel-control.left {
  @extend .core-sprite-arrow_left_white;
  margin-right: 496px;
  right: 50%;
  left: auto;
}
a.carousel-control.right {
  @extend .core-sprite-arrow_right_white;
  margin-left: 496px;
  left: 50%;
  right: auto;
}



// 
// THE ZIPPER
// 
#zipper {
  height: 201px;
  background-image: url(desktop/fpo/zipper_daytime.png);
  background-position: center center;
  background-repeat: no-repeat;
  .night & { background-image: url(desktop/fpo/zipper_latenight.png); }
  display:block;
  // margin-top: -100px;
  margin-bottom: -100px;
  position: relative;
  z-index: 10;
  & + .quick_signup {
    margin-top: 0;
  }
}