/**
* Fuel Theme
* Version 6.0.6
**/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Hero
# Welcome
# CTA's
# Locations
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Hero
--------------------------------------------------------------*/
#hero_section{
margin-top: -8rem;
}
.hero-tagline{
padding-top: 10rem;
}
.header > .wp-block-columns.has-white-background-color{
background: none !important ;
}
@keyframes heroFade{
to{
opacity: 1;
}
}
@keyframes tunedFade{
to{
opacity: 1;
transform: translateX(8rem) translateY(-3rem);
}
}
.hero-tagline-your{
font-size: 1.6rem !important ;
margin-bottom: 0 !important ;
padding-top: 9rem;
}
.hero-tagline-tuned{
font-size: 2.4rem !important ;
margin-top: 0 !important ;
padding-bottom: 2.5rem;
transform: translateX(6rem);
}
@media (prefers-reduced-motion: no-preference) {
.hero-tagline-your{
opacity: 0;
animation: heroFade 1s 1s ease forwards;
}
.hero-tagline-tuned{
opacity: 0;
animation: heroFade 1s 1.5s ease forwards;
}
}
@media (min-width: 68.5em) {
#hero_section{
margin-top: -12rem;
}
.hero-tagline{
padding-top: 14rem;
}
.hero-tagline-your{
font-size: 2.8rem !important ;
max-width: 35rem !important ;
}
.hero-tagline-tuned{
font-size: 5rem !important ;
}
}
@media (prefers-reduced-motion: no-preference) and (min-width: 68.5rem){
.hero-tagline-tuned{
transform: translateX(10rem) translateY(-3rem);
animation: tunedFade 1s 1.5s ease forwards;
}
}
/*--------------------------------------------------------------
# Welcome
--------------------------------------------------------------*/
#welcome_section{
position: relative;
z-index: 10;
overflow: hidden;
padding-top: 2rem !important ;
}
#welcome_section:after{
content:'';
position: absolute;
width: 100%;
height: 100%;
left: 25%;
top: 23%;
background: url('../images/welcome-bg.svg') no-repeat;
background-position: right bottom;
background-size: contain;
z-index: -1;
}
#welcome_section h1{
font-size: clamp(1.6rem, 4vw, 2rem) !important ;
position: relative;
padding-bottom: 2rem;
}
#welcome_section h1:after{
content:'';
position: absolute;
bottom: .5rem ;
left: 0;
right: 0;
margin: auto;
height: 1px;
width: 8rem;
background: #5A5A5A ;
}
@media (min-width: 68.5em) {
#welcome_section:after{
left: 0 ;
top: 0 ;
background-position: right center;
}
#welcome_section{
padding-top: 5rem !important ;
}
}
@media (prefers-reduced-motion: no-preference) {
.welcome h1{
opacity: 0;
transition: opacity 1s ease-in;
}
.welcome.js-intersected h1{
opacity: 1;
}
.welcome h1::after{
opacity: 0;
transition: opacity 1s .5s ease-in;
}
.welcome.js-intersected h1::after{
opacity: 1;
}
.welcome p {
opacity: 0;
transition: opacity 1s 1s ease-in;
}
.welcome.js-intersected p {
opacity: 1;
}
.welcome .wp-block-button__link {
opacity: 0;
transition: opacity 1s 1.5s ease-in;
}
.welcome.js-intersected .wp-block-button__link {
opacity: 1;
}
}
/*--------------------------------------------------------------
# CTA's
--------------------------------------------------------------*/
.cta1-wrapper a {
--y: 0;
--time: 600ms;
}
.cta1-wrapper .cta1 {
--i: 0;
}
.cta1-wrapper .cta2 {
--i: 3;
}
.cta1-wrapper .cta3 {
--i: 6;
}
.cta1-wrapper .wp-block-image {
overflow: hidden;
}
.cta1-wrapper img {
width: 100%;
max-height: 23rem;
object-position: top;
transition: transform 1s;
}
.cta1-wrapper p {
position: relative;
font-size: clamp(1.2rem, 2vw, 1.8rem);
}
.cta1-wrapper p::before {
content: "";
background: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)) no-repeat right bottom / var(--cta-bg-width, 2em) 100%;
position: absolute;
inset: 0;
transition: background-size 350ms;
z-index: -1;
}
.cta1-wrapper p::after {
content: url('data:image/svg+xml,');
height: 0.9em;
width: 0.9em;
position: absolute;
inset: 0 0.5em 0 auto;
margin: auto;
line-height: 1;
}
.cta1-wrapper a:is(:hover, :focus) img {
transform: scale(1.1)
}
.cta1-wrapper a:is(:hover, :focus) p:before {
background-size: 100% 100%;
}
.cta5-section h2{
font-weight: 700 !important ;
font-size: 1.6rem !important;
margin-bottom: 1.5rem;
}
@media (max-width: 68.49em) {
.cta1-wrapper {
flex-direction: column;
}
}
/* style from cta 5 pattern */
@media (max-width: 68.49rem) {
.cta5-section {
flex-direction: column;
}
.cta5-section a:not(:last-of-type) {
margin-bottom: 8rem;
}
.cta5-section a::after {
width: 1.8rem;
height: 1.8rem
}
.cta5-section img {
width: 9rem !important;
height: 9rem !important;
}
}
.cta5-section a {
transition: background 0.5s ease-out, color 0.5s ease-out;
flex: 1;
align-self: stretch;
}
.cta5-section a::after {
content: url('data:image/svg+xml,');
display: block;
width: 2.4rem;
height: 2.4rem;
position: absolute;
inset: auto auto -1.2rem;
transition: transform 0.5s ease-out;
}
.cta5-section .img-wrapper {
overflow: hidden;
outline: 3px solid white;
}
.cta5-section a:is(:hover, :focus-visible) .img-wrapper {
outline: 3px solid #56D18F;
}
.cta5-section img {
transition: transform 0.5s;
}
.cta5-section a:is(:hover, :focus-visible):after{
content: url('data:image/svg+xml,');
}
.cta5-section a:is(:hover, :focus-visible)::after {
transform: rotate(-90deg);
}
.cta5-section a:is(:hover, :focus-visible) img {
transform: scale(var(--scale, 1.1));
}
.cta5-section a:nth-child(2) {--i: 1;}
.cta5-section a:nth-child(3) {--i: 2;}
.cta5-section a:nth-child(4) {--i: 3;}
.cta5-section a:nth-child(5) {--i: 4;}
/*--------------------------------------------------------------
# Locations
--------------------------------------------------------------*/
.is-layout-flex>.flex-grow {
flex-grow: 1;
}
.home-location {
margin-top: 0;
}
@media (prefers-reduced-motion: no-preference) {
.home-location h2{
opacity: 0;
transition: opacity 1s .5s ease;
}
.home-location.js-intersected h2{
opacity: 1;
}
.home-location .wp-block-post-template{
opacity: 0;
transition: opacity 1s 1s ease;
}
.home-location.js-intersected .wp-block-post-template{
opacity: 1;
}
}