1  @import './assets/styles/global.scss';
  2  
  3  .page-header {
  4    position: relative;
  5    background-color: $blue;
  6    background-image: url('/static/img/header-bg.jpg');
  7    background-position: center;
  8    background-size: cover;
  9    padding: calculateRem(48) 0 calculateRem(80);
 10  
 11    @media (min-width: $desktop) {
 12      // Need important to override inline style
 13      background: none !important;
 14      overflow: hidden;
 15      padding-top: 0;
 16    }
 17  
 18    .logo img {
 19      width: calculateRem(80);
 20    }
 21  
 22    h1 {
 23      margin-bottom: calculateRem(24);
 24  
 25      @media (min-width: $desktop) {
 26        margin-bottom: 0;
 27      }
 28    }
 29  
 30    p {
 31      margin-bottom: calculateRem(32);
 32  
 33      @media (min-width: $desktop) {
 34        width: calculateRem(336);
 35        margin-left: calculateRem(204);
 36      }
 37    }
 38  
 39    a {
 40      color: #fff;
 41      text-decoration: none;
 42  
 43      &:hover {
 44        text-decoration: underline;
 45      }
 46    }
 47  }
 48  
 49  .inline-header {
 50  
 51    .logo {
 52      text-align: center;
 53      margin-bottom: calculateRem(24);
 54    }
 55  
 56    @media (min-width: $desktop) {
 57      padding: calculateRem(180) 0 calculateRem(140);
 58  
 59      .logo,
 60      .page-header-nav {
 61        display: none;
 62      }
 63  
 64      .container {
 65        display: flex;
 66        justify-content: center;
 67      }
 68    }
 69  }
 70  
 71  .page-header-bg {
 72    display: none;
 73  
 74    @media (min-width: $desktop) {
 75      display: block;
 76      position: absolute;
 77      top: 0;
 78      right: 0;
 79      z-index: -1;
 80      height: 100%;
 81    }
 82  
 83    @media (min-width: $desktop) {
 84      min-height: calculateRem(808);
 85    }
 86  }
 87  
 88  .headroom {
 89    top: 0;
 90    left: 0;
 91    right: 0;
 92    z-index: 1;
 93    display: none;
 94  
 95    @media (min-width: $desktop) {
 96      display: block;
 97    }
 98  }
 99  
100  .headroom--unfixed {
101    position: relative;
102    transform: translateY(0);
103  }
104  
105  .headroom--scrolled {
106    transition: transform 500ms ease-in-out;
107  }
108  
109  .headroom--unpinned {
110    position: fixed;
111    transform: translateY(-100%);
112  }
113  
114  .headroom--pinned {
115    position: fixed;
116    transform: translateY(0%);
117  }
118  
119  .sticky-header {
120  
121    @media (min-width: $desktop) {
122      width: 100%;
123      z-index: 1;
124      padding: calculateRem(32) 0;
125      background: -moz-linear-gradient(top, rgba(28, 36, 73, 0.65) 1%, rgba(28, 36, 73, 0) 68%, rgba(28, 36, 73, 0) 100%);
126      background: -webkit-linear-gradient(top, rgba(28, 36, 73, 0.65) 1%, rgba(28, 36, 73, 0) 68%, rgba(28, 36, 73, 0) 100%);
127      background: linear-gradient(to bottom, rgba(28, 36, 73, 0.65) 1%, rgba(28, 36, 73, 0) 68%, rgba(28, 36, 73, 0) 100%);
128      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a61c2449', endColorstr='#001c2449', GradientType=0);
129  
130      .container {
131        max-width: calculateRem($lrg-container-width);
132        display: flex;
133        justify-content: space-between;
134        align-items: center;
135      }
136  
137      .logo {
138        padding-top: calculateRem(4);
139      }
140    }
141  }