| | |
| | | $color-background : #061C30; |
| | | $color-text : #848d96; |
| | | $color-link : #848d96; |
| | | $color-link-hover : #CA486d; |
| | | $color-maverick : #47bec7; |
| | | $color-tagline : #CCCCCC; |
| | | $color-link-hover : #CA486d; |
| | | $color-maverick : #47bec7; |
| | | $color-tagline : #CCCCCC; |
| | | |
| | | // Breakpoints |
| | | $bp-smallish : 1200px; |
| | |
| | | //------------------------------------------------------------------------------- |
| | | |
| | | html { |
| | | background-color: $color-background; |
| | | background-color: $color-background; |
| | | } |
| | | body.page-template-page-fullsingle-split { |
| | | background-color: $color-background; |
| | | background-color: $color-background; |
| | | font-family: 'Montserrat', sans-serif; |
| | | font-weight: 400; |
| | | font-size: 21px; |
| | |
| | | @media (max-width: $bp-tablet ) { |
| | | height: auto; |
| | | flex-wrap: wrap; |
| | | } |
| | | } |
| | | |
| | | //------------------------------------------------------------------------------- |
| | | // Column - Big Image |
| | |
| | | @media (max-width: $bp-tablet ) { |
| | | height: 80vh; |
| | | width: 100%; |
| | | } |
| | | } |
| | | |
| | | } |
| | | |
| | | //------------------------------------------------------------------------------- |
| | | // Column - Content |
| | | // Column - Content |
| | | //------------------------------------------------------------------------------- |
| | | |
| | | .split-content { |
| | |
| | | @media (max-width: $bp-tablet ) { |
| | | width: 100%; |
| | | height: auto; |
| | | } |
| | | } |
| | | |
| | | .split-content-vertically-center { |
| | | padding: 80px; |
| | |
| | | |
| | | @media (max-width: $bp-tablet ) { |
| | | padding: 40px; |
| | | } |
| | | |
| | | } |
| | | |
| | | } |
| | | |
| | | } |
| | |
| | | |
| | | .split-intro { |
| | | font-weight: 600; |
| | | font-size: 64px; |
| | | font-size: 64px; |
| | | line-height: 80px; |
| | | letter-spacing: -2px; |
| | | |
| | | h1 { |
| | | font-weight: 400; |
| | | text-transform: uppercase; |
| | | font-size: 16px; |
| | | font-size: 16px; |
| | | line-height: 16px; |
| | | margin-bottom: 40px; |
| | | letter-spacing: 0.4px; |
| | |
| | | |
| | | @media (max-width: $bp-tablet ) { |
| | | padding: 20px 0; |
| | | } |
| | | } |
| | | |
| | | p { |
| | | color: $color-text; |
| | |
| | | border-bottom: 1px dotted $color-link-hover; |
| | | } |
| | | |
| | | } |
| | | } |
| | | |
| | | } |
| | | |
| | |
| | | // Lists |
| | | //------------------------------------------------------------------------------- |
| | | |
| | | .split-lists { |
| | | .split-lists { |
| | | |
| | | .split-list { |
| | | width: 30%; |
| | |
| | | |
| | | @media (max-width: $bp-mobile ) { |
| | | width: 90%; |
| | | } |
| | | } |
| | | |
| | | h3 { |
| | | font-weight: 400; |
| | |
| | | } |
| | | |
| | | ul { |
| | | |
| | | |
| | | |
| | | li { |
| | | font-size: 16px; |
| | | line-height: 16px; |
| | | line-height: 16px; |
| | | margin-bottom: 12px; |
| | | |
| | | |
| | | a { |
| | | color: $color-link; |
| | | transition-duration: 0.5s; |
| | |
| | | } |
| | | |
| | | } |
| | | |
| | | |
| | | } |
| | | |
| | | } |
| | | |
| | | } |
| | | } |
| | | |
| | | } |
| | | |
| | |
| | | // Credit |
| | | //------------------------------------------------------------------------------- |
| | | |
| | | // To edit this credit you can remove the CC3.0 license for only $5 here: https://onepagelove.com/split |
| | | // To edit this credit you can remove the CC3.0 license for only $5 here: https://onepagelove.com/split |
| | | // this really helps contribute towards us developing more templates and means the world to me! |
| | | // Cheers, Rob (@robhope) |
| | | |
| | |
| | | opacity: 0.4; |
| | | |
| | | p { |
| | | font-size: 12px; |
| | | font-size: 12px; |
| | | line-height: 14px; |
| | | |
| | | a { |
| | | a { |
| | | color: $color-text; |
| | | } |
| | | |
| | |
| | | .video-container { |
| | | position:relative; |
| | | overflow:hidden; |
| | | height: 56.25vw; |
| | | height: 56.25vw; |
| | | width: 100vw; |
| | | @media (max-aspect-ratio:16/9) { |
| | | height: 100vh; |
| | | @media (max-aspect-ratio:16/9) { |
| | | height: 100vh; |
| | | width: 177.7777777778vh; // this is for the ration 16:9 |
| | | } |
| | | } |
| | | .video-container iframe, |
| | | .video-container object, |
| | | .video-container embed { |
| | | position: absolute; |
| | | top: 0; |
| | | left: 0; |
| | | width: 100%; |
| | | height: 100%; |
| | | .video-container iframe, |
| | | .video-container object, |
| | | .video-container embed { |
| | | position: absolute; |
| | | top: 0; |
| | | left: 0; |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | | |
| | | // Self-Hosted |
| | |
| | | object-position : 50% 50%; |
| | | width : 100%; |
| | | height : 100%; |
| | | } |
| | | } |