app/assets/stylesheets/responsive/alaveteli_pro/_pro_marketing.scss
//@include grid-column($columns: 12, $collapse: true);
.marketing__section {
@include grid-row;
margin-bottom: 5em;
margin-top: 2em;
}
.marketing__hero {
@include grid-column($columns: 12);
text-align: center;
h1 {
@include respond-min(31.25em) {
font-size: 3.5em;
}
line-height: 1.35em;
sup {
font-size: 0.4em;
top: -0.8em;
}
strong {
font-weight: 600;
}
}
h2 {
font-weight: normal;
color: rgba(0,0,0,0.6)
}
}
.marketing__hero__cta {
padding: 2em 0 1em;
max-width: 25em;
margin: 1.5em auto 0;
h3 {
text-transform: uppercase;
font-size: 1em;
font-weight: bold;
}
.button {
padding: 1em 1.75em;
cursor: pointer;
}
}
.marketing__subhead {
max-width: 33em;
margin: 0 auto;
}
.marketing__section__heading {
@include grid-column($columns: 12);
@include respond-min($main_menu-mobile_menu_cutoff) {
@include grid-column($columns: 4);
h2 {
border-top: 2px solid #7F7E7C;
margin-top: 0;
padding-top: 0.66em;
}
sup {
font-size: 0.5625em;
}
}
}
.marketing__section__content {
@include grid-column($columns: 12);
@include respond-min($main_menu-mobile_menu_cutoff) {
@include grid-column($columns: 8);
}
h3 {
font-size: 1.125em;
font-weight: normal;
}
.screenshots {
margin: 1em 0 3em;
img {
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
border: 1px solid #DCDAD5;
border-radius: 3px;
}
}
}
.marketing__section__content-items {
//this is purely used to add the top border so it stays within the grid gutters
//that's why it's here and not on .marketing__section__content
border-top: 1px solid #DCDAD5;
}
.marketing__section__more-info {
padding-top: 1em;
ul {
list-style: none outside none;
padding-left: 0;
}
h3 {
}
}
.marketing__section__feature-list {
list-style: none outside none;
font-size: 1.125em;
padding-left: 0;
margin-top: 0;
li {
border-bottom: 1px solid #DCDAD5;
padding: 1em 0;
margin-top: 0;
}
}
.marketing-highlight {
position: relative;
display: inline-block;
font-weight: normal;
&:before {
content:"";
height: 100%;
width: 100%;
display: block;
position: absolute;
top:0;
right: 0;
bottom: 0;
left: 0;
background-color: #faf785;
transform: rotate(random(2) - 2 + deg);
z-index: -1;
}
}
label.input-account-request-button {
color: white;
text-decoration: none;
}
.input-account-request-button {
margin-top: 2em;
}
.account-request-signup-form {
label {
font-size: 1em;
}
input[type="text"],
input[type="email"],
textarea {
width: 100%;
}
input[type="radio"] {
margin-right: 0.35em;
}
.fieldWithErrors{
display: inline;
}
}
.inline-elements {
display: flex;
}
.inline-element {
width: auto;
margin-right: 1.35em;
}
.side-by-side-elements {
margin-top: 1em;
overflow: hidden;
}
.side-by-side-element {
width: 50%;
float: left;
&:nth-child(even) {
padding-left: 0.85em;
}
&:nth-child(odd) {
padding-right: 0.85em;
}
margin-bottom: 1em;
}
.marketing__roles {
text-align: center;
h2 {
max-width: 22em;
text-align: center;
margin: 0 auto 1em;
}
a {
text-decoration: none;
&:hover,
&:active,
&:focus {
text-decoration: underline;
}
}
p {
padding: 0 0.5em;
}
a h3 {
color: #5A7687;
&:hover,
&:active,
&:focus {
color: #333;
}
}
}
.marketing__roles__columns div {
@include grid-column($columns: 12);
@include respond-min($main_menu-mobile_menu_cutoff) {
@include grid-column($columns: 4);
}
img {
max-height: 160px;
}
}
.marketing__features {
margin-top: 1em;
h3 {
font-size: 1em;
line-height: 1.5em;
}
p { }
img {
max-width: 110px;
max-height: 64px;
}
}
.marketing__feature {
@include grid-column($columns: 6);
@include respond-min($main_menu-mobile_menu_cutoff) {
@include grid-column($columns: 3);
}
}
.marketing__pricing__grid {
@include grid-column($columns: 12);
@include respond-min($main_menu-mobile_menu_cutoff) {
@include grid-column($columns: 4);
}
}
.bb-0 {
border-bottom: 0 !important;
}
.marketing__testimonials,
.marketing__how-it-works {
h2 {
@include grid-column($columns: 12);
}
}
.how-it-works__item {
@include grid-column($columns: 12);
@include respond-min($main_menu-mobile_menu_cutoff) {
@include grid-column($columns: 6);
}
}
.marketing__cta {
text-align: center;
margin-top: 2em;
}
.testimonials__item {
@include grid-column($columns: 12);
@include respond-min($main_menu-mobile_menu_cutoff) {
@include grid-column($columns: 6);
}
img {
margin-bottom: 1em;
}
}
.testimonials__body {
background-color: #fff;
p {
padding: 0.5em 1.5em 1.5em;
}
}
.marketing__tweets {
}
.marketing__tweet {
@include grid-column($columns: 12);
@include respond-min($main_menu-mobile_menu_cutoff) {
@include grid-column($columns: 6);
}
}
.tweet__body {
background-color: rgba(0,0,0,0.1);
padding: 1em 1.5em;
position: relative;
margin-bottom: 1.5em;
@include respond-min($main_menu-mobile_menu_cutoff) {
margin-bottom: 0;
}
cite {
display: block;
margin-top: 0.5em;
}
&:before {
content:" ";
display: block;
position: absolute;
width: 0;
height: 0;
border-top: 1em solid rgba(0,0,0,0.1);
border-right: 1em solid transparent;
bottom: -1em;
}
}
.image-credits {
@include grid-column($columns: 12);
}