|
@import "compass" |
|
|
|
$color-active: rgba( 255 , 55 , 71 , 1 ) |
|
$color-white: rgba( 245 , 250 , 255 , 1 ) |
|
$color-black: rgba( 5 , 15 , 30 , 1 ) |
|
$sans: 'Titillium Web', sans-serif |
|
|
|
html , body |
|
position: relative |
|
width: 100% |
|
|
|
html |
|
background-color: $color-white |
|
overflow-x: hidden |
|
height: 100% |
|
font-size: 0 |
|
|
|
body |
|
overflow: hidden |
|
|
|
section |
|
@include contain( padding-top , 5vw , 15px , 60px ) |
|
background-color: shade( $color-white , 5% ) |
|
position: relative |
|
display: block |
|
|
|
&:last-of-type |
|
@include contain( padding-bottom , 5vw , 15px , 60px ) |
|
|
|
.cover |
|
height: 100vh |
|
box-sizing: border-box |
|
background-color: $color-active |
|
z-index: 3 |
|
|
|
h1 |
|
@include translate( -50% , -50% ) |
|
@include contain( padding , 5vw , 15px , 60px ) |
|
background-color: $color-white |
|
line-height: 75% |
|
color: $color-active |
|
display: inline-block |
|
position: absolute |
|
left: 50% |
|
top: 50% |
|
|
|
p |
|
@include contain( padding , 2vw , 10px , 20px ) |
|
@include contain( bottom , 2vw , 10px , 20px ) |
|
color: $color-white |
|
position: absolute |
|
box-sizing: border-box |
|
width: 100% |
|
text-align: center |
|
|
|
&:before |
|
content: "" |
|
@include contain( bottom , 1vw , 0 , 10px ) |
|
position: absolute |
|
left: 50% |
|
border-top: 6px solid $color-white |
|
border-left: 6px solid transparent |
|
border-right: 6px solid transparent |
|
margin-left: -6px |
|
|
|
.content |
|
z-index: 1 |
|
text-align: center |
|
|
|
div |
|
background-color: $color-white |
|
@include contain( padding-top , 5vw , 15px , 60px ) |
|
box-sizing: border-box |
|
display: inline-block |
|
text-align: left |
|
max-width: 100% |
|
width: 900px |
|
|
|
h2 , img , p , hr |
|
@include contain( margin-bottom , 5vw , 15px , 60px ) |
|
|
|
img |
|
&:last-child |
|
|
|
// need to modify the contain mixin to use a selector? |
|
// idk, but using important or making a second include |
|
// to reset for cases like this is not ideal |
|
margin-bottom: 0 !important |
|
|
|
h2 , p |
|
@include contain( padding-right , 5vw , 15px , 60px ) |
|
@include contain( padding-left , 5vw , 15px , 60px ) |
|
|
|
img |
|
@include transition( opacity 0.3s ease-in-out ) |
|
opacity: 0.95 |
|
width: 100% |
|
height: auto |
|
|
|
&:hover |
|
opacity: 1 |
|
|
|
nav |
|
@include contain( padding , 5vw , 10px , 40px ) |
|
background-color: $color-black |
|
position: fixed |
|
text-align: center |
|
z-index: 2 |
|
right: 0 |
|
left: 0 |
|
top: 0 |
|
|
|
a |
|
@include contain( padding , 4vw , 3px , 20px ) |
|
padding-top: 0 !important |
|
padding-bottom: 0 !important |
|
display: inline-block |
|
color: $color-white |
|
text-decoration: none |
|
text-transform: uppercase |
|
|
|
border-left: 1px solid tint( $color-black , 33% ) |
|
border-left: 1px solid tint( $color-black , 33% ) |
|
|
|
&:first-of-type |
|
border-left: none |
|
|
|
|
|
h1 , h2 , h3 , p |
|
letter-spacing: 0.05em |
|
line-height: 135% |
|
font-family: $sans |
|
|
|
h1 , h3 |
|
text-transform: uppercase |
|
|
|
h1 |
|
@include contain( font-size , 12vw , 30px , 120px ) |
|
color: $color-active |
|
|
|
h2 |
|
@include contain( font-size , 10vw , 20px , 70px ) |
|
text-align: center |
|
color: $color-active |
|
|
|
p |
|
@include contain( font-size , 4vw , 14px , 21px ) |
|
|
|
h3 |
|
@include contain( font-size , 4vw , 10px , 15px ) |