html
  head
    meta(charset='utf-8')
    link(rel='stylesheet', media='all', href='https://fonts.googleapis.com/css?family=Istok+Web:400,700')
  body
    .wrap
      a(class='close')
        .stick-wrap
          .stick
          .stick
          .stick
        .title
          p close


      a(class='back')
        .stick-wrap
          .stick
          .stick
          .stick
        .title
          p back


      a(class='return')
        .stick-wrap
          .stick
          .stick
          .stick
        .title
          p return

$edge: 2px
$speed: all 275ms ease
$degree-45: 45deg
$degree-90: 90deg
$slate: #232322
$yellow: #f8f687
$blue:   #bbf3ff
$paper:   #ffeefa
$ink:     blue
$bg:      #ccc

body
  user-select: none
  font-family: 'Istok Web',sans-serif
  color: $slate
  background: $bg

.wrap
  width: 650px
  margin: 45px auto
  a
    padding: 70px
    background: $yellow
    border-radius: 6px
    display: flex
    transition: $speed
    margin: 0 40px
    & + a
      margin-top: 35px
    &:hover,
    &.dim
      cursor: pointer
      background: $blue
    .stick-wrap
      flex-grow: 1
      padding: 10px 0 0 0
      .stick
        width: 82px
        height: 14px
        background: $slate
        border-radius: $edge
        margin-top: 10px
        transition: $speed
        // this apparently helps webkit/mobile performance
        backface-visibility: hidden
        -webkit-perspective: 800
        -webkit-transform-style: preserve-3d
        transform: translateZ(0)
      .stick:first-child
        margin-top: 0
    .title
      flex-grow: 8
      text-align: center
      p
        text-transform: uppercase
        font-weight: 700
        font-size: 60px
        overflow: hidden
        margin: 0 0 -6px 0
        padding: 0

    &.return.active
      .stick-wrap
        .stick
        .stick:first-child
          transform: rotate(-$degree-45)
          border-radius: $edge 0 0 $edge
          margin-bottom: 0.9em
          margin-left: 0.2em
          width: 50px
        .stick:nth-child(2)
          transform: rotate(-$degree-90)
        .stick:nth-child(3)
          margin-left: 1.8em
          margin-top: -2.65em
          width: 50px
          transform: rotate(-135deg)
          border-radius: $edge $edge 0 $edge

    &.back.active
      .stick-wrap
        .stick:first-child
          transform: rotate(-$degree-45)
          border-radius: 0 $edge $edge $edge
        .stick:nth-child(2)
          opacity: 0
        .stick:nth-child(3)
          transform: rotate($degree-45)
          border-radius: $edge $edge 0 $edge

    &.close.active
      .stick-wrap
        .stick:first-child
          margin-top: 22px
          transform: rotate(-$degree-45)
        .stick:nth-child(2)
          opacity: 0
        .stick:nth-child(3)
          transform: rotate($degree-45)
          margin-top: -35px
          margin-bottom: 4px

$("a").click(function() {
  $(this).toggleClass("active")
});