<commit_before>.hero
  width: 100%
  height: 375px
  position: relative
  text-align: center
  color: white
  background: $lpblue
  background-position: 50% 50% 
  background-repeat: no-repeat
  background-size: cover
  .enhanced &, .ie9 &
    +responsive-image('homepage/hero/alps', 'jpg')
  .ie7 &, .ie8 &
    background-image: url(#{image_path('homepage/hero/alps_1671.jpg')})
  .slothified &
    background-image: url(#{image_path('homepage/rainforest.jpg')})

  +respond-to(medium-view)
    height: 640px
  +respond-to(1250)
    height: 800px

.hero__mask
  display: inline-block
  height: inherit
  overflow: hidden
  position: relative
  width: 100%
  +respond-to(wide-view)
    top: -60px // Move the mask behind the nav which is now transparent
  &.is-focused
    .icon--search-glass--grey
      opacity: 1
    .hero__overlay
      background: rgba(0,0,0,0.5)
    .hero__search
      width: 90%

.hero__search
  @extend %inline-block
  +transition(all, .3, $ease-cubic-out)
  overflow: hidden
  text-align: left
  width: 85%
  +respond-to(medium-view)
    width: 70%
  .slothified &
    position: relative
    overflow: visible
    &:after
      @extend %empty-abs-generated-content
      background-image: url("#{image_path('homepage/sloth.png')}")
      background-repeat: no-repeat
      width: 100%
      height: 270px
      z-index: 5
      top: -23px
      right: -40px
      pointer-events: none

.hero__overlay
  +transition(all, .3, $ease-cubic-out)
  position: absolute
  top: 0
  background-color: rgba(0,0,0,0.2)
  width: 100%
  height: inherit

.hero__panel
  +transition(all, .4, $ease-cubic-out)
  +hardware-acceleration()
  position: absolute
  width: 100%
  height: inherit
  .ie7 &
    position: static

.hero__inner
  height: 260px
  text-align: center
  max-width: 500px
  padding-top: 120px
  margin: 0 auto
  +respond-to(400)
    padding-top: 120px
  +respond-to(medium-view)
    padding-top: 250px
  .ie7 &
    width: 500px
    zoom: 1
  +respond-to(1250)
    padding-top: 320px

.hero__logo
  margin-bottom: 50px

.hero__strapline
  +font-size(40)
  width: 90%
  margin: 0 auto 20px
  +respond-to(medium-view)
    +font-size(46)
  +respond-to(wide-view)
    +font-size(52)

.speech-bubble
  @extend %four-pixel-rounded
  &:after
    @extend %empty-abs-generated-content
    top: 100%
    left: 12px
    +respond-to(medium-view)
      left: 34%
    +respond-to(1250)
      left: 72%

.speech-bubble--scroll
  overflow-y: scroll
  -webkit-overflow-scrolling: touch
  height: 105px
  padding: 15px
  +respond-to(medium-view)
    padding: 0
    height: auto
    overflow: visible

.hero__author
  +transition(all, .3, ease-out)
  position: absolute
  bottom: 20px
  left: 20px
  min-width: 180px
  z-index: 2
  .hero-search-results-displayed &
    +transform(translateY(100px))

  +respond-to(medium-view)
    left: auto
    right: 20px
    bottom: 20px

  +respond-to(wide-view)
    .hero-search-results-displayed &
      +transform(none)

  +respond-to(1250)
    left: auto
    right: 30px
    bottom: 30px

.hero__author__text
  +font-size(12)
  font-weight: bold
  color: white
  letter-spacing: 0
  display: block
  margin: 0 5px 5px 0
  +respond-to(1250)
    display: inline-block

.hero__author__heading
  +font-size(17)
  font-weight: bold
  color: white

.hero__author__image
  cursor: pointer
  display: inline-block
  > img
    +border-radius(100)
    width: 50px
    height: 50px
    +respond-to(1250)
      width: 75px
      height: 75px

.hero__author__details
  display: inline-block
  vertical-align: top
  text-align: left
  margin-left: 10px
  margin-top: 5px
  +respond-to(1250)
    display: block
    text-align: center
    
.hero__author__story--buttons
  padding: 15px
  +respond-to(medium-view)
    padding: 0

.hero__author__story
  position: absolute
  text-align: left
  bottom: 90px
  padding: 0
  left: auto
  margin: 0 20px
  
  +respond-to(medium-view)
    padding: 30px
    bottom: 90px
    left: auto
    right: 20px
    width: 270px
    margin: 0
  
  +respond-to(1250)
    padding: 30px
    bottom: 180px
    left: auto
    right: 40px
    width: 270px
    margin: 0
    
  .btn--function
    +font-size(14)
    padding: 12px 15px 12px 30px
    margin-right: 10px
    font-weight: bold
    background-position: 10px center
    +respond-to(medium-view)
      padding: 12px 18px 12px 38px
      background-position: 18px center
  .btn--close
    +font-size(14)
    font-weight: bold
    padding: 12px 15px 12px 30px
    background-position: 10px center
    +respond-to(medium-view)
      padding: 12px 18px 12px 38px
      background-position: 18px center

@if $is-ie == false
  .feature:first-letter
    float: left
    font-size: 50px
    line-height: 40px
    padding-top: 6px
    padding-right: 6px
    font-family: Georgia
    color: $header-blue

.hero--story__text
  margin-bottom: 20px

.hero__panel--story
  top: 100%
  

// Toggle between the search and photo story panels
#hero-swipe:checked
  & ~ .hero__panel--search
    opacity: 0
  & ~ .hero__panel--story
    top: 0
  & ~ .hero__overlay
    background-color: rgba(0,0,0,0)



// hero autocomplete


.hero__search__wrapper
  position: relative

  .autocomplete__active
    .autocomplete__result
      text-decoration: underline
      background: transparent

  .autocomplete__results
    margin: 10px 0
    position: static
    border: 0
    background: transparent
    box-shadow: none

    .hero-search-results-hidden &
      display: none

  .autocomplete__result
    @extend %left-icon
    color: #fff
    padding-left: 45px
    &:hover
      text-decoration: underline
      background: transparent
    &:before
      content: ""
      top: 0
      background-size: 100%
      width: 25px
      height: 100%
      background-position: center
      margin-left: 8px

.hero__search__input
  +font-size(24)
  color: $body-copy
  height: 45px
  padding: 0 50px 0 10px
  width: 100%

// hero search submit buttons
.hero__search__submit--field
  background: transparent
  border: 0
  cursor: pointer
  height: 46px
  position: absolute
  right: 0
  top: 0
  width: 45px

.hero__search__submit--results
  @extend %base-button
  @extend %larger-type
  background: $linkblue
  border: none
  color: #fff
  display: none
  padding: 15px

  +respond-to(wide-view)
    .hero-search-results-displayed &
      display: block
<commit_msg>Update easter egg<commit_after>.hero
  width: 100%
  height: 375px
  position: relative
  text-align: center
  color: white
  background: $lpblue
  background-position: 50% 50% 
  background-repeat: no-repeat
  background-size: cover
  .enhanced &, .ie9 &
    +responsive-image('homepage/hero/alps', 'jpg')
  .ie7 &, .ie8 &
    background-image: url(#{image_path('homepage/hero/alps_1671.jpg')})
  .slothified &
    background-image: url(#{image_path('homepage/rainforest.jpg')})
    &:after
      @extend %empty-abs-generated-content
      background-image: url("#{image_path('homepage/sloth.png')}")
      background-repeat: no-repeat
      width: 100%
      height: 270px
      z-index: 5
      top: -68px
      left: 70%
      pointer-events: none

  +respond-to(medium-view)
    height: 640px
  +respond-to(1250)
    height: 800px

.hero__mask
  display: inline-block
  height: inherit
  overflow: hidden
  position: relative
  width: 100%
  +respond-to(wide-view)
    top: -60px // Move the mask behind the nav which is now transparent
  &.is-focused
    .icon--search-glass--grey
      opacity: 1
    .hero__overlay
      background: rgba(0,0,0,0.5)
    .hero__search
      width: 90%

.hero__search
  @extend %inline-block
  +transition(all, .3, $ease-cubic-out)
  overflow: hidden
  text-align: left
  width: 85%
  +respond-to(medium-view)
    width: 70%
  .slothified &
    position: relative
    overflow: visible
    &:after
      @extend %empty-abs-generated-content
      background-image: url("#{image_path('homepage/sloth2.png')}")
      background-repeat: no-repeat
      width: 100%
      height: 270px
      z-index: 5
      top: -182px
      right: -30px
      pointer-events: none

.hero__overlay
  +transition(all, .3, $ease-cubic-out)
  position: absolute
  top: 0
  background-color: rgba(0,0,0,0.2)
  width: 100%
  height: inherit

.hero__panel
  +transition(all, .4, $ease-cubic-out)
  +hardware-acceleration()
  position: absolute
  width: 100%
  height: inherit
  .ie7 &
    position: static

.hero__inner
  height: 260px
  text-align: center
  max-width: 500px
  padding-top: 120px
  margin: 0 auto
  +respond-to(400)
    padding-top: 120px
  +respond-to(medium-view)
    padding-top: 250px
  .ie7 &
    width: 500px
    zoom: 1
  +respond-to(1250)
    padding-top: 320px

.hero__logo
  margin-bottom: 50px

.hero__strapline
  +font-size(40)
  width: 90%
  margin: 0 auto 20px
  +respond-to(medium-view)
    +font-size(46)
  +respond-to(wide-view)
    +font-size(52)
  .slothified &
    position: relative
    z-index: 10

.speech-bubble
  @extend %four-pixel-rounded
  &:after
    @extend %empty-abs-generated-content
    top: 100%
    left: 12px
    +respond-to(medium-view)
      left: 34%
    +respond-to(1250)
      left: 72%

.speech-bubble--scroll
  overflow-y: scroll
  -webkit-overflow-scrolling: touch
  height: 105px
  padding: 15px
  +respond-to(medium-view)
    padding: 0
    height: auto
    overflow: visible

.hero__author
  +transition(all, .3, ease-out)
  position: absolute
  bottom: 20px
  left: 20px
  min-width: 180px
  z-index: 2
  .hero-search-results-displayed &
    +transform(translateY(100px))

  +respond-to(medium-view)
    left: auto
    right: 20px
    bottom: 20px

  +respond-to(wide-view)
    .hero-search-results-displayed &
      +transform(none)

  +respond-to(1250)
    left: auto
    right: 30px
    bottom: 30px

.hero__author__text
  +font-size(12)
  font-weight: bold
  color: white
  letter-spacing: 0
  display: block
  margin: 0 5px 5px 0
  +respond-to(1250)
    display: inline-block

.hero__author__heading
  +font-size(17)
  font-weight: bold
  color: white

.hero__author__image
  cursor: pointer
  display: inline-block
  > img
    +border-radius(100)
    width: 50px
    height: 50px
    +respond-to(1250)
      width: 75px
      height: 75px

.hero__author__details
  display: inline-block
  vertical-align: top
  text-align: left
  margin-left: 10px
  margin-top: 5px
  +respond-to(1250)
    display: block
    text-align: center
    
.hero__author__story--buttons
  padding: 15px
  +respond-to(medium-view)
    padding: 0

.hero__author__story
  position: absolute
  text-align: left
  bottom: 90px
  padding: 0
  left: auto
  margin: 0 20px
  
  +respond-to(medium-view)
    padding: 30px
    bottom: 90px
    left: auto
    right: 20px
    width: 270px
    margin: 0
  
  +respond-to(1250)
    padding: 30px
    bottom: 180px
    left: auto
    right: 40px
    width: 270px
    margin: 0
    
  .btn--function
    +font-size(14)
    padding: 12px 15px 12px 30px
    margin-right: 10px
    font-weight: bold
    background-position: 10px center
    +respond-to(medium-view)
      padding: 12px 18px 12px 38px
      background-position: 18px center
  .btn--close
    +font-size(14)
    font-weight: bold
    padding: 12px 15px 12px 30px
    background-position: 10px center
    +respond-to(medium-view)
      padding: 12px 18px 12px 38px
      background-position: 18px center

@if $is-ie == false
  .feature:first-letter
    float: left
    font-size: 50px
    line-height: 40px
    padding-top: 6px
    padding-right: 6px
    font-family: Georgia
    color: $header-blue

.hero--story__text
  margin-bottom: 20px

.hero__panel--story
  top: 100%
  

// Toggle between the search and photo story panels
#hero-swipe:checked
  & ~ .hero__panel--search
    opacity: 0
  & ~ .hero__panel--story
    top: 0
  & ~ .hero__overlay
    background-color: rgba(0,0,0,0)



// hero autocomplete


.hero__search__wrapper
  position: relative

  .autocomplete__active
    .autocomplete__result
      text-decoration: underline
      background: transparent

  .autocomplete__results
    margin: 10px 0
    position: static
    border: 0
    background: transparent
    box-shadow: none

    .hero-search-results-hidden &
      display: none

  .autocomplete__result
    @extend %left-icon
    color: #fff
    padding-left: 45px
    &:hover
      text-decoration: underline
      background: transparent
    &:before
      content: ""
      top: 0
      background-size: 100%
      width: 25px
      height: 100%
      background-position: center
      margin-left: 8px

.hero__search__input
  +font-size(24)
  color: $body-copy
  height: 45px
  padding: 0 50px 0 10px
  width: 100%

// hero search submit buttons
.hero__search__submit--field
  background: transparent
  border: 0
  cursor: pointer
  height: 46px
  position: absolute
  right: 0
  top: 0
  width: 45px

.hero__search__submit--results
  @extend %base-button
  @extend %larger-type
  background: $linkblue
  border: none
  color: #fff
  display: none
  padding: 15px

  +respond-to(wide-view)
    .hero-search-results-displayed &
      display: block

{'fraction_non_alphanumeric': 0.11003757380568975, 'fraction_numerical': 0.05145310942412391, 'mean_word_length': 2.7082740972419677, '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': '2356045', 'n_tokens_mistral': 5228, 'n_tokens_neox': 4595, 'n_words': 1100}