Skip to content

Instantly share code, notes, and snippets.

@jasonhobbsllc
Created May 2, 2017 22:03
Show Gist options
  • Save jasonhobbsllc/49cb2cad312ce9793b0d14a7b496de00 to your computer and use it in GitHub Desktop.
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.
/*
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