@import "compass"
@import "blueprint"

$primary-color: #440070
$secondary-color: #c900d6

@import "./mobile"

+global-reset

=prevent-selection
  -webkit-touch-callout: none
  -webkit-user-select: none
  -khtml-user-select: none
  -moz-user-select: none
  -ms-user-select: none
  user-select: none

html
  +blueprint-typography

  -webkit-background-clip: padding-box

  text-rendering: optimizeLegibility
  -webkit-font-feature-settings: "kern" 1, "kern"
  font-feature-settings: "kern" 1, "kern"
  -webkit-font-kerning: normal
  font-kerning: normal
  -webkit-font-smoothing: antialiased
  letter-spacing: .02em

  ::selection, ::-moz-selection
    +text-shadow(0 1px 1px #fff)
    background: opacify(#ddd, 0.9)
    color: #222

  body
    background: #fff
    h1, h2, input
      font-family: "Avenir", "Helvetica", sans-serif

    a:link, a:visited
      color: $primary-color
      text-decoration: none

    a:hover
      text-decoration: underline

    a:active
      color: $secondary-color

    header[role="banner"]
      +clearfix
      -webkit-text-stroke: 1px transparent
      background-color: $primary-color
      +background-image(url("/images/bg.png"), linear-gradient(top, rgb(93, 0, 133), rgb(43, 0, 91)))
      +box-shadow(darken($primary-color, 10%) 0px -1px 10px inset)

      margin-bottom: 3em

      hgroup
        margin: 5em auto 0 auto
        padding: 1em 0 0 0
        text-align: center

        h1
          color: #fff
          font-size: 3em

        h2
          color: $secondary-color
          font-size: 1.5em
          margin: 0 auto

        h1, h2
          +text-shadow(0 -1px 1px darken($primary-color, 10%))

    hgroup + #search
      margin: 3em 0

      input[type="search"]
        font-size: 3em
        margin: 0 auto
        color: #333
        width: 80%
        display: block

      label
        +text-shadow(0 -1px 1px darken($primary-color, 10%))
        font-size: 1.25em
        text-align: left
        color: #bbb
        display: block
        margin: 1em auto
        width: 80%
        opacity: 40%

        a
          color: #ddd
          text-decoration: underline

    #logo
      +column(6)

      +prevent-selection

      a
        font-family: "Avenir", "Lucida Sans", "Helvetica", sans-serif
        font-size: 2em
        text-decoration: none
        color: #fff
        display: block

    #logo + #search

      +column(8)
      float: right

      input
        font-size: 1.25em
        width: 100%
        margin-top: 5px

hr
  margin-bottom: 3em
  border: none
  height: 1px
  background: #555

[role="container"]
  +container
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)

.conference
  clear: both
  width: 100%
  margin-bottom: 3em

  header
    +clearfix
    padding: 3em 0 5em 0

    img
      float: left

    hgroup
      +column(18)
      +prepend(1)
      margin-top: 1.5em

      h1
        font-weight: bold
        margin-bottom: 0.1em

      h2
        color: #777
        font-style: italic

input[type="search"]
  +border-radius(10px)
  -webkit-appearance: caret
  padding: 0.25em

input[type="search"]::-webkit-search-cancel-button
  display: none

.group
  +column(8)

  &:nth-of-type(3n)
    +column(8, true)

  .track
    h1
      font-size: 2em
      margin-bottom: 1em

    dl
      +clearfix
      padding-bottom: 1em

      dt, dd
        display: block
        float: left

      dt
        clear: left

      dd
        clear: right
        max-width: +span(6)

article
  header
    margin-bottom: 4em

    h1
      a
        font-family: sans-serif
        text-decoration: none
        float: right

    h2
      +clearfix
      font-size: 1.5em
      color: #555
      display: block
      clear: both

      *
        display: block

      border-top: 1px #555 solid
      border-bottom: 1px #555 solid
      padding: 0.25em 0
      margin: 1em 0

      .session
        float: left

      .year
        float: right

    h3
      font-size: 1.25em
      color: #777
      line-height: 1.5em
  p
    font-size: 1.25em

    &.annotation
      font-style: italic
      color: #777

#search-results
  dl
    padding: 1em 0

    .details
      display: block
      color: #777
      font-size: 0.75em
      font-weight: 400

    .year:after
      content: " • "

  dt
    font-size: 2em
    a
      text-decoration: none
      font-weight: 400

  .excerpt
    font-size: 1.5em
    b
      font-weight: 700

    &:after
      content: "…"

.contribute
  font-size: 150%
  margin: 0 auto
  width: 80%

  h1, h2
    text-align: center

  h1
    line-height: 1.25

  a
    text-decoration: underline !important

a.call-to-action
  +border-radius(10px)
  +background-image(url("/images/bg.png"), linear-gradient(top, rgb(93, 0, 133), rgb(43, 0, 91)))
  color: #fff !important
  width: +span(7)

  display: block
  font-size: 1.25em
  text-decoration: none !important
  +text-shadow(0px 1px 3px darken($primary-color, 20%))
  text-align: center
  padding: 1em
  border: 2px $secondary-color solid

  &:hover
    text-decoration: none
    +background-image(url("/images/bg.png"), linear-gradient(bottom, rgb(93, 0, 133), rgb(43, 0, 91)))

.conference a.call-to-action
  margin-left: +span(16)
  margin-top: 2em
  position: absolute

.contribute a.call-to-action
  margin: 1em auto
  font-size: 90%

footer
  border-top: 1px #ddd solid
  padding-top: 3em
  margin-top: 3em

  div
    margin-bottom: 1em

  a
    text-decoration: underline !important

  .nshipster
    margin: 0 0 -4px -2px

  #about
    +column(6)
    +append(2)

  #colophon
    +column(16, true)

  #copyright
    clear: left
