Created
May 2, 2017 22:03
-
-
Save jasonhobbsllc/49cb2cad312ce9793b0d14a7b496de00 to your computer and use it in GitHub Desktop.
Copy and paste of Influence Landing Page template CSS for Rainmaker Platform landing Page builder.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
Theme Name: Influence | |
Theme URI: http://www.newrainmaker.com | |
Description: Rainmaker template description. | |
Author: New Rainmaker | |
Author URI: http://www.newrainmaker.com | |
Version: 1.0 | |
Tags: default-landing-page | |
*/ | |
/* | |
Imports | |
---------------------------------------------------------------------------------------------------- */ | |
@import url(//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700); | |
/* | |
Defaults | |
---------------------------------------------------------------------------------------------------- */ | |
/* Typographical Elements | |
--------------------------------------------- */ | |
html { | |
font-size: 62.5%; /* 10px browser default */ | |
} | |
body { | |
background-color: #fff; | |
color: #3b5461; | |
font-family: 'Open Sans', Helvetica, Arial, sans-serif; | |
font-size: 18px; | |
font-weight: 400; | |
line-height: 1.625; | |
} | |
a { | |
-webkit-transition: all 0.1s ease-in-out; | |
-moz-transition: all 0.1s ease-in-out; | |
-ms-transition: all 0.1s ease-in-out; | |
-o-transition: all 0.1s ease-in-out; | |
transition: all 0.1s ease-in-out; | |
} | |
a, | |
button, | |
input { | |
outline: none; | |
} | |
::-moz-selection { | |
background-color: #333; | |
color: #fff; | |
} | |
::selection { | |
background-color: #333; | |
color: #fff; | |
} | |
a, | |
a:visited { | |
color: #0274be; | |
} | |
a img { | |
margin-bottom: -4px; | |
} | |
a:hover { | |
color: #3b5461; | |
} | |
p { | |
margin: 0 0 24px; | |
padding: 0; | |
} | |
strong { | |
font-weight: 700; | |
} | |
blockquote { | |
font-family: "Times New Roman", Helvetica, Arial; | |
font-style: italic; | |
font-size: 22px; | |
line-height: 1.5; | |
} | |
blockquote { | |
margin: 30px 0 24px; | |
} | |
blockquote:before { | |
content: "\201C"; | |
display: block; | |
font-family: Helvetica, Arial; | |
font-size: 80px; | |
height: 0; | |
left: -55px; | |
position: relative; | |
top: -35px; | |
width: 20px; | |
} | |
.content code { | |
background-color: #333; | |
color: #ddd; | |
} | |
cite { | |
font-style: normal; | |
font-weight: bold; | |
} | |
small { | |
color: #75909d; | |
} | |
/* Headings | |
--------------------------------------------- */ | |
.site-header h1 a { | |
color: #1b2c34; | |
} | |
.site-header .site-description, | |
h1, | |
h2, | |
h3, | |
h4, | |
h5, | |
h6 { | |
color: #1b2c34; | |
font-weight: 400; | |
line-height: 1.3; | |
margin: 0 0 16px; | |
} | |
h1 { | |
font-size: 56px; | |
font-weight: 300; | |
letter-spacing: -1px; | |
margin-bottom: 32px; | |
} | |
.site-header .site-description { | |
color: #3b5461; | |
font-size: 22px; | |
font-weight: 400; | |
letter-spacing: normal; | |
line-height: 1.625; | |
} | |
h2 { | |
font-size: 36px; | |
font-weight: 300; | |
letter-spacing: -1px; | |
margin-bottom: 24px; | |
} | |
.cta h2, | |
.section-heading h2 { | |
font-size: 48px; | |
font-weight: 300; | |
letter-spacing: -1px; | |
} | |
h3 { | |
font-size: 24px; | |
letter-spacing: -1px; | |
margin-bottom: 20px; | |
} | |
h4 { | |
font-size: 20px; | |
font-weight: 600; | |
} | |
h5 { | |
font-size: 18px; | |
} | |
h6 { | |
font-size: 16px; | |
} | |
.section-heading { | |
margin-bottom: 80px; | |
text-align: center; | |
} | |
/* Forms | |
--------------------------------------------- */ | |
input, | |
select, | |
textarea { | |
background-color: #fff; | |
border: 1px solid #ddd; | |
border-radius: 3px; | |
box-shadow: 1px 1px 3px #eee inset; | |
color: #999; | |
font-size: 14px; | |
padding: 16px; | |
width: 100%; | |
} | |
input:focus, | |
textarea:focus { | |
border: 1px solid #999; | |
outline: none; | |
} | |
::-moz-placeholder { | |
color: #999; | |
opacity: 1; | |
} | |
::-webkit-input-placeholder { | |
color: #999; | |
} | |
a.button, | |
button, | |
input[type="button"], | |
input[type="reset"], | |
input[type="submit"], | |
input.submit { | |
background-color: #0274be; | |
border: none; | |
border-radius: 3px; | |
box-shadow: none; | |
color: #fff !important; | |
cursor: pointer; | |
font-size: 18px; | |
font-weight: 700; | |
padding: 12px 30px; | |
text-decoration: none; | |
width: auto; | |
-webkit-font-smoothing: antialiased; | |
-moz-osx-font-smoothing: grayscale; | |
-webkit-transition: background-color 0.5s ease-in-out; | |
-moz-transition: background-color 0.5s ease-in-out; | |
-ms-transition: background-color 0.5s ease-in-out; | |
-o-transition: background-color 0.5s ease-in-out; | |
transition: background-color 0.5s ease-in-out; | |
} | |
.optinform input[type="submit"], | |
.cta .button, | |
.pricing .signup .button { | |
background-color: #12ad7c; | |
padding: 15px 30px; | |
} | |
.pricing .signup .button { | |
width: 100%; | |
} | |
a.button:hover, | |
button:hover, | |
input:hover[type="button"], | |
input:hover[type="reset"], | |
input:hover[type="submit"], | |
input.submit { | |
background-color: rgba(2,116,190,0.8); | |
} | |
.optinform input[type="submit"]:hover, | |
.cta .button:hover, | |
.pricing .signup .button:hover { | |
background-color: rgba(18,173,124,0.8); | |
} | |
.button { | |
display: inline-block; | |
} | |
input[type="search"]::-webkit-search-cancel-button, | |
input[type="search"]::-webkit-search-results-button { | |
display: none; | |
} | |
/* | |
Structure and Layout | |
---------------------------------------------------------------------------------------------------- */ | |
/* Site Containers | |
--------------------------------------------- */ | |
.wrap, | |
.section-wrap, | |
.single-column .section-heading-wrap { | |
margin: 0 auto; | |
max-width: 960px; | |
position: relative; | |
} | |
.single-column .section-wrap { | |
max-width: 100%; | |
} | |
.single-column .section-heading { | |
padding-top: 96px; | |
} | |
.single-column .module-wrap { | |
margin: 0 auto; | |
max-width: 960px; | |
position: relative; | |
} | |
.section, | |
.site-header { | |
border-bottom: 1px solid #d8e6ed; | |
} | |
.multiple-columns .section-wrap, | |
.single-column .module-wrap, | |
.site-header { | |
padding: 96px 0; | |
} | |
.cta, | |
.site-header { | |
background: #ffffff; /* Old browsers */ | |
background: -moz-radial-gradient(center, ellipse cover, #ffffff 32%, #edf5f9 99%); /* FF3.6+ */ | |
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(32%,#ffffff), color-stop(99%,#edf5f9)); /* Chrome,Safari4+ */ | |
background: -webkit-radial-gradient(center, ellipse cover, #ffffff 32%,#edf5f9 99%); /* Chrome10+,Safari5.1+ */ | |
background: -o-radial-gradient(center, ellipse cover, #ffffff 32%,#edf5f9 99%); /* Opera 12+ */ | |
background: -ms-radial-gradient(center, ellipse cover, #ffffff 32%,#edf5f9 99%); /* IE10+ */ | |
background: radial-gradient(ellipse at center, #ffffff 32%,#edf5f9 99%); /* W3C */ | |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#edf5f9',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ | |
} | |
.site-header .page-logo { | |
margin-bottom: 70px; | |
margin-top: -40px; | |
} | |
.module { | |
margin-bottom: 60px; | |
} | |
.section .module:last-child { | |
margin-bottom: 0; | |
} | |
/* Column Widths and Positions | |
--------------------------------------------- */ | |
.content { | |
width: 100%; | |
} | |
/* Site Header | |
--------------------------------------------- */ | |
.site-header { | |
text-align: center; | |
} | |
/* | |
Common Classes | |
---------------------------------------------------------------------------------------------------- */ | |
/* Titles | |
--------------------------------------------- */ | |
.entry-title { | |
font-size: 36px; | |
line-height: 1; | |
text-align: center; | |
} | |
.entry-subtitle { | |
font-size: 24px; | |
font-size: 2.4rem; | |
text-align: center; | |
} | |
.content .notice { | |
background-color: #ffffe6; | |
margin: 0 16px 16px 16px; | |
overflow: auto; | |
padding: 16px 24px; | |
border: 1px solid #ddd; | |
} | |
/* | |
Landing Page | |
---------------------------------------------------------------------------------------------------- */ | |
/* General | |
--------------------------------------------- */ | |
.separator { | |
border-top: 1px solid #ddd; | |
height: 1px; | |
} | |
.features ul, | |
.features ul li, | |
.testimonials ul, | |
.testimonials ul li, | |
.pricing ul, | |
.pricing ul li { | |
list-style: none; | |
margin: 0; | |
padding: 0; | |
} | |
/* Features | |
--------------------------------------------- */ | |
.features ul li { | |
padding: 20px 0 30px; | |
text-align: center; | |
} | |
.features ul li:last-child { | |
padding-bottom: 0; | |
} | |
.features ul li, | |
.features ul li p { | |
font-size: 16px; | |
} | |
.features ul li .feature-icon { | |
color: #0274be; | |
font-size: 60px; | |
height: auto; | |
margin-bottom: 24px; | |
margin-top: -10px; | |
width: 100%; | |
} | |
.features ul li img { | |
float: left; | |
margin-right: 20px; | |
margin-left: -90px; | |
max-width: 65px; | |
} | |
/* Testimonials | |
--------------------------------------------- */ | |
.testimonials ul li { | |
margin: 0 0 60px; | |
text-align: center; | |
} | |
.testimonials ul li:last-child { | |
margin-bottom: 0; | |
} | |
.testimonials ul li img { | |
border-radius: 50%; | |
max-width: 100px; | |
} | |
/* CTA | |
--------------------------------------------- */ | |
.cta { | |
text-align: center; | |
} | |
.single-column .cta .module-wrap { | |
padding: 96px 0; | |
} | |
/* Video | |
--------------------------------------------- */ | |
.video { | |
text-align: center; | |
} | |
/* Plans & Pricing | |
--------------------------------------------- */ | |
.price-section .price-column { | |
} | |
.single-column.price-section .module-wrap { | |
padding: 0; | |
} | |
.single-column.price-section .section-wrap { | |
padding: 96px 0; | |
} | |
.price-section .price-column.one-third { | |
margin-left: 2%; | |
width: 32%; | |
} | |
.price-section .price-column.one-fourth { | |
margin-left: 0.5%; | |
width: 24.6%; | |
} | |
.price-section .price-column.one-fifth { | |
margin-left: 0.5%; | |
width: 19.6%; | |
} | |
.price-section .price-column.first { | |
margin-left: 0; | |
} | |
.pricing { | |
background: #edf5f9; | |
border-radius: 5px; | |
color: #1e1810; | |
padding: 40px; | |
margin-top: 20px; | |
position: relative; | |
text-align: center; | |
width: 100%; | |
} | |
.full-width .pricing { | |
float: none; | |
margin: 0 auto; | |
padding: 40px; | |
width: 50%; | |
} | |
.one-third .pricing { | |
padding: 30px; | |
} | |
.one-fourth .pricing { | |
padding: 20px; | |
} | |
.one-fifth .pricing { | |
padding: 15px; | |
} | |
.pricing a:hover { | |
color: #1e1810; | |
} | |
.pricing .name { | |
background: #fff; | |
border-radius: 3px; | |
padding: 20px; | |
color: #1b2c34; | |
font-size: 30px; | |
font-weight: bold; | |
line-height: 1.3; | |
margin: -38px -38px 15px; | |
} | |
.price-section .price-column.one-third .name { | |
margin: -28px -28px 15px; | |
} | |
.price-section .price-column.one-fourth .name { | |
font-size: 24px; | |
margin: -18px -18px 15px; | |
} | |
.price-section .price-column.one-fifth .name { | |
font-size: 20px; | |
margin: -13px -13px 15px; | |
} | |
.pricing .price { | |
color: #0274be; | |
font-size: 54px; | |
font-weight: 300; | |
line-height: 1.5; | |
} | |
.pricing .signup small, | |
.pricing .price small { | |
color: #3b5461; | |
font-size: 20px; | |
font-style: italic; | |
opacity: 0.6; | |
} | |
.pricing .price small { | |
display: block; | |
} | |
.pricing .signup small { | |
display: block; | |
font-size: 16px; | |
margin-top: 20px; | |
} | |
.pricing .features { | |
margin: 0 0 20px; | |
} | |
.pricing .features p { | |
border-bottom: 1px solid #d8e6ed; | |
color: #3b5461; | |
font-size: 16px; | |
margin: 0; | |
padding: 15px 0; | |
position: relative; | |
} | |
.pricing.most-popular a { | |
color: #fff !important; | |
} | |
.pricing.most-popular { | |
background: #0274be; | |
color: #fff; | |
margin-top: -5px; | |
} | |
.pricing.most-popular .price, | |
.pricing.most-popular p, | |
.pricing.most-popular small { | |
color: #fff; | |
} | |
.pricing.most-popular p { | |
border-bottom: 1px solid rgba(255,255,255,0.2); | |
} | |
.pricing.most-popular .price { | |
font-weight: 600; | |
} | |
.popular-tag { | |
border-radius: 5px; | |
color: #0274be; | |
display: block; | |
font-size: 13px; | |
font-weight: bold; | |
margin-bottom: 15px; | |
text-align: center; | |
text-transform: uppercase; | |
} | |
.pricing.most-popular .button { | |
border: 2px solid #fff; | |
} | |
.pricing .button { | |
width: 100%; | |
} | |
/* Opt-in form | |
--------------------------------------------- */ | |
.optinform { | |
background: #fff; | |
border: 2px solid #0274be; | |
border-radius: 5px; | |
padding: 40px; | |
text-align: center; | |
-webkit-box-shadow: 0 0 0 5px rgba(0,0,0,0.05); | |
box-shadow: 0 0 0 5px rgba(0,0,0,0.05); | |
} | |
.optinform h3 { | |
background: #0274be; | |
color: #fff; | |
font-weight: 700; | |
padding: 20px 10px; | |
margin: -40px -40px 40px; | |
} | |
.optinform form input { | |
margin-bottom: 10px; | |
} | |
.optinform form input[type=submit] { | |
padding: 14px 10px; | |
width: 100%; | |
} | |
.optinform small { | |
display: block; | |
font-style: italic; | |
} | |
/* Video | |
--------------------------------------------- */ | |
embed, | |
object, | |
video { | |
max-width: 100%; | |
} | |
.video-wrapper { | |
position: relative; | |
padding-bottom: 56.25%; /* 16/9 ratio */ | |
padding-top: 0; /* IE6 workaround*/ | |
height: 0; | |
overflow: hidden; | |
} | |
.video-wrapper iframe, | |
.video-wrapper object, | |
.video-wrapper embed { | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
} | |
.video { | |
background: rgba(2,116, 190,0.7); | |
border-radius: 5px; | |
line-height: 350px; | |
margin: 0 auto 96px !important; | |
position: relative; | |
text-align: center; | |
max-width: 960px; | |
} | |
.video .module-wrap { | |
padding: 0; | |
} | |
.video.small { | |
height: 350px; | |
} | |
.video .video-preview { | |
border-radius: 3px; | |
overflow: hidden; | |
position: absolute; | |
width: 100%; | |
} | |
.video .video-preview img { | |
left: 50%; | |
position: absolute; | |
top: 50%; | |
z-index: -1; | |
} | |
.video button { | |
background: none; | |
border: 2px solid #fff; | |
top: 50%; | |
} | |
.video button:hover { | |
background: rgba(18,173,124,0.8); | |
} | |
/* Social | |
--------------------------------------------- */ | |
.social { | |
text-align: center; | |
} | |
#section_social .section-heading { | |
margin-bottom: -70px; | |
} | |
/* | |
Site Footer | |
---------------------------------------------------------------------------------------------------- */ | |
.site-footer { | |
font-size: 14px; | |
padding: 40px 0; | |
text-align: center; | |
} | |
.site-footer p { | |
margin-bottom: 0; | |
} | |
#premise-final-edit-post-link { | |
clear: both; | |
} | |
/* | |
Media Queries | |
---------------------------------------------------------------------------------------------------- */ | |
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), | |
only screen and (-moz-min-device-pixel-ratio: 1.5), | |
only screen and (-o-min-device-pixel-ratio: 3/2), | |
only screen and (min-device-pixel-ratio: 1.5) { | |
} | |
@media only screen and (max-width: 1024px) { | |
.single-column .section-heading { | |
padding-top: 48px; | |
} | |
.multiple-columns .section-wrap, | |
.single-column .module-wrap, | |
.single-column .cta .module-wrap, | |
.site-header { | |
padding: 48px 0; | |
} | |
.site-header h1, | |
.site-header .site-description, | |
.module-wrap, | |
.section-heading-wrap, | |
.single-column .cta .module-wrap, | |
.price-section .section-wrap { | |
padding-left: 3%; | |
padding-right: 3%; | |
} | |
.section-heading { | |
margin-bottom: 48px; | |
} | |
.optinform .module-wrap, | |
.video .module-wrap, | |
.pricing .module-wrap { | |
padding: 0; | |
} | |
.video { | |
margin: 0 auto; | |
width: 90%; | |
} | |
.optinform { | |
margin: 0 auto; | |
width: 70%; | |
} | |
#section_social .section-heading { | |
margin-bottom: -40px; | |
} | |
} | |
@media only screen and (max-width: 768px) { | |
.site-container .price-section .price-column { | |
float: none; | |
margin-left: 0; | |
padding-left: 3%; | |
padding-right: 3%; | |
width: 100%; | |
} | |
.site-container .pricing.most-popular { | |
margin-top: 60px; | |
} | |
.site-header .page-logo { | |
margin-bottom: 20px; | |
margin-top: -20px; | |
} | |
h1, | |
h2, | |
.cta h2, | |
.section-heading h2, | |
.site-header .site-description { | |
font-size: 40px; | |
margin-bottom: 20px; | |
} | |
.optinform { | |
width: 90%; | |
} | |
.video { | |
line-height: 200px; | |
margin-bottom: 40px !important; | |
} | |
.video.small { | |
height: 200px; | |
} | |
.full-width .pricing { | |
width: 100%; | |
} | |
} | |
@media only screen and (max-width: 360px) { | |
.site-header h1, | |
.site-header .site-description, | |
.module-wrap, | |
.section-heading-wrap, | |
.single-column .cta .module-wrap, | |
.price-section .section-wrap { | |
padding-left: 5%; | |
padding-right: 5%; | |
} | |
body, | |
.site-header .site-description { | |
font-size: 16px; | |
} | |
h1, | |
h2, | |
.cta h2, | |
.section-heading h2, | |
.site-header .site-description { | |
font-size: 32px; | |
} | |
.features ul li { | |
padding: 0 0 20px; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment