app/assets/stylesheets/layout.scss
// Normalize footer behaviour
// Sticky footer
html {
background-color: #141414;
}
body {
display: flex;
min-height: 100vh;
flex-direction: column;
background-color: white;
}
main {
flex: 1 0 auto;
display: block;
}
footer.page-footer{
z-index: 10;
}
nav {
height: 0px;
line-height: 0px;
}
// custom toast styling
@media only screen and (min-width : 601px) {
.toast {
width: 100%;
}
#toast-container {
min-width: 50%;
bottom: 25%;
top: 75%;
right: 25%;
left: 25%;
}
}
@media only screen and (max-width : 601px) {
.toast {
font-size: 1rem;
}
}
// custom slick styling for our dark background
.slick-dots li button:before {
color: white;
}
.slick-dots li.slick-active button:before{
opacity: .75;
color: white;
}
html, button, input, select, textarea,
.pure-g [class *= "pure-u"] {
/* Set your content font stack here: */
font-family: 'Montserrat', sans-serif !important;
}
/* apply a natural box layout model to all elements, but allowing components to change */
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
// Breakpoints
// ----------------
// 600px => large
// Show the fancy "full page"
//
// At other sizes:
//
// cosmetic graphics are removed
// layout reflows to single column
$lg-breakpoint: 600px;
@-ms-viewport{
width: device-width;
}
#quicklinks {
// font-size and padding
$quicklinks-size: 0.9rem;
display: flex;
background: black;
color: white;
text-transform: uppercase;
font-size: $quicklinks-size;
padding: 0.2rem 0;
.quicklinks-items {
display: flex;
justify-content: space-between;
margin-right: $quicklinks-size;
line-height: 1.5rem;
}
.v-align {
display: flex;
align-items: center;
.logo-text {
margin-left: 0.5rem;
}
}
.current {
color: #00d646;
}
// on large screens split the quicklinks between left and right
@media (min-width: $lg-breakpoint) {
line-height: 0.8rem;
.lg-items-left {
height: 50px;
float: left;
margin-right: 0.5rem;
display: flex;
align-items: center;
}
.lg-items-right {
float: right;
margin-left: $quicklinks-size;
margin-right: 0;
display: flex;
align-items: center;
}
}
}
#top-menu {
padding: 0.6rem 0;
position: relative;
z-index: 100;
background: white;
i {
font-size: 48px;
color: black;
}
.top-menu-left {
float: left;
display: flex;
align-items: center;
justify-content: center;
@media (min-width: $lg-breakpoint) {
float: none;
}
.brandname {
@extend .font-heavy;
font-size: 1.4rem;
display: inline-block;
color: black;
margin: 0.67em 0;
padding: 0;
@media (min-width: $lg-breakpoint) {
font-size: 2.4rem;
margin-left: 1rem;
}
}
}
.top-menu-right {
display: flex;
justify-content: flex-end;
align-items: center;
text-align: center;
> * {
margin-left: 2vw;
font-size: 1rem;
}
}
#mobile-menu {
visibility: hidden;
margin: 0;
padding: 0;
height: 0;
width: 0;
}
.dropdown {
position: absolute;
top: 100%;
right: 0;
margin: 0;
padding: 0.6rem;
padding-right: 8.3333%;
width: 100%;
background: white;
list-style: none;
display: block;
z-index: 100;
text-align: right;
@media (min-width: $lg-breakpoint) {
display: none;
}
.dropdown-item {
color: black;
}
li {
float: none;
padding: 0.5rem 0;
line-height: 1.15;
}
}
.dropdown > * {
padding: 0.5rem 0;
text-transform: capitalize;
.current {
color: #00d646;
}
}
#mobile-menu:checked ~ .dropdown {
display: none;
}
}
#login-background {
background: image-url('bg.jpg');
background-size: cover;
position: relative;
overflow: hidden;
height: 100%;
}
#take-control {
background: image-url('bg.jpg');
background-size: cover;
position: relative;
overflow: hidden;
height: auto;
z-index: 10;
@media (min-width: $lg-breakpoint) {
height: 768px;
}
.ringed-logo {
position: absolute;
top: -139px;
left: calc(-596px + 10vw);
@media (min-width: $lg-breakpoint) {
top: 0;
left: calc(50vw - 600px);
z-index: 10;
}
}
.take-control-content {
position: relative;
z-index: 100;
}
.take-control-left {
text-align: center;
}
.take-control-phones {
width: 100%;
max-width: 382px;
}
.take-control-content {
color: white;
margin-top: 130px;
margin-bottom: 1rem;
margin-left: 10%;
width: 80%;
.title {
@extend .font-heavy;
color: white;
font-size: 2.2rem;
}
.pitch {
@extend .font-light;
color: white;
font-size: 1.2rem;
}
@media (min-width: $lg-breakpoint) {
margin-top: 260px;
margin-left: 0;
width: 50%;
}
}
}
#callouts {
color: white;
text-align: center;
> .cell {
padding: 5em 2em;
background: #252525;
.title {
color: white;
font-size: 1rem;
}
.text {
@extend .font-light;
font-size: 1rem;
color: #959595;
text-align: center;
}
}
> .cell-contrast {
background: #1a1a1a;
}
.gh-logo {
font-size: 65px;
color: #008ecf;
}
}
#location-map {
display: flex;
height: auto;
background-image: linear-gradient(90deg, #08244f, #1d727a);
color: white;
padding: 2rem;
@media (min-width: $lg-breakpoint) {
min-height: 75vh;
}
.map {
background-image: image-url('location-callout-map.png');
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
}
.text {
.caption {
@extend .font-heavy;
color: white;
font-size: 1.8rem;
}
.button {
background: #fb1d4f;
}
}
}
#benefits {
text-align: center;
padding: 5em 0;
color: white;
background: #252525;
.headline {
padding: 0 2rem;
color: white;
.tagline {
@extend .font-light;
}
}
.cell-wrapper {
display: block;
@media (min-width: $lg-breakpoint) {
display: flex;
flex-flow: row wrap;
}
}
.cell {
// display: flex;
width: 300px;
flex-grow: 1;
text-align: center;
padding: 0 2rem;
.cell-title {
@extend .font-heavy;
color: white;
font-size: 1rem;
}
.cell-description {
font-size: 1rem;
@extend .font-light;
color: #959595;
max-width: 300px;
margin: 1rem auto;
}
}
}
#get-enabled {
background-image: image-url('enabled-tile.png'), linear-gradient(#dbfdff 10%, rgba(224, 255, 255, 0.3), #dbfdff);
background-blend-mode: overlay;
position: relative;
@media (min-width: $lg-breakpoint) {
height: 600px;
}
.valign-wrapper {
justify-content: center;
}
.enabled-card {
position: relative;
background: white;
height: 100%;
padding: 1rem;
text-align: left;
@media (min-width: $lg-breakpoint) {
width: 66.6666%; // matches 8-12 grid
min-width: 530px; // since the page breaks at 600px, this allows 35px padding for the trustmark
padding: 2rem 6rem;
box-shadow: 0 3px 4px darkgray;
text-align: center;
height: initial;
}
#trustmark {
@media (min-width: $lg-breakpoint) {
position: absolute;
top: -30px;
left: -30px;
}
}
.enabled-title {
font-size: 2rem;
@media (max-width: $lg-breakpoint) {
text-align: center;
}
}
.enabled-pitch, .enabled-description {
@extend .font-light;
}
.enabled-pitch {
text-align: center;
font-size: 1.3rem;
color: black;
}
.enabled-description {
text-align: center;
font-size: 0.9rem;
color: black;
}
}
}
#bottom-callout {
background-image: image-url('logo-rings-footer'), linear-gradient(90deg, #08244f, #1d727a);
background-position: top center;
background-repeat: no-repeat;
color: white;
height: 600px;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.wrapper {
max-width: 40rem;
text-align: center;
position: relative;
padding: 0 2rem;
.wrapper-pitch {
text-align: center;
color: white;
font-size: 1.3rem;
}
.wrapper-description {
@extend .font-medium;
text-align: center;
font-size: 1.2rem;
color: #008ecf;
}
}
}
#bottom-bar {
text-align: center;
background: #141414;
color: white;
padding: 3rem 0;
.copy-notice {
font-size: 0.8rem;
@extend .font-light;
}
}
// base styling
a {
text-decoration: none;
color: inherit;
}
// button code
.button {
display: inline-block;
color: white;
text-decoration: none;
padding: 0.5rem 1rem;
margin: 2px;
border-radius: 5px;
&.button-primary {
background: #34c946;
}
&.button-blue {
background: #008ecf;
}
&.button-alternate {
background: #fb1d4f;
}
&.button-inverse {
color: #279ac5;
border: solid 2px #279ac5;
}
&.button-large {
padding: 1rem 1.5rem;
}
}
// font stuff
.font-heavy {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}
.font-medium {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
}
.font-light {
font-family: 'Muli', sans-serif;
font-weight: 300;
}
// other helpers
.ringed-icon {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
width: 167px;
height: 178px;
background-image: image-url('icons/icon-rings.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.hyperlink {
text-decoration: underline;
color: $primary-color;
}
.valign-wrapper {
display: flex;
align-items: center;
height: 100%;
}
.valign {
display: inline-block;
}
.filled-row {
display: flex;
@media (max-width: 599px) {
flex-direction: column;
}
}
@media (min-width: $lg-breakpoint) {
main {
margin-top: 120px;
}
.lg-hide {
display: none;
}
.lg-show-inl {
display: inline;
}
.lg-show-bl {
display: block;
}
.lg-show-ib {
display: inline-block;
}
.lg-show-flex {
display: flex;
}
#top-menu {
display: none;
}
}
@media (max-width: 599px) {
.sm-hide {
display: none !important;
}
#top-menu {
display: block;
}
main {
margin-top: 73px;
}
}
// Grid stuff
// Should be split into it's own file in the future.
.pure-u-1,
.pure-u-1-1,
.pure-u-1-2,
.pure-u-1-6,
.pure-u-2-6,
.pure-u-3-6,
.pure-u-4-6,
.pure-u-5-6,
.pure-u-6-7,
.pure-u-1-12,
.pure-u-2-12,
.pure-u-3-12,
.pure-u-4-12,
.pure-u-5-12,
.pure-u-6-12,
.pure-u-7-12,
.pure-u-8-12,
.pure-u-9-12,
.pure-u-10-12,
.pure-u-11-12,
.pure-u-12-12,
.pure-u-13-14,
.pure-u-14-14 {
display: inline-block;
*display: inline;
zoom: 1;
letter-spacing: normal;
word-spacing: normal;
vertical-align: top;
text-rendering: auto;
}
.pure-u-1-12 {
width: 8.3333%;
}
.pure-u-1-6,
.pure-u-2-12 {
width: 16.6666%;
}
.pure-u-3-12 {
width: 25%;
}
.pure-u-2-6,
.pure-u-4-12 {
width: 33.3333%;
}
.pure-u-5-12 {
width: 41.6666%;
}
.pure-u-1-2,
.pure-u-3-6,
.pure-u-6-12 {
width: 50%;
}
.pure-u-7-12 {
width: 58.3333%;
}
.pure-u-4-6,
.pure-u-8-12 {
width: 66.6666%;
}
.pure-u-9-12 {
width: 75%;
}
.pure-u-5-6,
.pure-u-10-12 {
width: 83.3333%;
}
.pure-u-11-12 {
width: 91.6666%;
}
.pure-u-1,
.pure-u-1-1,
.pure-u-12-12 {
width: 100%;
}
@media screen and (min-width: 35.5em) {
.pure-u-sm-1,
.pure-u-sm-1-1,
.pure-u-sm-1-2,
.pure-u-sm-1-6,
.pure-u-sm-2-6,
.pure-u-sm-3-6,
.pure-u-sm-4-6,
.pure-u-sm-5-6,
.pure-u-sm-6-7,
.pure-u-sm-1-12,
.pure-u-sm-2-12,
.pure-u-sm-3-12,
.pure-u-sm-4-12,
.pure-u-sm-5-12,
.pure-u-sm-6-12,
.pure-u-sm-7-12,
.pure-u-sm-8-12,
.pure-u-sm-9-12,
.pure-u-sm-10-12,
.pure-u-sm-11-12,
.pure-u-sm-12-12,
.pure-u-sm-13-14,
.pure-u-sm-14-14 {
display: inline-block;
*display: inline;
zoom: 1;
letter-spacing: normal;
word-spacing: normal;
vertical-align: top;
text-rendering: auto;
}
.pure-u-sm-1-12 {
width: 8.3333%;
}
.pure-u-sm-1-6,
.pure-u-sm-2-12 {
width: 16.6666%;
}
.pure-u-sm-3-12 {
width: 25%;
}
.pure-u-sm-2-6,
.pure-u-sm-4-12 {
width: 33.3333%;
}
.pure-u-sm-5-12 {
width: 41.6666%;
}
.pure-u-sm-1-2,
.pure-u-sm-3-6,
.pure-u-sm-6-12 {
width: 50%;
}
.pure-u-sm-7-12 {
width: 58.3333%;
}
.pure-u-sm-4-6,
.pure-u-sm-8-12 {
width: 66.6666%;
}
.pure-u-sm-9-12 {
width: 75%;
}
.pure-u-sm-5-6,
.pure-u-sm-10-12 {
width: 83.3333%;
}
.pure-u-sm-11-12 {
width: 91.6666%;
}
.pure-u-sm-1,
.pure-u-sm-1-1,
.pure-u-sm-12-12 {
width: 100%;
}
}
@media screen and (min-width: 48em) {
.pure-u-md-1,
.pure-u-md-1-1,
.pure-u-md-1-2,
.pure-u-md-1-6,
.pure-u-md-2-6,
.pure-u-md-3-6,
.pure-u-md-4-6,
.pure-u-md-5-6,
.pure-u-md-6-7,
.pure-u-md-1-12,
.pure-u-md-2-12,
.pure-u-md-3-12,
.pure-u-md-4-12,
.pure-u-md-5-12,
.pure-u-md-6-12,
.pure-u-md-7-12,
.pure-u-md-8-12,
.pure-u-md-9-12,
.pure-u-md-10-12,
.pure-u-md-11-12,
.pure-u-md-12-12,
.pure-u-md-13-14,
.pure-u-md-14-14 {
display: inline-block;
*display: inline;
zoom: 1;
letter-spacing: normal;
word-spacing: normal;
vertical-align: top;
text-rendering: auto;
}
.pure-u-md-1-12 {
width: 8.3333%;
}
.pure-u-md-1-6,
.pure-u-md-2-12 {
width: 16.6666%;
}
.pure-u-md-3-12 {
width: 25%;
}
.pure-u-md-2-6,
.pure-u-md-4-12 {
width: 33.3333%;
}
.pure-u-md-5-12 {
width: 41.6666%;
}
.pure-u-md-1-2,
.pure-u-md-3-6,
.pure-u-md-6-12 {
width: 50%;
}
.pure-u-md-7-12 {
width: 58.3333%;
}
.pure-u-md-4-6,
.pure-u-md-8-12 {
width: 66.6666%;
}
.pure-u-md-9-12 {
width: 75%;
}
.pure-u-md-5-6,
.pure-u-md-10-12 {
width: 83.3333%;
}
.pure-u-md-11-12 {
width: 91.6666%;
}
.pure-u-md-1,
.pure-u-md-1-1,
.pure-u-md-12-12 {
width: 100%;
}
}
// @media screen and (min-width: 64em) {
@media screen and (min-width: 600px) {
.pure-u-lg-1,
.pure-u-lg-1-1,
.pure-u-lg-1-2,
.pure-u-lg-1-6,
.pure-u-lg-2-6,
.pure-u-lg-3-6,
.pure-u-lg-4-6,
.pure-u-lg-5-6,
.pure-u-lg-6-7,
.pure-u-lg-1-12,
.pure-u-lg-2-12,
.pure-u-lg-3-12,
.pure-u-lg-4-12,
.pure-u-lg-5-12,
.pure-u-lg-6-12,
.pure-u-lg-7-12,
.pure-u-lg-8-12,
.pure-u-lg-9-12,
.pure-u-lg-10-12,
.pure-u-lg-11-12,
.pure-u-lg-12-12,
.pure-u-lg-13-14,
.pure-u-lg-14-14 {
display: inline-block;
*display: inline;
zoom: 1;
letter-spacing: normal;
word-spacing: normal;
vertical-align: top;
text-rendering: auto;
}
.pure-u-lg-1-12 {
width: 8.3333%;
}
.pure-u-lg-1-6,
.pure-u-lg-2-12 {
width: 16.6666%;
}
.pure-u-lg-3-12 {
width: 25%;
}
.pure-u-lg-2-6,
.pure-u-lg-4-12 {
width: 33.3333%;
}
.pure-u-lg-5-12 {
width: 41.6666%;
}
.pure-u-lg-1-2,
.pure-u-lg-3-6,
.pure-u-lg-6-12 {
width: 50%;
}
.pure-u-lg-7-12 {
width: 58.3333%;
}
.pure-u-lg-4-6,
.pure-u-lg-8-12 {
width: 66.6666%;
}
.pure-u-lg-9-12 {
width: 75%;
}
.pure-u-lg-5-6,
.pure-u-lg-10-12 {
width: 83.3333%;
}
.pure-u-lg-11-12 {
width: 91.6666%;
}
.pure-u-lg-1,
.pure-u-lg-1-1,
.pure-u-lg-12-12 {
width: 100%;
}
}
@media screen and (min-width: 80em) {
.pure-u-xl-1,
.pure-u-xl-1-1,
.pure-u-xl-1-2,
.pure-u-xl-1-6,
.pure-u-xl-2-6,
.pure-u-xl-3-6,
.pure-u-xl-4-6,
.pure-u-xl-5-6,
.pure-u-xl-6-7,
.pure-u-xl-1-12,
.pure-u-xl-2-12,
.pure-u-xl-3-12,
.pure-u-xl-4-12,
.pure-u-xl-5-12,
.pure-u-xl-6-12,
.pure-u-xl-7-12,
.pure-u-xl-8-12,
.pure-u-xl-9-12,
.pure-u-xl-10-12,
.pure-u-xl-11-12,
.pure-u-xl-12-12,
.pure-u-xl-13-14,
.pure-u-xl-14-14 {
display: inline-block;
*display: inline;
zoom: 1;
letter-spacing: normal;
word-spacing: normal;
vertical-align: top;
text-rendering: auto;
}
.pure-u-xl-1-12 {
width: 8.3333%;
}
.pure-u-xl-1-6,
.pure-u-xl-2-12 {
width: 16.6666%;
}
.pure-u-xl-3-12 {
width: 25%;
}
.pure-u-xl-2-6,
.pure-u-xl-4-12 {
width: 33.3333%;
}
.pure-u-xl-5-12 {
width: 41.6666%;
}
.pure-u-xl-1-2,
.pure-u-xl-3-6,
.pure-u-xl-6-12 {
width: 50%;
}
.pure-u-xl-7-12 {
width: 58.3333%;
}
.pure-u-xl-4-6,
.pure-u-xl-8-12 {
width: 66.6666%;
}
.pure-u-xl-9-12 {
width: 75%;
}
.pure-u-xl-5-6,
.pure-u-xl-10-12 {
width: 83.3333%;
}
.pure-u-xl-11-12 {
width: 91.6666%;
}
.pure-u-xl-1,
.pure-u-xl-1-1,
.pure-u-xl-12-12 {
width: 100%;
}
}