| //A block spans the full page width |
| .full-stripe { |
| |
| // default background |
| background-color: #ffffff; |
| |
| // gray background |
| &--alternate { |
| background-color: #f9f9fb; |
| } |
| &--alternate-2 { |
| background-color: #f0f2f4; |
| } |
| |
| // front page hero background |
| &--video { |
| // full screen hero image for mobile |
| height: 100vh; |
| background: #1d3649 url(../img/hero-mobile.png) 0 0 no-repeat; |
| background-size: cover; |
| overflow: hidden; |
| color: #fff; |
| position: relative; |
| |
| @media (min-width: $bp-medium) { |
| height: 70vh; |
| background: #1d3649 url(../img/hero-home.png) 0 0 no-repeat; |
| } |
| |
| #video-background { |
| // default mobile settings |
| // method for vertically and horizontally centering an element |
| position: absolute; |
| left: 50%; |
| top: 50%; |
| -webkit-transform: translateY(-50%) translateX(-50%); |
| transform: translateY(-50%) translateX(-50%); |
| display: none; |
| |
| // video only plays on desktop |
| @media (min-width: $bp-medium) { |
| width: 100%; |
| display: block; |
| } |
| } |
| } |
| |
| // secondary page hero background |
| &--subpage-header { |
| background: #1D3649 url(../img/hero-about.svg) center bottom no-repeat; |
| background-size: cover; |
| color: #fff; |
| text-align: center; |
| } |
| |
| &--center{ |
| text-align: center; |
| } |
| // give each block more padding when screen reaches browser size |
| @media (min-width: $bp-medium) { |
| padding: 3em; |
| } |
| |
| } |
| |
| // clear top nav |
| .clear-header { |
| margin-top: 9.5em; |
| @media (min-width: 64em){ |
| margin-top: 4.125em; |
| } |
| } |
| |
| // old hero banner |
| .hero-banner { |
| color: #fff; |
| position: relative; |
| top: 115px; |
| |
| @media (min-width: $bp-medium) { |
| top: 0; |
| } |
| &.hero-home, &.hero-about, &.hero-subpage { |
| position: relative; |
| min-height: 300px; |
| background: transparent url(../img/hero-home.jpg) 0 0 no-repeat; |
| background-size: cover; |
| overflow: hidden; |
| @media (min-width: $bp-medium) { |
| min-height: 500px; |
| } |
| &.hero-about { |
| background: #1D3649 url(../img/hero-about.svg) center bottom no-repeat; |
| background-size: cover; |
| } |
| |
| &.hero-subpage { |
| background: #1D3649 url(../img/hero-about.svg) center bottom no-repeat; |
| background-size: cover; |
| } |
| |
| } |
| .banner-overlay { |
| position: absolute; |
| top: 0; |
| z-index: 50; |
| width: 100%; |
| height: 100%; |
| background: rgba(21,41,53,.5); |
| } |
| .banner-content { |
| height: 100%; |
| display: flex; |
| flex-direction: column; |
| justify-content: center; |
| align-items: center; |
| h1 { |
| line-height: 1; |
| } |
| p { |
| font-size: 18px; |
| text-align: center; |
| } |
| .video-link { |
| color: #fff; |
| font-weight: $font-weight-medium; |
| display: flex; |
| align-items: center; |
| border: 0; |
| &:hover { |
| color: $color-text-systemml; |
| } |
| .play-button { |
| margin-right: 10px; |
| } |
| } |
| .button-primary { |
| margin-top: 50px; |
| } |
| } |
| video { |
| height: 100%; |
| position: absolute; |
| left: 50%; |
| top: 50%; |
| -webkit-transform: translateY(-50%) translateX(-50%); |
| transform: translateY(-50%) translateX(-50%); |
| display: none; |
| @media (min-width: $bp-medium) { |
| width: 100%; |
| height: auto; |
| display: block; |
| } |
| } |
| } |
| |
| .features-banner, .partners-banner, .team-banner, .announcement-banner { |
| text-align: center; |
| padding: 20px; |
| background: #f9f9fb; |
| &.partners-banner, &.team-banner { |
| background: transparent; |
| } |
| &.announcement-banner { |
| p { |
| width: 100%; |
| margin: 0; |
| } |
| } |
| .content-group { |
| align-items: center; |
| margin: 50px 0; |
| .team-container { |
| &:nth-child(even) { |
| margin: 0; |
| } |
| } |
| @media (min-width: $bp-medium) { |
| text-align: center; |
| align-items: flex-start; |
| li:nth-child(2n) { |
| margin: 0 50px; |
| } |
| li { |
| width: 33%; |
| } |
| &.wrap-row { |
| display: block; |
| li { |
| display: block; |
| width: 100%; |
| } |
| } |
| } |
| .icon { |
| margin: 20px auto; |
| } |
| } |
| } |
| |
| .usecases-banner { |
| .content-group { |
| margin: 50px 0; |
| padding: 20px; |
| h2 { |
| text-align: center; |
| } |
| @media (min-width: $bp-medium) { |
| img { |
| max-width: 100%; |
| margin-left: 100px; |
| } |
| &:nth-child(even) { |
| flex-direction: row-reverse; |
| img { |
| margin: 0 100px 0 0; |
| } |
| } |
| } |
| } |
| } |
| |
| .table { |
| border-collapse: collapse; |
| width: 100%; |
| margin: 40px 0; |
| tr { |
| -moz-transition: $transition-default; |
| -webkit-transition: $transition-default; |
| transition: $transition-default; |
| &:hover { |
| background: #f9f9fb; |
| } |
| |
| } |
| th, td { |
| text-align: left; |
| padding: 10px 20px; |
| border-bottom: 1px solid #e0e0e0; |
| } |
| } |
| |
| .get-started-banner { |
| color: #fff; |
| padding: 20px 0; |
| text-align: center; |
| background: #1D3649; |
| .button-primary { |
| margin-top: 50px; |
| } |
| } |
| |
| //Announcement banner |
| |
| .vldb2016 { |
| background-image: url("/assets/img/mobile-award.png"); |
| background-size: 167px 47px; |
| width: 167px; |
| height: 47px; |
| margin-bottom: 2em; |
| |
| @media (min-width: 64em) { |
| background-image: url("/assets/img/award.png"); |
| background-size: 170px 100px; |
| width: 170px; |
| height: 100px; |
| } |
| } |
| |
| .site-footer { |
| text-align: center; |
| font-size: 12px; |
| padding: 50px 0; |
| } |