/**
* Base CSS used by the builder's layout, including rows
* and columns. Any module specific global CSS should be
* included in fl-builder-layout-modules.css.
*/
/* Grid
------------------------------------------------------ */
.fl-builder-content *,
.fl-builder-content *:before,
.fl-builder-content *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.fl-row:before,
.fl-row:after,
.fl-row-content:before,
.fl-row-content:after,
.fl-col-group:before,
.fl-col-group:after,
.fl-col:before,
.fl-col:after,
.fl-module:not([data-accepts]):before,
.fl-module:not([data-accepts]):after,
.fl-module-content:before,
.fl-module-content:after {
display: table;
content: " ";
}
.fl-row:after,
.fl-row-content:after,
.fl-col-group:after,
.fl-col:after,
.fl-module:not([data-accepts]):after,
.fl-module-content:after {
clear: both;
}
.fl-clear {
clear: both;
}
/* Rows
------------------------------------------------------ */
.fl-row,
.fl-row-content {
margin-left: auto;
margin-right: auto;
min-width: 0;
}
.fl-row-content-wrap {
position: relative;
}
/* Photo Bg */
.fl-builder-mobile .fl-row-bg-photo .fl-row-content-wrap {
background-attachment: scroll;
}
/* Video and Embed Code Bg */
.fl-row-bg-video,
.fl-row-bg-video .fl-row-content,
.fl-row-bg-embed,
.fl-row-bg-embed .fl-row-content {
position: relative;
}
.fl-row-bg-video .fl-bg-video,
.fl-row-bg-embed .fl-bg-embed-code {
bottom: 0;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
}
.fl-row-bg-video .fl-bg-video video,
.fl-row-bg-embed .fl-bg-embed-code video {
bottom: 0;
left: 0px;
max-width: none;
position: absolute;
right: 0;
top: 0px;
}
.fl-row-bg-video .fl-bg-video video {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}
.fl-row-bg-video .fl-bg-video iframe,
.fl-row-bg-embed .fl-bg-embed-code iframe {
pointer-events: none;
width: 100vw;
height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
max-width: none;
min-height: 100vh;
min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%); /* IE 9 */
-webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */
transform: translate(-50%, -50%);
}
.fl-bg-video-fallback {
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
bottom: 0px;
left: 0px;
position: absolute;
right: 0px;
top: 0px;
}
/* Slideshow Bg */
.fl-row-bg-slideshow,
.fl-row-bg-slideshow .fl-row-content {
position: relative;
}
.fl-row .fl-bg-slideshow {
bottom: 0;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
z-index: 0;
}
.fl-builder-edit .fl-row .fl-bg-slideshow * {
bottom: 0;
height: auto !important;
left: 0;
position: absolute !important;
right: 0;
top: 0;
}
/* Row Bg Overlay */
.fl-row-bg-overlay .fl-row-content-wrap:after {
border-radius: inherit;
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
}
.fl-row-bg-overlay .fl-row-content {
position: relative;
z-index: 1;
}
/* Full Height Rows */
.fl-row-default-height .fl-row-content-wrap,
.fl-row-custom-height .fl-row-content-wrap {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
min-height: 100vh;
}
.fl-row-overlap-top .fl-row-content-wrap {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -moz-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
width: 100%;
}
.fl-row-default-height .fl-row-content-wrap,
.fl-row-custom-height .fl-row-content-wrap {
min-height: 0;
}
.fl-row-default-height .fl-row-content,
.fl-row-full-height .fl-row-content,
.fl-row-custom-height .fl-row-content {
-webkit-box-flex: 1 1 auto;
-moz-box-flex: 1 1 auto;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
.fl-row-default-height .fl-row-full-width.fl-row-content,
.fl-row-full-height .fl-row-full-width.fl-row-content,
.fl-row-custom-height .fl-row-full-width.fl-row-content {
max-width: 100%;
width: 100%;
}
/* Full height align center */
.fl-row-default-height.fl-row-align-center .fl-row-content-wrap,
.fl-row-full-height.fl-row-align-center .fl-row-content-wrap,
.fl-row-custom-height.fl-row-align-center .fl-row-content-wrap {
-webkit-align-items: center;
-webkit-box-align: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-align: center;
-ms-flex-pack: center;
justify-content: center;
align-items: center;
}
/* Full height align bottom */
.fl-row-default-height.fl-row-align-bottom .fl-row-content-wrap,
.fl-row-full-height.fl-row-align-bottom .fl-row-content-wrap,
.fl-row-custom-height.fl-row-align-bottom .fl-row-content-wrap {
-webkit-align-items: flex-end;
-webkit-justify-content: flex-end;
-webkit-box-align: end;
-webkit-box-pack: end;
-ms-flex-align: end;
-ms-flex-pack: end;
justify-content: flex-end;
align-items: flex-end;
}
/* Column Groups
------------------------------------------------------ */
.fl-col-group-equal-height {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.fl-col-group-equal-height.fl-col-group-has-child-loading {
flex-wrap: nowrap;
}
.fl-col-group-equal-height .fl-col,
.fl-col-group-equal-height .fl-col-content {
display: flex;
flex: 1 1 auto;
}
.fl-col-group-equal-height .fl-col-content {
flex-direction: column;
flex-shrink: 1;
min-width: 1px;
max-width: 100%;
width: 100%;
}
.fl-col-group-equal-height:before,
.fl-col-group-equal-height .fl-col:before,
.fl-col-group-equal-height .fl-col-content:before,
.fl-col-group-equal-height:after,
.fl-col-group-equal-height .fl-col:after,
.fl-col-group-equal-height .fl-col-content:after{
content: none;
}
/* Equal height align top */
.fl-col-group-nested.fl-col-group-equal-height.fl-col-group-align-top .fl-col-content,
.fl-col-group-equal-height.fl-col-group-align-top .fl-col-content {
justify-content: flex-start;
}
/* Equal height align center */
.fl-col-group-nested.fl-col-group-equal-height.fl-col-group-align-center .fl-col-content,
.fl-col-group-equal-height.fl-col-group-align-center .fl-col-content {
justify-content: center;
}
/* Equal height align bottom */
.fl-col-group-nested.fl-col-group-equal-height.fl-col-group-align-bottom .fl-col-content,
.fl-col-group-equal-height.fl-col-group-align-bottom .fl-col-content {
justify-content: flex-end;
}
.fl-col-group-equal-height.fl-col-group-align-center .fl-col-group {
width: 100%;
}
/* Columns
------------------------------------------------------ */
.fl-col {
float: left;
min-height: 1px;
}
/* Column Bg Overlay */
.fl-col-bg-overlay .fl-col-content {
position: relative;
}
.fl-col-bg-overlay .fl-col-content:after {
border-radius: inherit;
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
}
.fl-col-bg-overlay .fl-module {
position: relative;
z-index: 2;
}
/* Templates
------------------------------------------------------ */
.single:not(.woocommerce).single-fl-builder-template .fl-content {
width: 100%;
}
/* Shapes & Patterns
------------------------------------------------------- */
.fl-builder-layer {
position: absolute;
top:0;
left:0;
right: 0;
bottom: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
.fl-builder-shape-layer {
z-index: 0;
}
.fl-builder-shape-layer.fl-builder-bottom-edge-layer {
z-index: 1;
}
.fl-row-bg-overlay .fl-builder-shape-layer {
z-index: 1;
}
.fl-row-bg-overlay .fl-builder-shape-layer.fl-builder-bottom-edge-layer {
z-index: 2;
}
.fl-row-has-layers .fl-row-content {
z-index: 1;
}
.fl-row-bg-overlay .fl-row-content {
z-index: 2;
}
.fl-builder-layer > * {
display: block;
position: absolute;
top:0;
left:0;
width: 100%;
}
.fl-builder-layer + .fl-row-content {
position: relative;
}
.fl-builder-layer .fl-shape {
fill: #aaa;
stroke: none;
stroke-width: 0;
width:100%;
}
/**
Fix ipad parallax issue on safari
https://core.trac.wordpress.org/ticket/48802
https://core.trac.wordpress.org/ticket/49285
https://github.com/WordPress/gutenberg/issues/17718
*/
@supports (-webkit-touch-callout: inherit) {
.fl-row.fl-row-bg-parallax .fl-row-content-wrap,
.fl-row.fl-row-bg-fixed .fl-row-content-wrap {
background-position: center !important;
background-attachment: scroll !important;
}
}
@supports (-webkit-touch-callout: none) {
.fl-row.fl-row-bg-fixed .fl-row-content-wrap {
background-position: center !important;
background-attachment: scroll !important;
}
}
/**
* Base CSS used by all (or many) modules. This file should
* not contain any generic layout CSS that doesn't apply to
* modules. That belongs in fl-builder-layout.css.
*/
/* Utilities
------------------------------------------------------ */
.fl-clearfix:before,
.fl-clearfix:after {
display: table;
content: " ";
}
.fl-clearfix:after {
clear: both;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
/* Buttons
------------------------------------------------------ */
.fl-builder-content .fl-button:is(a, button),
.fl-builder-content a.fl-button:visited {
border-radius: 4px;
display: inline-block;
font-size: 16px;
font-weight: normal;
line-height: 18px;
padding: 12px 24px;
text-decoration: none;
text-shadow: none;
}
.fl-builder-content .fl-button:hover {
text-decoration: none;
}
.fl-builder-content .fl-button:active {
position: relative;
top: 1px;
}
.fl-builder-content .fl-button-width-full .fl-button {
width: 100%;
display: block;
text-align: center;
}
.fl-builder-content .fl-button-width-custom .fl-button {
display: inline-block;
text-align: center;
max-width: 100%;
}
.fl-builder-content .fl-button-left {
text-align: left;
}
.fl-builder-content .fl-button-center {
text-align: center;
}
.fl-builder-content .fl-button-right {
text-align: right;
}
.fl-builder-content .fl-button i {
font-size: 1.3em;
height: auto;
margin-right:8px;
vertical-align: middle;
width: auto;
}
.fl-builder-content .fl-button i.fl-button-icon-after {
margin-left: 8px;
margin-right: 0;
}
.fl-builder-content .fl-button-has-icon .fl-button-text {
vertical-align: middle;
}
/* Icons
------------------------------------------------------ */
.fl-icon-wrap {
display: inline-block;
}
.fl-icon {
display: table-cell;
vertical-align: middle;
}
.fl-icon a {
text-decoration: none;
}
.fl-icon i {
float: right;
height: auto;
width: auto;
}
.fl-icon i:before {
border: none !important;
height: auto;
width: auto;
}
.fl-icon-text {
display: table-cell;
text-align: left;
padding-left: 15px;
vertical-align: middle;
}
.fl-icon-text-empty {
display: none;
}
.fl-icon-text *:last-child {
margin: 0 !important;
padding: 0 !important;
}
.fl-icon-text a {
text-decoration: none;
}
.fl-icon-text span {
display: block;
}
.fl-icon-text span.mce-edit-focus {
min-width: 1px;
}
/* Photos
------------------------------------------------------ */
.fl-module img {
max-width: 100%;
}
.fl-photo {
line-height: 0;
position: relative;
}
.fl-photo-align-left {
text-align: left;
}
.fl-photo-align-center {
text-align: center;
}
.fl-photo-align-right {
text-align: right;
}
.fl-photo-content {
display: inline-block;
line-height: 0;
position: relative;
max-width: 100%;
}
.fl-photo-img-svg {
width: 100%;
}
.fl-photo-content img {
display: inline;
height: auto;
max-width: 100%;
}
.fl-photo-crop-circle img {
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
}
.fl-photo-caption {
font-size: 13px;
line-height: 18px;
overflow: hidden;
text-overflow: ellipsis;
}
.fl-photo-caption-below {
padding-bottom: 20px;
padding-top: 10px;
}
.fl-photo-caption-hover {
background: rgba(0,0,0,0.7);
bottom: 0;
color: #fff;
left: 0;
opacity: 0;
filter: alpha(opacity = 0);
padding: 10px 15px;
position: absolute;
right: 0;
-webkit-transition:opacity 0.3s ease-in;
-moz-transition:opacity 0.3s ease-in;
transition:opacity 0.3s ease-in;
}
.fl-photo-content:hover .fl-photo-caption-hover {
opacity: 100;
filter: alpha(opacity = 100);
}
/* Pagination
------------------------------------------------------ */
.fl-builder-pagination,
.fl-builder-pagination-load-more {
padding: 40px 0;
}
.fl-builder-pagination ul.page-numbers {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
.fl-builder-pagination li {
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
}
.fl-builder-pagination li a.page-numbers,
.fl-builder-pagination li span.page-numbers {
border: 1px solid #e6e6e6;
display: inline-block;
padding: 5px 10px;
margin: 0 0 5px;
}
.fl-builder-pagination li a.page-numbers:hover,
.fl-builder-pagination li span.current {
background: #f5f5f5;
text-decoration: none;
}
/* Slideshows
------------------------------------------------------ */
.fl-slideshow,
.fl-slideshow * {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.fl-slideshow .fl-slideshow-image img {
max-width: none !important;
}
.fl-slideshow-social {
line-height: 0 !important;
}
.fl-slideshow-social * {
margin: 0 !important;
}
/* Sliders
------------------------------------------------------ */
.fl-builder-content .bx-wrapper .bx-viewport {
background: transparent;
border: none;
box-shadow: none;
left: 0;
}
/* Lightbox
------------------------------------------------------ */
.mfp-wrap button.mfp-arrow,
.mfp-wrap button.mfp-arrow:active,
.mfp-wrap button.mfp-arrow:hover,
.mfp-wrap button.mfp-arrow:focus {
background: transparent !important;
border: none !important;
outline: none;
position: absolute;
top: 50%;
box-shadow: none !important;
}
.mfp-wrap .mfp-close,
.mfp-wrap .mfp-close:active,
.mfp-wrap .mfp-close:hover,
.mfp-wrap .mfp-close:focus {
background: transparent !important;
border: none !important;
outline: none;
position: absolute;
top: 0;
box-shadow: none !important;
}
.admin-bar .mfp-wrap .mfp-close,
.admin-bar .mfp-wrap .mfp-close:active,
.admin-bar .mfp-wrap .mfp-close:hover,
.admin-bar .mfp-wrap .mfp-close:focus {
top: 32px!important;
}
img.mfp-img {
padding: 0;
}
.mfp-counter {
display: none;
}
.mfp-wrap .mfp-preloader.fa {
font-size: 30px;
}
/* Form Fields
------------------------------------------------------ */
.fl-form-field {
margin-bottom: 15px;
}
.fl-form-field input.fl-form-error {
border-color: #DD6420;
}
.fl-form-error-message {
clear: both;
color: #DD6420;
display: none;
padding-top: 8px;
font-size: 12px;
font-weight: lighter;
}
.fl-form-button-disabled {
opacity: 0.5;
}
/* Animations
------------------------------------------------------ */
.fl-animation {
opacity: 0;
}
body.fl-no-js .fl-animation {
opacity: 1;
}
.fl-builder-preview .fl-animation,
.fl-builder-edit .fl-animation,
.fl-animated {
opacity: 1;
}
.fl-animated {
animation-fill-mode: both;
}
/* Button Icon Animation */
.fl-button.fl-button-icon-animation i {
width: 0 !important;
opacity: 0;
transition: all 0.2s ease-out;
}
.fl-button.fl-button-icon-animation:hover i {
opacity: 1 !important;
}
.fl-button.fl-button-icon-animation i.fl-button-icon-after {
margin-left: 0px !important;
}
.fl-button.fl-button-icon-animation:hover i.fl-button-icon-after {
margin-left: 10px !important;
}
.fl-button.fl-button-icon-animation i.fl-button-icon-before {
margin-right: 0 !important;
}
.fl-button.fl-button-icon-animation:hover i.fl-button-icon-before {
margin-right: 20px !important;
margin-left: -10px;
}
@media (max-width: 1200px) { /**
* Styles needed for the large breakpoint.
*/
}@media (max-width: 992px) { /* Columns
------------------------------------------------------ */
/* Reversed Responsive Stacking */
.fl-col-group.fl-col-group-medium-reversed {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
flex-direction: row-reverse;
}
}@media (max-width: 768px) { /* Rows
------------------------------------------------------ */
.fl-row-content-wrap {
background-attachment: scroll !important;
}
.fl-row-bg-parallax .fl-row-content-wrap {
background-attachment: scroll !important;
background-position: center center !important;
}
/* Column Groups
------------------------------------------------------ */
/* Equal Heights */
.fl-col-group.fl-col-group-equal-height {
display: block;
}
.fl-col-group.fl-col-group-equal-height.fl-col-group-custom-width {
display: -webkit-box;
display: -webkit-flex;
display: flex;
}
/* Reversed Responsive Stacking */
.fl-col-group.fl-col-group-responsive-reversed {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
flex-direction: row-reverse;
}
.fl-col-group.fl-col-group-responsive-reversed .fl-col:not(.fl-col-small-custom-width) {
flex-basis: 100%;
width: 100% !important;
}
.fl-col-group.fl-col-group-medium-reversed:not(.fl-col-group-responsive-reversed) {
display: unset;
display: unset;
-webkit-flex-wrap: unset;
flex-wrap: unset;
flex-direction: unset;
}
/* Columns
------------------------------------------------------ */
.fl-col {
clear: both;
float: none;
margin-left: auto;
margin-right: auto;
width: auto !important;
}
.fl-col-small:not(.fl-col-small-full-width) {
max-width: 400px;
}
.fl-block-col-resize {
display:none;
}
/* Rows
------------------------------------------------------ */
.fl-row[data-node] .fl-row-content-wrap {
margin: 0;
padding-left: 0;
padding-right: 0;
}
.fl-row[data-node] .fl-bg-video,
.fl-row[data-node] .fl-bg-slideshow {
left: 0;
right: 0;
}
/* Columns
------------------------------------------------------ */
.fl-col[data-node] .fl-col-content {
margin: 0;
padding-left: 0;
padding-right: 0;
}
}@media (min-width: 1201px) {
html .fl-visible-large:not(.fl-visible-desktop),
html .fl-visible-medium:not(.fl-visible-desktop),
html .fl-visible-mobile:not(.fl-visible-desktop) {
display: none;
}
}
@media (min-width: 993px) and (max-width: 1200px) {
html .fl-visible-desktop:not(.fl-visible-large),
html .fl-visible-medium:not(.fl-visible-large),
html .fl-visible-mobile:not(.fl-visible-large) {
display: none;
}
}
@media (min-width: 769px) and (max-width: 992px) {
html .fl-visible-desktop:not(.fl-visible-medium),
html .fl-visible-large:not(.fl-visible-medium),
html .fl-visible-mobile:not(.fl-visible-medium) {
display: none;
}
}
@media (max-width: 768px) {
html .fl-visible-desktop:not(.fl-visible-mobile),
html .fl-visible-large:not(.fl-visible-mobile),
html .fl-visible-medium:not(.fl-visible-mobile) {
display: none;
}
}
.fl-col-content {
display: flex;
flex-direction: column;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
.fl-row-fixed-width {
max-width: 1328px;
}
.fl-builder-content > .fl-module-box {
margin: 0;
}
.fl-row-content-wrap {
padding-top: 60px;
padding-right: 20px;
padding-bottom: 60px;
padding-left: 20px;
}
.fl-module-content, .fl-module:where(.fl-module:not(:has(> .fl-module-content))) {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
@media(max-width: 768px) {
.fl-row[data-node] > .fl-row-content-wrap {
padding-right: 20px;
padding-left: 20px;
}
}
:root {
--fl-global-default-blue: #0085E8;
--fl-global-text-color: #6d7783;
--fl-global-text-font-family: Roboto, sans-serif;
--fl-global-text-font-weight: 400;
--fl-global-text-font-size: 18px;
}
.fl-builder-content:not(.fl-builder-empty) {
color: #6d7783;
font-family: Roboto, sans-serif;
font-weight: 400;
font-size: 18px;
}
.page .fl-post-header, .single-fl-builder-template .fl-post-header { display:none; }
.fl-node-j9vkrah564pb > .fl-row-content-wrap {
padding-top:0px;
padding-right:0px;
padding-bottom:0px;
padding-left:0px;
}
@media ( max-width: 768px ) {
.fl-node-j9vkrah564pb.fl-row > .fl-row-content-wrap {
padding-right:0px;
padding-left:0px;
}
}
.fl-node-g4kuhipym6r0 {
width: 100%;
}
/* Start Global CSS */
/* == FONTS == */
@import url('https://fonts.googleapis.com/css2?family=Sunflower:wght@300;500;700&display=swap');
@font-face {
font-family: 'Roboto';
src: url('https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1Mu51QrEz0dL_nz.woff2') format('woff2');
font-display: swap;
}
/* === End of ^^ === */
/*== Globals Variants ==*/
/* CHANGED: was 4 variables. The rest are the values already in
design-system/tokens.json, added so new work can use vars instead of raw hex.
Nothing below was removed. */
:root {
--sm-blue: #0085E8;
--sm-bg-grey: #F5F6F7;
--sm-blue-light: #D8E6F6;
--soft-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
/* Blue ramp */
--sm-blue-dark: #0B62AF;
--sm-blue-accent: #003166;
--sm-blue-pale: #F5F9FD;
/* Text */
--sm-text: #2E3940;
--sm-text-body: #747474;
/* Greys */
--sm-grey-1: #F5F6F7;
--sm-grey-2: #EBEDEF;
--sm-grey-3: #E0E2E4;
--sm-grey-4: #D0D2D4;
--sm-grey-5: #B0B2B4;
/* Semantic aliases */
--sm-border: var(--sm-grey-3);
--sm-blue-hover: var(--sm-blue-dark);
--sm-bg-grey-hover: var(--sm-grey-2);
--sm-red: #E3514D;
/* 8px spacing grid */
--space-1: 8px;
--space-2: 16px;
--space-3: 24px;
--space-4: 32px;
--space-5: 40px;
--space-6: 48px;
--space-8: 64px;
--space-12: 96px;
/* Breadcrumb bar */
--sm-blue-hero: #2E81DA;
--sm-blue-hero-light: #78B0EB;
--sm-white: #fff;
--font-xs: 14px;
/* Layout */
--content-max: 1328px;
}
/* === End of ^^ === */
/* == TYPOGRAPHY == */
.custom-font a {
font-size: 18px;
text-decoration: none;
}
.custom-font h1 {
font-family: 'Sunflower', sans-serif;
font-size: 40px;
line-height: 1.4;
margin-bottom: 21px;
text-transform: capitalize;
}
.custom-font h2 {
font-family: 'Sunflower', sans-serif;
font-size: 30px;
line-height: 1.5;
margin-bottom: 12px;
text-transform: capitalize;
}
.custom-font h3 {
font-size: 24px;
line-height: 1.5;
margin-top: 12px;
}
.custom-font h4 {
font-size: 20px;
line-height: 1.5;
margin-bottom: 2px;
font-weight: 500;
}
.custom-font h5 {
font-size: 16px;
color: #0085E8;
text-transform: uppercase;
font-family: sunflower;
font-weight: 500;
letter-spacing: 1px;
margin-bottom: -12px;
}
/* Eyebrow label — same visual treatment as h5, but applied to any
element (often a above an h2) without the semantics of h5. */
.eyebrow-sm {
font-size: 16px !important;
color: var(--sm-blue-hero);
text-transform: uppercase;
font-family: sunflower;
font-weight: 500;
letter-spacing: 1px;
}
.custom-font p {
font-size: 18px;
line-height: 1.5;
margin-bottom: 12px;
text-wrap: pretty;
}
.custom-font li {
line-height: 1.7;
margin-bottom: 6px;
margin-left: -12px;
list-style-position: outside;
}
.custom-font li a {
font-weight: 500;
}
.custom-font ul {
margin-left: -12px;
}
/* `.sunflower` switches the font family to Sunflower for h1/h2 and
adds capitalize + font-weight 500 to h3. Apply on the heading
itself, e.g. `
... `. */
.sunflower,
.sunflower h1,
.sunflower h2 {
font-family: 'Sunflower', sans-serif;
font-weight: 500;
text-wrap: pretty;
}
.sunflower h3 {
font-family: 'Sunflower', sans-serif;
font-weight: 500;
text-transform: capitalize;
}
.blue-highlight {
color: #0085E8;
}
/* ^^ END OF ^^ */
/* == CUSTOM GRID ==
Flexbox grid. `.custom-grid` is the outermost wrapper; columns
can sit directly inside it or be grouped in a `.custom-row`.
Default `align-items: stretch` means columns in the same row
automatically match the tallest sibling's height — no override
needed for equal-height layouts. */
.custom-grid {
display: flex;
flex-wrap: wrap;
gap: 16px;
max-width: 1328px;
margin: 0 auto;
}
.custom-row {
display: flex;
flex-wrap: wrap;
gap: 16px;
width: 100%;
}
/* min-width: 0 prevents oversized content (SVGs with explicit width,
long URLs, blocks) from forcing a flex item wider than its basis. */
.custom-col-1,
.custom-col-2,
.custom-col-3,
.custom-col-4,
.custom-col-5,
.custom-col-6,
.custom-col-7,
.custom-col-8,
.custom-col-9,
.custom-col-10,
.custom-col-11,
.custom-col-12 {
min-width: 0;
}
.custom-col-1 { flex: 0 0 calc(8.33% - 14.67px); }
.custom-col-2 { flex: 0 0 calc(16.66% - 13.33px); }
.custom-col-3 { flex: 0 0 calc(25% - 12px); }
.custom-col-4 { flex: 0 0 calc(33.33% - 10.67px); }
.custom-col-5 { flex: 0 0 calc(41.66% - 9.33px); }
.custom-col-6 { flex: 0 0 calc(50% - 8px); }
.custom-col-7 { flex: 0 0 calc(58.33% - 6.67px); }
.custom-col-8 { flex: 0 0 calc(66.66% - 5.33px); }
.custom-col-9 { flex: 0 0 calc(75% - 4px); }
.custom-col-10 { flex: 0 0 calc(83.33% - 2.67px); }
.custom-col-11 { flex: 0 0 calc(91.66% - 1.33px); }
.custom-col-12 { flex: 0 0 100%; }
/* Wider row-gap variant — use on `.custom-grid` for non-bento
layouts where rows need more vertical breathing room. */
.lg-row-mod {
row-gap: 32px;
}
/* Bento card modifier — add `.bento-col` alongside `.custom-col-N`
(or to a wrapper inside the column) to get a white card with
border, padding, and rounded corners. */
/* CHANGED: display:flex + flex-direction:column added. This is the
2026-07-03 repo fix that was never ported live. .bento-col-text needs a
flex parent to bottom-align, otherwise image+text cards in a row never
line their copy up. */
.bento-col {
border: 1px solid #E0E2E4;
padding: 24px;
border-radius: 16px;
background: #fff;
transition: 0.3s ease all;
display: flex;
flex-direction: column;
}
.bento-col:hover {
box-shadow: var(--soft-shadow);
}
/* NEW: no trailing margin on a card's last element at any depth, so the last
line of text sits an even 24px from the border. */
.bento-col :last-child {
margin-bottom: 0;
}
/* NEW: opt-in 24px gap for image+text cards ONLY. Never on icon+text or
media-less cards. */
.bento-gap {
gap: var(--space-3);
}
/* NEW: card copy pushed to the bottom so it aligns across cards of unequal
image or copy length. Requires the .bento-col flex change above. */
.bento-col-text {
margin-top: auto;
display: flex;
flex-direction: column;
gap: var(--space-1);
}
/* Large (≤1324px): col-4 through col-8 → 50/50.
col-1, 2, 3, 9, 10, 11 keep original widths. col-12 stays 100%. */
@media (max-width: 1324px) {
.custom-col-4,
.custom-col-5,
.custom-col-6,
.custom-col-7,
.custom-col-8 {
flex: 0 0 calc(50% - 8px);
}
}
/* Medium (≤992px): everything (except col-12) → 50/50. */
@media (max-width: 992px) {
.custom-col-1,
.custom-col-2,
.custom-col-3,
.custom-col-4,
.custom-col-5,
.custom-col-6,
.custom-col-7,
.custom-col-8,
.custom-col-9,
.custom-col-10,
.custom-col-11 {
flex: 0 0 calc(50% - 8px);
}
/* Opt-in modifier: add `.stack-medium` to a `.custom-grid` (or
any wrapper around the cols) to stack cols full-width at
medium instead of 50/50. Useful for hero splits where you
want each half to stay large. */
.stack-medium .custom-col-1,
.stack-medium .custom-col-2,
.stack-medium .custom-col-3,
.stack-medium .custom-col-4,
.stack-medium .custom-col-5,
.stack-medium .custom-col-6,
.stack-medium .custom-col-7,
.stack-medium .custom-col-8,
.stack-medium .custom-col-9,
.stack-medium .custom-col-10,
.stack-medium .custom-col-11,
.stack-medium .custom-col-12 {
flex: 0 0 100%;
}
}
/* Small (≤768px): everything stacks full-width. */
@media (max-width: 768px) {
.custom-grid { max-width: 720px; }
.custom-col-1,
.custom-col-2,
.custom-col-3,
.custom-col-4,
.custom-col-5,
.custom-col-6,
.custom-col-7,
.custom-col-8,
.custom-col-9,
.custom-col-10,
.custom-col-11,
.custom-col-12 {
flex: 0 0 100%;
}
}
@media (max-width: 474px) {
.custom-grid { max-width: 100%; }
}
/* Sticky-nav layout modifier — opt OUT of the bento/card 50/50 collapse.
Add `.sticky-nav` to a `.custom-grid` for article/blog layouts with a sticky
sidebar (e.g. a `.custom-col-3` table-of-contents beside a `.custom-col-9`
body). It holds each column's DECLARED width from 993px up — overriding the
`.custom-col-4`–`8` collapse (≤1324px) and the `.custom-col-1`–`11` collapse
(≤992px) that are intentional for bento grids — then stacks every column
full-width at 992px and below. Add your own rule to hide the sidebar on
mobile if the layout calls for it. */
@media (min-width: 993px) {
.sticky-nav .custom-col-1 { flex: 0 0 calc(8.33% - 14.67px); }
.sticky-nav .custom-col-2 { flex: 0 0 calc(16.66% - 13.33px); }
.sticky-nav .custom-col-3 { flex: 0 0 calc(25% - 12px); }
.sticky-nav .custom-col-4 { flex: 0 0 calc(33.33% - 10.67px); }
.sticky-nav .custom-col-5 { flex: 0 0 calc(41.66% - 9.33px); }
.sticky-nav .custom-col-6 { flex: 0 0 calc(50% - 8px); }
.sticky-nav .custom-col-7 { flex: 0 0 calc(58.33% - 6.67px); }
.sticky-nav .custom-col-8 { flex: 0 0 calc(66.66% - 5.33px); }
.sticky-nav .custom-col-9 { flex: 0 0 calc(75% - 4px); }
.sticky-nav .custom-col-10 { flex: 0 0 calc(83.33% - 2.67px); }
.sticky-nav .custom-col-11 { flex: 0 0 calc(91.66% - 1.33px); }
.sticky-nav .custom-col-12 { flex: 0 0 100%; }
}
@media (max-width: 992px) {
.sticky-nav .custom-col-1,
.sticky-nav .custom-col-2,
.sticky-nav .custom-col-3,
.sticky-nav .custom-col-4,
.sticky-nav .custom-col-5,
.sticky-nav .custom-col-6,
.sticky-nav .custom-col-7,
.sticky-nav .custom-col-8,
.sticky-nav .custom-col-9,
.sticky-nav .custom-col-10,
.sticky-nav .custom-col-11,
.sticky-nav .custom-col-12 {
flex: 0 0 100%;
}
}
/* === End of ^^ === */
/* == CUSTOM LIST STYLES | Used in article pages to override default lists == */
/* CHANGED: icon URLs made root-relative. They were absolute to staging2, which
meant production pages fetched these two SVGs from the staging host. Both
files exist at identical paths on production (verified 14 Aug 2026), so a
relative path resolves correctly on whichever site renders the page. */
.checklist-tick li {
list-style: none;
background-image: url("/wp-content/uploads/2026/01/tick.svg");
background-repeat: no-repeat;
background-position: 0 0.5em;
padding-left: 1.25em;
margin-left: -21px;
line-height: 1.65;
}
.checklist-dot li {
list-style: none;
background-image: url(/wp-content/uploads/2026/02/dot-for-li.svg);
background-repeat: no-repeat;
background-position: 0 0.65em;
padding-left: 1.25em;
margin-left: -21px;
line-height: 1.65;
}
/* NEW 17 Aug 2026: the negative counterpart to .checklist-tick, for "what to
avoid" style lists. Same metrics as the two above so the three are
interchangeable on one page without the text shifting. Icon verified present
on both staging and production. */
.checklist-cross li {
list-style: none;
background-image: url("/wp-content/uploads/2026/08/red-cross.svg");
background-repeat: no-repeat;
background-position: 0 0.5em;
padding-left: 1.25em;
margin-left: -21px;
line-height: 1.65;
}
.checklist-number ul {
counter-reset: list-counter;
}
.checklist-number li {
list-style: none;
counter-increment: list-counter;
position: relative;
padding-left: 1.5em;
margin-left: -21px;
line-height: 1.65;
}
.checklist-number li::before {
content: counter(list-counter) ".";
position: absolute;
left: 0;
color: #2E81DA;
font-weight: 400;
}
/* === End of ^^ === */
/* === Background still and Animated Styles ===*/
.sm-bg-grey {
background: var(--sm-bg-grey);
}
/* Subtle radial gradient — use for hero or feature section
backgrounds where a flat colour feels too plain.
--
.gradient-light — static version, no animation. Zero
runtime cost. Safe to use on multiple
sections per page.
.animated-gradient-light — animated version. Heavier (animates
background-position, which is a paint
operation). Recommended limit: one
instance per page. Falls back to the
static version when the user has
prefers-reduced-motion: reduce. */
.gradient-light,
.animated-gradient-light {
background: radial-gradient(circle at center, #F2F8FF, #FDFDFD 75%);
box-shadow: inset 0 2px 16px rgba(0, 0, 0, 0.02);
}
.animated-gradient-light {
background-size: 300% 300%;
background-position: 0% 0%;
animation: gradientMove 14s ease-in-out infinite;
}
/* Bolder radial gradient — brand-blue centre fading to a light blue
edge. Dark counterpart to `.gradient-light`. Use on hero/feature
sections that need more visual weight. Text on top should be white
/ light for contrast.
--
`.gradient-dark` — static version, no animation.
`.animated-gradient-dark` — animated version. Limit one per page.
NOTE: pending — not yet in the live sitemate.com stylesheet. Push
these rules live before relying on them in a published module. */
.gradient-dark,
.animated-gradient-dark {
box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.08);
}
/* Static: two brand-blue glows pinned to the top-right and bottom-left
corners, fading to a light blue field. Fades to transparent-blue
(not `transparent`) to avoid a muddy grey midpoint. */
.gradient-dark {
background:
radial-gradient(circle at top right, #0085E8, rgba(0, 133, 232, 0) 60%),
radial-gradient(circle at bottom left, #0085E8, rgba(0, 133, 232, 0) 60%),
#D8E6F6;
}
/* Animated: single radial that pans across the section. */
.animated-gradient-dark {
background: radial-gradient(circle at center, #0085E8, #D8E6F6 75%);
background-size: 300% 300%;
background-position: 0% 0%;
animation: gradientMove 14s ease-in-out infinite;
}
@keyframes gradientMove {
0% { background-position: 0% 0%; }
25% { background-position: 100% 0%; }
50% { background-position: 100% 100%; }
75% { background-position: 0% 100%; }
100% { background-position: 0% 0%; }
}
/* Respect the user's OS-level reduced-motion preference — drop
the animation and fall back to the static gradient. */
@media (prefers-reduced-motion: reduce) {
.animated-gradient-light {
animation: none;
background-size: auto;
background-position: center;
}
}
.no-inner-shadow {
box-shadow: none !important;
}
/* === End of ^^ === */
/*== CSS FOR BUTTONS | Matches the styles of component button for when you need custom destinations in HTML modules ==*/
.button-group {
display: flex;
gap: 16px;
max-width: fit-content;
margin-top: 24px;
}
.blue-buttons {
display: inline-flex;
align-items: center;
gap: 1rem;
padding: 12px 21px 12px 21px;
background: #0085E8;
color: #fff;
text-decoration: none;
border-radius: 10px;
transition: gap 0.25s ease;
justify-content: center;
}
.grey-buttons {
display: inline-flex;
align-items: center;
gap: 1rem;
padding: 12px 21px 12px 21px;
background: var(--sm-bg-grey);
color: #2E3940;
text-decoration: none;
border-radius: 10px;
transition: all 0.25s ease;
justify-content: center;
}
.text-buttons {
display: inline-flex;
align-items: center;
gap: 1rem;
color: #2E3940;
text-decoration: none;
transition: gap 0.25s ease;
justify-content: center;
}
.blue-buttons:hover,
.grey-buttons:hover,
.text-buttons:hover {
gap: 1.5rem;
}
.grey-buttons:hover {
background: #EBEDEF;
color: #2E3940;
}
.blue-buttons:hover {
background: #0B62AF;
color: #ffffff;
}
.text-buttons:hover {
color: #2E3940;
}
.grey-buttons a,
.blue-buttons a,
.grey-buttons a:hover,
.blue-buttons a:hover {
text-decoration: none;
}
/* NEW: Beaver Builder / theme styles underline links on hover, which hits every
button since buttons are elements. Kill it on the button classes rather
than blanket a:hover, so ordinary prose links keep their underline. */
.blue-buttons,
.blue-buttons:hover,
.grey-buttons,
.grey-buttons:hover,
.text-buttons,
.text-buttons:hover,
.learn-more-btn,
.learn-more-btn:hover {
text-decoration: none;
}
.learn-more-btn,
.learn-more-btn:hover,
.learn-more-btn a,
.learn-more-btn a:hover{
color: #2E3940 !important;
text-decoration: none;
display: flex;
font-size: 16px !important;
gap: 10px;
transition: 0.3s ease all;
}
.learn-more-btn img {
max-width: 16px !important;
}
.learn-more-btn:hover {
gap: 16px;
}
@media(max-width:768px) {
.button-group {
flex-direction: column;
text-align: center;
max-width: 100%;
}
}
/* === End of ^^ === */
/* ============================================================================
NEW — everything below this line is added for the AI LP template.
All of it already exists in the headless design system (base.css); it was
just missing from the BB globals, so pages had to re-declare it locally.
============================================================================ */
/* == TEXT GROUPING == NEW
Gap-driven vertical rhythm, so grouped text stops relying on per-element
margins. .stack-headings is the standard wrapper for a section header
(eyebrow → h2 → intro → cta). */
.stack {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.stack > * {
margin: 0;
}
.stack-headings {
display: flex;
flex-direction: column;
gap: var(--space-1);
margin-bottom: var(--space-3);
}
.stack-headings > * {
margin: 0;
}
/* .eyebrow-sm carries a -12px bottom margin above so it hugs a following
heading. Inside a gap-driven stack that pulls the heading up, so neutralise
it there and only there. */
.stack .eyebrow-sm,
.stack-headings .eyebrow-sm {
margin-bottom: 0 !important;
}
/* Images in a stack must not stretch — keep them left-aligned at natural size. */
.stack > img,
.stack-headings > img {
align-self: flex-start;
}
/* == TWO-COLUMN SPLIT == NEW
Text + media with a 40px gap. Use instead of .custom-grid when you need more
than 16px between columns: the grid's column math is tuned to a 16px gap, so
widening it overflows. */
.split {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-5);
max-width: var(--content-max);
margin: 0 auto;
}
.split > * {
flex: 1 1 360px;
min-width: 0;
}
/* == LOGOS == NEW */
.product-logo {
height: 32px;
width: auto;
margin-bottom: var(--space-2);
}
/* Logos bundling a descriptor with the wordmark (Sitemate Mobile App, the
*-logo-caption variants) read small at 32px because the mark shares height
with its caption. */
.product-logo--caption {
height: 48px;
}
/* Icon wrap — an icon on a light gradient tile. Compose with .gradient-light:
80px square with 16px of air, so the icon reads at 48px. Takes an , or a span wrapping one.
NOTE: the microsites use .icon-badge for the same idea at 60px / 12px radius.
Different sizes for the same visual element across surfaces is a design-system
inconsistency worth reconciling; this is the WordPress treatment. */
.sm-icon-wrap {
width: 80px;
height: 80px;
padding: var(--space-2);
border: 1px solid var(--sm-grey-3);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--space-3);
}
.sm-icon-wrap img,
.sm-icon-wrap svg {
height: 48px;
width: auto;
display: block;
margin: 0;
}
.sm-icon-wrap > span {
display: block;
line-height: 0;
}
/* == MEDIA == NEW
.sm-video-thumb is the lifted clickable video poster. The AI LP inline
image treatment is .ailp-media, scoped in that template rather than global:
"media" is too generic a name to own site-wide. */
/* Video poster with a play affordance — a still image the visitor clicks to
open the lightbox, NOT an embedded player.
Deliberately NOT called .vimeo-container. That class is already in use on
this site with different markup: existing pages carry an inline
`padding: 56.25% 0 0 0` (the old 16:9 hack) plus an absolutely-positioned
iframe. Adding aspect-ratio to that class made those containers size
themselves twice — once from aspect-ratio, then the padding on top — and the
video overflowed. Same name, two contracts. This one gets its own. */
.sm-video-thumb {
position: relative;
aspect-ratio: 16 / 9;
border-radius: 16px;
overflow: hidden;
border: 1px solid #fff;
box-shadow: var(--soft-shadow);
}
.sm-video-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* == CLOSING SLOGAN == NEW
Centres the closing h2 and its button group. */
.closing-slogan {
padding-top: var(--space-3);
text-align: center;
}
.closing-slogan .button-group {
margin-left: auto;
margin-right: auto;
}
/* == SECTION RHYTHM == NEW
Deliberately a CLASS, not a bare `section` selector. The headless base.css
can style bare because it owns the whole page; doing that here
would hit every Beaver Builder page on the site, where BB rows already
supply padding, and double-pad all of them.
Use on raw-HTML modules that own their own page scaffold. */
.sm-section {
padding: var(--space-8) var(--space-3); /* 64 / 24 */
}
@media (max-width: 768px) {
.sm-section {
padding: var(--space-6) var(--space-2); /* 48 / 16 */
}
}
/* Pull a coloured band out to the viewport edges from inside a BB row. */
.sm-bleed {
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
/* == BREADCRUMB BAR == NEW
Gradient strip directly under the nav. Same component as the Topics pages,
so a visitor arriving from search gets the same wayfinding everywhere.
Markup: 
80px square with 16px of air, so the icon reads at 48px. Takes an