<header class="hero _inverse" style=" ">
<div class="row " style="">
<div class="col _span-12 " style="">
<h1 class=" " style="max-width: 44rem;">
A Social Business Platform to Power the Enterprise of Power.
</h1>
<div class="centeredblock " style="">
<button class="button _large ">
Start Your Free Trial
</button>
<p id="" class="fineprint " style="">No credit card required. No software to install.</p>
</div>
</div>
</div>
</header>
<header class="hero {{modifier}}" style="{{#if background}}background-image: url({{background}});{{/if}} {{style}}">
{{> @children}}
</header>
{
"background": null,
"style": null,
"children": [
{
"component": "row",
"context": {
"children": [
{
"component": "column",
"context": {
"span": 12,
"children": [
{
"component": "heading",
"context": {
"text": "A Social Business Platform to Power the Enterprise of Power.",
"level": 1,
"style": "max-width: 44rem;"
}
},
{
"component": "centeredblock",
"context": {
"children": [
{
"component": "button",
"context": {
"modifier": "_large",
"text": "Start Your Free Trial"
}
},
{
"component": "fineprint",
"context": {
"text": "No credit card required. No software to install."
}
}
]
}
}
]
}
}
]
}
}
],
"modifier": "_inverse"
}
@import "../../Axioms";
.hero {
@include hero;
&._angled {
&._bottom + .hero,
&._bottom + .section {
@include angle(before);
}
}
&._light {
background-color: theme-color(background-hero, light);
}
&._dark {
background-color: theme-color(background-hero, dark);
}
&._overlay {
@include background-overlay(theme-color(main, dark), .6);
}
&._centercontent {
@include hero-alignment("center");
}
&._left {
@include hero-alignment("left");
}
&._split {
background-color: get-color(aqua, 600);
background-image: linear-gradient(to bottom, get-color(aqua, 600) 50%, get-color(aqua, 800) 50%);
}
&._tall {
@include hero-size(12vh, 12vh);
&:not(._centercontent) {
@include hero-alignment("left");
}
}
&._inverse {
h1,
h2,
h3,
h4,
p,
ul,
li {
color: theme-color(text);
}
}
.certified {
display: flex;
margin-top: 1.5rem;
align-items: center;
text-align: right;
pointer-events: none;
p {
margin-top: 0; // To fight against the _tall hero's strict margins
margin-right: 0; // To fight against the _tall hero's strict margins
margin-left: auto; // To fight against the _tall hero's strict margins
}
&::after,
p,
strong {
color: rgba(get-color(neutral, 0), .8);
}
&::after {
@include font-size-head;
margin-left: .75rem;
}
}
@media #{$mobile-media} {
background-image: none !important;
&._centercontent {
@include hero-alignment("left"); // only center on big screens
}
&._features {
background-color: theme-color(background, dark);
}
}
@media #{$desktop-media} {
&._split {
background: url("//media.sproutsocial.com/uploads/desktop-1@2x-1.png") no-repeat center center, linear-gradient(to right, get-color(aqua, 600) 50%, get-color(aqua, 800) 50%);
background-size: 25% auto, cover;
}
.certified {
position: absolute;
right: 1.5rem;
bottom: 3rem;
text-shadow: 1px 1px 2px get-color(neutral, 500);
}
}
@media screen and (min-width: 980px) {
&._split {
background: url("//media.sproutsocial.com/uploads/desktop-1@2x-1.png") no-repeat center center, linear-gradient(to right, get-color(aqua, 600) 50%, get-color(aqua, 800) 50%);
background-size: 336px 307px, cover;
}
}
}
There are no notes for this item.