No notes defined.
<div class="messagePageHeader">
<div class="messagePageHeader-image"></div>
<div class="wrapper">
<h1 class="messagePageHeader-title">I am the title of the page</h1>
<div class="messagePageHeader-kicker">
I am a subheading
</div>
<div class="messagePageHeader-message">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
<div class="messagePageHeader-ctas">
<a href="#" class="button"><span class="button-label">Click this!</span></a>
<a href="#" class="button is-secondary"><span class="button-label">Or that!</span></a>
</div>
</div>
</div>
<div class="messagePageHeader{{#modifier}} {{.}}{{/modifier}}"{{#type}} data-type="{{.}}"{{/type}}>
<div class="messagePageHeader-image"></div>
<div class="wrapper">
<h1 class="messagePageHeader-title">{{{title}}}</h1>
{{#kicker}}
<div class="messagePageHeader-kicker">
{{{.}}}
</div>
{{/kicker}}
{{#message}}
<div class="messagePageHeader-message">
{{{.}}}
</div>
{{/message}}
{{#if ctas}}
<div class="messagePageHeader-ctas">
{{#ctas}}
{{render '@button--link' (contextData '@messagepageheader' this) merge=true}}
{{/ctas}}
</div>
{{/if}}
</div>
</div>
{
"title": "I am the title of the page",
"kicker": "I am a subheading",
"message": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n",
"ctas": [
{
"label": "Click this!"
},
{
"label": "Or that!",
"modifier": "is-secondary"
}
]
}
@import "_messagePageHeader.settings";
@import "_messagePageHeader.styles";
$messagePageHeader_backdrop: '<svg width="1680" height="1680" viewBox="0 0 1680 1680" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="840" cy="840" r="610" fill="#7e9320"/><circle cx="840" cy="840" r="400" fill="#99b326"/><circle cx="840" cy="840" r="250" fill="#cde563"/></svg>' !default;
$messagePageHeader_picto_stroke-width: 2px;
$messagePageHeader_pictos: (
default: '<svg width="48" height="48" viewBox="0 0 48 48" fill="none" stroke="{{color}}" stroke-width="#{$messagePageHeader_picto_stroke-width}" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M18 21H30M18 27H30M8.46563 43.1456C8.24715 43.3294 7.98076 43.447 7.69774 43.4847C7.41473 43.5223 7.12686 43.4784 6.86794 43.3581C6.60902 43.2378 6.38981 43.0461 6.23606 42.8055C6.08232 42.565 6.00042 42.2855 6 42V12C6 11.6022 6.15804 11.2206 6.43934 10.9393C6.72064 10.658 7.10218 10.5 7.5 10.5H40.5C40.8978 10.5 41.2794 10.658 41.5607 10.9393C41.842 11.2206 42 11.6022 42 12V36C42 36.3978 41.842 36.7794 41.5607 37.0607C41.2794 37.342 40.8978 37.5 40.5 37.5H15.4688C15.1154 37.5001 14.7734 37.6249 14.5031 37.8525L8.46563 43.1456Z"/></svg>',
congrats: '<svg width="48" height="48" viewBox="0 0 48 48" fill="none" stroke="{{color}}" stroke-width="#{$messagePageHeader_picto_stroke-width}" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M6.32081 32.0586L9.23168 40.7912M11.5692 17.1775L18.4225 37.7477M23.5302 22.4272L27.5645 34.5201M17.402 8.12817L19.4448 3.02136M39.8719 30.5981L44.9786 28.5554M35.7864 24.4699C38.6054 24.4699 40.8932 22.1821 40.8932 19.3631C40.8932 16.5442 43.1811 14.2563 46 14.2563M23.5302 12.2136C23.5302 9.39465 25.818 7.10681 28.637 7.10681C31.4559 7.10681 33.7437 4.81896 33.7437 2M27.5638 20.4356L35.7857 12.2136M2.08136 44.0598L12.5196 14.4812C12.8873 13.4292 14.2253 13.1227 15.0219 13.9194L34.0906 32.9882C34.8771 33.7747 34.5707 35.1126 33.5289 35.4905L3.94022 45.9186C3.40912 46.1025 2.81673 45.9697 2.42862 45.5714C2.03029 45.1731 1.89751 44.5807 2.08136 44.0598ZM44.9786 6.08544C44.9786 7.77769 43.6068 9.14953 41.9146 9.14953C40.2223 9.14953 38.8505 7.77769 38.8505 6.08544C38.8505 4.3932 40.2223 3.02136 41.9146 3.02136C43.6068 3.02136 44.9786 4.3932 44.9786 6.08544Z"/></svg>',
check-email: '<svg width="48" height="48" viewBox="0 0 48 48" fill="none" stroke="{{color}}" stroke-width="#{$messagePageHeader_picto_stroke-width}" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M25.6223 12.4659H43.4214C44.8461 12.4659 46 13.6209 46 15.0445V36.2735C46 37.6981 44.8451 38.8521 43.4214 38.8521H14.193C12.7684 38.8521 11.6145 37.6971 11.6145 36.2735V25.4792M45.1408 13.3251L28.8072 28.7985L21.2269 21.6667M11.6135 5.99845V11.9702M11.6135 15.2699V16.2295M21.2269 11.1135C21.2269 16.4228 16.9228 20.7269 11.6135 20.7269C6.3041 20.7269 2 16.4228 2 11.1135C2 5.8041 6.3041 1.5 11.6135 1.5C16.9228 1.5 21.2269 5.8041 21.2269 11.1135Z"/></svg>',
success: '<svg width="48" height="48" viewBox="0 0 48 48" fill="none" stroke="{{color}}" stroke-width="#{$messagePageHeader_picto_stroke-width}" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M32 19L23.86 29.852C23.7283 30.0276 23.5603 30.1729 23.3676 30.2781C23.1749 30.3832 22.9618 30.4458 22.7428 30.4615C22.5239 30.4773 22.304 30.4458 22.0983 30.3693C21.8925 30.2928 21.7055 30.173 21.55 30.018L16.666 25.132"/><path d="M21.4 2.24201C21.712 1.85215 22.1076 1.53744 22.5577 1.32117C23.0078 1.1049 23.5007 0.992615 24 0.992615C24.4993 0.992615 24.9923 1.1049 25.4423 1.32117C25.8924 1.53744 26.288 1.85215 26.6 2.24201L29.69 6.08801C30.0405 6.52411 30.4953 6.86485 31.0123 7.07878C31.5293 7.29271 32.0918 7.37292 32.648 7.31201L37.552 6.77801C38.0471 6.72524 38.5478 6.78404 39.0173 6.95011C39.4867 7.11617 39.913 7.38528 40.2648 7.73767C40.6166 8.09006 40.885 8.51677 41.0503 8.98648C41.2156 9.45619 41.2736 9.95696 41.22 10.452L40.686 15.354C40.6255 15.9104 40.7061 16.473 40.9204 16.9899C41.1347 17.5069 41.4757 17.9616 41.912 18.312L45.756 21.4C46.1455 21.7122 46.4599 22.1079 46.676 22.558C46.892 23.008 47.0042 23.5008 47.0042 24C47.0042 24.4992 46.892 24.992 46.676 25.4421C46.4599 25.8921 46.1455 26.2878 45.756 26.6L41.912 29.69C41.4757 30.04 41.1347 30.4943 40.9204 31.011C40.7061 31.5276 40.6255 32.09 40.686 32.646L41.22 37.55C41.2741 38.0454 41.2164 38.5467 41.051 39.0168C40.8856 39.487 40.6168 39.914 40.2644 40.2664C39.912 40.6188 39.485 40.8876 39.0148 41.053C38.5447 41.2184 38.0434 41.2761 37.548 41.222L32.644 40.688C32.0877 40.6279 31.5252 40.7087 31.0083 40.9229C30.4914 41.1372 30.0367 41.478 29.686 41.914L26.6 45.754C26.288 46.1439 25.8924 46.4586 25.4423 46.6749C24.9923 46.8911 24.4993 47.0034 24 47.0034C23.5007 47.0034 23.0078 46.8911 22.5577 46.6749C22.1076 46.4586 21.712 46.1439 21.4 45.754L18.314 41.91C17.9633 41.474 17.5086 41.1332 16.9917 40.9189C16.4748 40.7047 15.9123 40.6239 15.356 40.684L10.452 41.218C9.95658 41.2721 9.45532 41.2144 8.98518 41.049C8.51505 40.8836 8.08804 40.6148 7.73564 40.2624C7.38323 39.91 7.11442 39.483 6.94903 39.0128C6.78363 38.5427 6.72587 38.0414 6.78 37.546L7.314 32.642C7.37452 32.086 7.29391 31.5236 7.07963 31.007C6.86534 30.4903 6.5243 30.036 6.088 29.686L2.244 26.6C1.85447 26.2878 1.54007 25.8921 1.32402 25.4421C1.10797 24.992 0.995804 24.4992 0.995804 24C0.995804 23.5008 1.10797 23.008 1.32402 22.558C1.54007 22.1079 1.85447 21.7122 2.244 21.4L6.088 18.312C6.52432 17.9616 6.86534 17.5069 7.07961 16.9899C7.29388 16.473 7.37449 15.9104 7.314 15.354L6.78 10.452C6.72631 9.95659 6.78436 9.45543 6.94988 8.9854C7.11541 8.51536 7.38419 8.08841 7.73646 7.73595C8.08873 7.38348 8.51554 7.11447 8.98548 6.94869C9.45542 6.78292 9.95655 6.72459 10.452 6.77801L15.356 7.31201C15.9122 7.37292 16.4747 7.29271 16.9917 7.07878C17.5087 6.86485 17.9635 6.52411 18.314 6.08801L21.4 2.24201Z"/></svg>',
) !default;
%messagePageHeader {
$box-padding: var(--sp-component);
$margin-top: 400px;
$image_height: (1.5 * $margin-top);
$picto_size: 192px;
margin-top: $margin-top;
text-align: center;
position: relative;
&-image {
width: calc(100vw + 1px); // Fix backdrop offset on odd screen resolutions
max-width: $_page_max-width;
height: $image_height;
position: absolute;
top: (-1 * $margin-top);
left: 50%;
z-index: -1;
transform: translateX(-50%);
overflow: hidden;
&::before { // Backdrop
content: "";
display: block;
width: 100%;
height: 133.33%;
position: absolute;
top: 0;
left: 0;
transform: translateY(-25%);
background: $_spot-primary-accent-color svg-url($messagePageHeader_backdrop) center center no-repeat;
}
&::after { // Picto
content: "";
display: block;
width: $picto_size;
height: $picto_size;
position: absolute;
top: 33.33%;
left: 50%;
transform: translate(-50%, -50%);
background: $_text-color svg-url(map.get($messagePageHeader_pictos, default), $_white) center center no-repeat;
background-size: 96px 96px;
border-radius: 100vmax;
}
}
@each $name, $data in $messagePageHeader_pictos {
@if $name != "default" { // Picto
&[data-type="#{$name}"] &-image::after {
background-image: svg-url(map.get($messagePageHeader_pictos, $name), $_white);
}
}
}
> .wrapper {
$shadow-blur: 50px;
padding: $box-padding;
position: relative;
&::before,
&::after {
content: "";
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
min-height: ($image_height - $margin-top);
z-index: -1;
}
&::before { // Shadow
height: calc(100% - #{$shadow-blur});
box-shadow: 0px (-.125 * $shadow-blur) (.25 * $shadow-blur) 0px rgba($_box-shadow_color, .05), 0px (-.5 * $shadow-blur) $shadow-blur 0px rgba($_box-shadow_color, .1);
}
&::after { // Box
min-height: ($image_height - $margin-top + $shadow-blur);
background-color: $_page-color;
border-radius: var(--br-large) var(--br-large) 0 0;
}
}
&-title {
@extend %sectionTitle;
@include stack-spacing(0);
@include stack-spacing(component, margin-bottom);
}
&-kicker {
@extend %heading--subheading;
}
&-message {
margin-top: var(--sp) !important;
> *:first-child {
@include stack-spacing(0);
}
}
&-ctas {
@extend %buttonGroup;
justify-content: center;
.button {
@extend %button--large;
}
}
@include not-on-desktop(){
$margin-top: 56.25vw;
$image_height: (1.5 * $margin-top);
$picto_size: 96px;
margin-top: $margin-top;
> .wrapper {
min-height: calc(#{$image_height - $margin-top} - var(--pp));
&::before,
&::after {
height: 100%;
min-height: 0;
}
&::before { // Shadow
@include box-shadow(large);
opacity: .25;
}
&::after { // Box
border-radius: var(--br-large);
}
}
&-image {
height: $image_height;
top: (-1 * $margin-top);
&::before { // Backdrop
background-size: 840px;
}
&::after { // Picto
width: $picto_size;
height: $picto_size;
background-size: (.5 * $picto_size);
}
}
}
@include only-on-desktop(){
width: get-columns-width(8);
margin-left: auto;
margin-right: auto;
> .wrapper {
margin-left: calc(-1 * $box-padding);
margin-right: calc(-1 * $box-padding);
padding-bottom: 0;
}
}
}
.messagePageHeader {
@extend %messagePageHeader;
&-image {
@extend %messagePageHeader-image;
}
&-title {
@extend %messagePageHeader-title;
}
&-kicker {
@extend %messagePageHeader-kicker;
}
&-message {
@extend %messagePageHeader-message;
}
&-ctas {
@extend %messagePageHeader-ctas;
}
}