style.scss

$headline: proxima-nova-extra-condensed, sans-serif;
$sans: proxima-nova, Helvetica Neue, Arial, Helvetica, sans-serif;
$serif: freight-text-pro, Georgia, serif;

$purple: #5D3EA4;

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

////////////////////////////////////////////
//
// Normalize.css
// v3.0.2 | MIT License | git.io/normalize
//
////////////////////////////////////////////

html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}


////////////////////////////////////////////
//
// Layout
//
////////////////////////////////////////////

  body {
    
  }

  .hgroup {
    color: #FFF;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .1);
    position: relative;
    overflow: hidden;
    margin: 0 !important;
    height: 800px !important;
    height: 100vh !important;
  }
  .himage {
    background: url(./assets/bg.jpg) center center no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 800px !important;
    height: 105vh !important;
  }
  .hgradient {
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(46, 160, 218, .7)), to(rgba(108, 39, 195, .7)));
    background-image: -webkit-linear-gradient(left top, rgba(46, 160, 218, .7), rgba(108, 39, 195, .7));
    background-image:    -moz-linear-gradient(left top, rgba(46, 160, 218, .7), rgba(108, 39, 195, .7));
    background-image:         linear-gradient(left top, rgba(46, 160, 218, .7), rgba(108, 39, 195, .7));
    height: 800px;
    height: 100vh;
    position: relative;
  }
  .bracket {
    width: 200px;
    height: 200px;
    position: absolute;

    &.top {
      top: 20px;
      left: 20px;
      border-top: 5px solid #FFF;
      border-left: 5px solid #FFF;
    }
    &.bottom {
      bottom: 20px;
      right: 20px;
      border-bottom: 5px solid #FFF;
      border-right: 5px solid #FFF;
    }
  }

  .caption {
    padding: 15px 20px;
    border-bottom: 1px solid #DDD;
    font: 400 12px $sans;
    margin: 0 0 50px;
    color: #777;
  }
  .arrow {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid $purple;
    margin: 0 8px 1px 0;
  }

  .hand {
    width: 20px;
    height: 20px;
    background: #2CC4F8;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10000;
    border-radius: 20px;
    opacity: .9;

    &.hand-1 {
      background: #F00;
    }
    &.hand-2 {
      background: #0F0;
    }

    &.hand-center {
      top: 50%;
      left: 50%;
      background: #FFF;
      margin: -10px 0 0 -10px;
    }
  }

  .crosshairs {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 51px;
    height: 51px;
    margin: -25px 0 0 -25px;

    .crosshairs-ns,
    .crosshairs-we {
      position: absolute;
      background: #000;
      box-shadow: 0 0 0 1px rgba(255, 255, 255, .5);
    }

    .crosshairs-ns {
      width: 1px;
      height: 50px;
      top: 0;
      left: 25px;
    }
    .crosshairs-we {
      width: 50px;
      height: 1px;
      top: 25px;
      left: 0;
    }
  }

  .xyz {
    position: absolute;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, .7);
    padding: 0px 20px;
    color: #FFF;
    font-weight: bold;
    width: 200px;
    font-size: 15px;

    span {
      font-weight: normal;
    }
  }


////////////////////////////////////////////
//
// Navigation
//
////////////////////////////////////////////

  .navigation {
    display: none;
    position: fixed;
    top: -100px;
    left: 0;
    width: 100%;
    padding: 12px 20px 10px;
    z-index: 10000;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, .1);

    h3 {
      margin: 0;
      font: 600 20px $headline;
      text-transform: uppercase;
      color: $purple;
    }
  }



////////////////////////////////////////////
//
// Typography
//
////////////////////////////////////////////

  .h1 {
    font: 100 140px/90% $headline;
    text-align: center;
    letter-spacing: -5px;
    margin: 0;
    padding: 310px 30px 0;
    text-transform: uppercase;
    span {
      font-weight: 600;
    }
  }
  .h2 {
    font: 100 50px $headline;
    text-transform: uppercase;
    text-align: center;
    margin: 0 0 40px;
    padding: 0 30px;
    opacity: .8;
  }
  .h3 {
    font: 100 30px $headline;
    text-align: center;
    text-transform: uppercase;
    color: $purple;
    padding: 0 30px;

    span {
      font-weight: 600;
    }
  }
  .byline {
    font: 400 14px $sans;
    text-align: center;
    letter-spacing: 1px;
    margin: 0 0 70px;

    span {
      text-transform: uppercase;
    }
  }
  .text-block {
    max-width: 700px;
    margin: 0 auto 70px;
    padding: 0 30px;

    .dropcap {

    }
    .lede {
      font-weight: bold;
    }

    p {
      font: 400 18px/180% $serif;
      color: #333;
      margin: 0 0 25px;
    }

    .h1, .h2, .h3 {
      padding: 0;
    }
  }

  @media (max-width: 940px) {
    .h1 {
      font-size: 100px;
      letter-spacing: -2px;
    }
    .h2 {
      font-size: 35px;
    }
    .text-block {
      p {
        font-size: 16px;
      }
    }
  }

  @media (max-width: 650px) {
    .h1 {
      font-size: 70px;
    }
    .h2 {
      font-size: 25px;
    }
  }

  @media (max-height: 800px) {
    .h1 {
      padding-top: 250px;
    }
  }
  @media (max-height: 600px) {
    .h1 {
      padding-top: 180px;
    }
  }
  @media (max-height: 500px) {
    .h1 {
      padding-top: 130px;
    }
  }


////////////////////////////////////////////
//
// Syracuse Map
//
////////////////////////////////////////////

  #map {
    width: 100%;
    height: 400px;
    height: 90vh;
  }

  .point-name {
    font-size: 14px !important;
    margin: -3px 0 5px !important;
  }

  .point-meta {
    margin: 7px 0 -5px;
  }

  .point-type {
    display: inline-block;
    color: #FFF;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;
    padding: 2px 5px 1px;
    border-radius: 2px;
    -webkit-font-smoothing: antialiased;
  }
  .point-photo {
    width: 280px;
  }
  .leaflet-control-attribution {
    font: 400 11px $sans;
  }

  @media (max-width: 460px) {
    #map {
      height: 400px;
    }
  }


////////////////////////////////////////////
//
// Map Details
//
////////////////////////////////////////////


  .map-container {
    position: relative;
  }
  .map-details {
    color: #333;
    position: absolute;
    top: 10px;
    left: 50px;
    width: 360px;
    background: #FFF;
    border-radius: 4px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .2);

    .details-header {
      color: #FFF;
      font: 300 13px $sans;
      height: 270px;
      position: relative;
      background-position: center center;
      background-size: cover;
      background-color: #5D3EA4;
      border-radius: 4px 4px 0 0;
      text-shadow: 0 2px 5px rgba(0, 0, 0, .2);
      -webkit-font-smoothing: antialiased;

      .details-header-inner {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        padding: 60px 25px 25px;
        background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, .75)));
        background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .75));
        background-image:    -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .75));
        background-image:         linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .75));
      }

      &.without-photo {
        // height: auto;

        .details-header-inner {
          // position: static;
          padding: 25px;
          background: transparent;
        }
      }
    }

    .details-description {
      padding: 25px;
      font: 300 14px/180% $sans;
      border-bottom: 1px solid #DDD;
    }

    .details-table {
      font: 300 13px $sans;
      margin: 21px 19px;

      th, td {
        text-align: left;
        padding: 4px 6px;
      }
      th {
        font-size: 11px;
        text-transform: uppercase;
        color: #999;
        -webkit-font-smoothing: antialiased;
      }
    }

    h2 {
      margin: 0 0 10px;
      font: 300 30px $sans;
      line-height: 100%;

      a {
        color: inherit;
        text-decoration: none;
      }
    }
  }

  .status {
    font-weight: bold;
    -webkit-font-smoothing: antialiased;
  }
  .status-completed          { color: #6AA84F; }
  .status-under-construction { color: #3D85C6; }
  .status-planned            { color: #E69138; }
  .status-unclear            { color: #CC0000; }
  .status-canceled           { color: #F1C232; }
  .status-proposed           { color: #A64D79; }



////////////////////////////////////////////
//
// Horizontal Bar Graphs
//
////////////////////////////////////////////

  .bar {
    fill: #DDD;
  }
  .axis text {
    font: 10px sans-serif;
  }
  .axis path,
  .axis line {
    fill: none;
  }
  .axis.y text {
    fill: #FFF;
    font-weight: bold;
    font-size: 12px;
    pointer-events: none;
  }
  #neighborhoods .axis.y text {
    fill: #000;
  }

  .d3-tip {
    line-height: 1;
    font-weight: bold;
    padding: 12px;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    border-radius: 2px;
    pointer-events: none;
  }
  .d3-tip:after {
    box-sizing: border-box;
    display: inline;
    font-size: 10px;
    width: 100%;
    line-height: 1;
    color: rgba(0, 0, 0, 0.8);
    position: absolute;
    pointer-events: none;
    content: "\25BC";
    margin: -1px 0 0 0;
    top: 100%;
    left: 0;
    text-align: center;
  }


////////////////////////////////////////////
//
// Data Table
//
////////////////////////////////////////////

  .datatable {
    font: 300 14px $sans;
    border: 0 !important;
    margin: 0 -10px !important;

    th {
      text-align: left;
      padding: 15px 10px !important;
      border-bottom: 1px solid #DDD !important;
    }
    tr {
      -webkit-transition: .2s;
         -moz-transition: .2s;
              transition: .2s;
      &:hover {
        background: #F3F3F3;
      }
    }

    td {
      padding: 15px 10px !important;
    }
    td + td + td + td {
      text-align: right;
    }


    @media (max-width: 460px) {
      th:nth-child(2),
      td:nth-child(2) {
        display: none;
      }
    }

    @media (max-width: 350px) {
      th:nth-child(3),
      td:nth-child(3) {
        display: none;
      }
    }
  }

  .dataTables_info {
    display: none !important;
  }


////////////////////////////////////////////
//
// National Poverty Map
//
////////////////////////////////////////////

  #national {
    max-width: 960px;
    margin: 0 auto;
  }

  .counties {
    fill: none;
  }
  .states {
    fill: none;
    stroke: #FFF;
    stroke-linejoin: round;
  }
  .q0 { fill: #f7fcfd; }
  .q1 { fill: #e0ecf4; }
  .q2 { fill: #bfd3e6; }
  .q3 { fill: #9ebcda; }
  .q4 { fill: #8c96c6; }
  .q5 { fill: #8c6bb1; }
  .q6 { fill: #88419d; }
  .q7 { fill: #6e016b; }
  .q8 { fill: #4d004b; }










// Parallax

.parallax {
  clear: both;
  width: 100%;
  height: 800px;
  height: 105vh;
  background: #EFEFEF;
  overflow: hidden;
  margin: 50px 0;
  -webkit-transform: translate3d(0, 0, 0);
     -moz-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.parallax .parallax-image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  -webkit-transform: translate3d(0, 0, 0);
     -moz-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.parallax .cutline {
  font: 300 14px/140% $sans;
  position: absolute;
  top: 0;
  left: 0;
  padding: 20px;
  color: #FFF;
  text-shadow: 0 1px 5px rgba(0, 0, 0, .8);
  max-width: 50%;
  -webkit-transform: translate3d(0, 0, 0);
     -moz-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.parallax .cutline strong {
  font-size: 11px;
  text-transform: uppercase;
}
.no-parallax .parallax {
  height: auto;
  background: transparent;
  padding-top: 0;
}
.no-parallax .parallax .parallax-image {
  height: 250px;
}
.no-parallax .parallax .cutline {
  color: #555;
  position: static;
  text-shadow: none;
  max-width: none;
  padding: 20px 30px 0;
}