787 lines
23 KiB
CSS
787 lines
23 KiB
CSS
.fusion-body .fusion-title {
|
|
--awb-highlight-color: var(--primary_color, #65bc7b);
|
|
--awb-highlight-top-margin: 0;
|
|
--awb-highlight-animation-duration: 1500;
|
|
--awb-highlight-width: 9;
|
|
--awb-text-color: var(--body_typography-color);
|
|
--awb-animated-text-color: var(--awb-text-color);
|
|
--awb-margin-top: var(--title_margin-top);
|
|
--awb-margin-right: var(--title_margin-right);
|
|
--awb-margin-bottom: var(--title_margin-bottom);
|
|
--awb-margin-left: var(--title_margin-left);
|
|
--awb-link-color: var(--link_color);
|
|
--awb-link-hover-color: var(--link_hover_color);
|
|
--awb-sep-color: var(--title_border_color);
|
|
--awb-font-size: var(--body_typography-font-size);
|
|
--awb-marquee-direction: normal;
|
|
--awb-marquee-speed: 5000ms;
|
|
--awb-marquee-translate-x: 100%;
|
|
--awb-marquee-translate-y: 0%;
|
|
margin-top: var(--awb-margin-top);
|
|
margin-right: var(--awb-margin-right);
|
|
margin-bottom: var(--awb-margin-bottom);
|
|
margin-left: var(--awb-margin-left);
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
align-items: center;
|
|
border-bottom-color: var(--awb-sep-color);
|
|
font-size: var(--awb-font-size);
|
|
}
|
|
.fusion-body .fusion-title a {
|
|
color: var(--awb-link-color);
|
|
}
|
|
.fusion-body .fusion-title a:hover {
|
|
color: var(--awb-link-hover-color);
|
|
}
|
|
.fusion-body .fusion-title.fusion-title-size-one {
|
|
--awb-font-size: var(--h1_typography-font-size);
|
|
--awb-text-color: var(--h1_typography-color);
|
|
}
|
|
.fusion-body .fusion-title.fusion-title-size-two {
|
|
--awb-font-size: var(--h2_typography-font-size);
|
|
--awb-text-color: var(--h2_typography-color);
|
|
}
|
|
.fusion-body .fusion-title.fusion-title-size-three {
|
|
--awb-font-size: var(--h3_typography-font-size);
|
|
--awb-text-color: var(--h3_typography-color);
|
|
}
|
|
.fusion-body .fusion-title.fusion-title-size-four {
|
|
--awb-font-size: var(--h4_typography-font-size);
|
|
--awb-text-color: var(--h4_typography-color);
|
|
}
|
|
.fusion-body .fusion-title.fusion-title-size-five {
|
|
--awb-font-size: var(--h5_typography-font-size);
|
|
--awb-text-color: var(--h5_typography-color);
|
|
}
|
|
.fusion-body .fusion-title.fusion-title-size-six {
|
|
--awb-font-size: var(--h6_typography-font-size);
|
|
--awb-text-color: var(--h6_typography-color);
|
|
}
|
|
.fusion-body .fusion-title h1 > p:last-of-type,
|
|
.fusion-body .fusion-title h2 > p:last-of-type,
|
|
.fusion-body .fusion-title h3 > p:last-of-type,
|
|
.fusion-body .fusion-title h4 > p:last-of-type,
|
|
.fusion-body .fusion-title h5 > p:last-of-type,
|
|
.fusion-body .fusion-title h6 > p:last-of-type {
|
|
margin-bottom: 0;
|
|
}
|
|
.fusion-body .fusion-title .comment-reply-title {
|
|
margin: 0;
|
|
}
|
|
.fusion-body .fusion-title .comment-reply-title.title-heading-left,
|
|
.fusion-body .fusion-title h1.title-heading-left,
|
|
.fusion-body .fusion-title h2.title-heading-left,
|
|
.fusion-body .fusion-title h3.title-heading-left,
|
|
.fusion-body .fusion-title h4.title-heading-left,
|
|
.fusion-body .fusion-title h5.title-heading-left,
|
|
.fusion-body .fusion-title h6.title-heading-left,
|
|
.fusion-body .fusion-title div.title-heading-tag.title-heading-left,
|
|
.fusion-body .fusion-title p.title-heading-tag.title-heading-left {
|
|
text-align: left;
|
|
}
|
|
.fusion-body .fusion-title .comment-reply-title.title-heading-left .fontawesome-icon,
|
|
.fusion-body .fusion-title h1.title-heading-left .fontawesome-icon,
|
|
.fusion-body .fusion-title h2.title-heading-left .fontawesome-icon,
|
|
.fusion-body .fusion-title h3.title-heading-left .fontawesome-icon,
|
|
.fusion-body .fusion-title h4.title-heading-left .fontawesome-icon,
|
|
.fusion-body .fusion-title h5.title-heading-left .fontawesome-icon,
|
|
.fusion-body .fusion-title h6.title-heading-left .fontawesome-icon,
|
|
.fusion-body .fusion-title div.title-heading-tag.title-heading-left .fontawesome-icon,
|
|
.fusion-body .fusion-title p.title-heading-tag.title-heading-left .fontawesome-icon {
|
|
margin-right: 10px;
|
|
}
|
|
.fusion-body .fusion-title .comment-reply-title.title-heading-right,
|
|
.fusion-body .fusion-title h1.title-heading-right,
|
|
.fusion-body .fusion-title h2.title-heading-right,
|
|
.fusion-body .fusion-title h3.title-heading-right,
|
|
.fusion-body .fusion-title h4.title-heading-right,
|
|
.fusion-body .fusion-title h5.title-heading-right,
|
|
.fusion-body .fusion-title h6.title-heading-right,
|
|
.fusion-body .fusion-title div.title-heading-tag.title-heading-right,
|
|
.fusion-body .fusion-title p.title-heading-tag.title-heading-right {
|
|
text-align: right;
|
|
}
|
|
.fusion-body .fusion-title .comment-reply-title.title-heading-right .fontawesome-icon,
|
|
.fusion-body .fusion-title h1.title-heading-right .fontawesome-icon,
|
|
.fusion-body .fusion-title h2.title-heading-right .fontawesome-icon,
|
|
.fusion-body .fusion-title h3.title-heading-right .fontawesome-icon,
|
|
.fusion-body .fusion-title h4.title-heading-right .fontawesome-icon,
|
|
.fusion-body .fusion-title h5.title-heading-right .fontawesome-icon,
|
|
.fusion-body .fusion-title h6.title-heading-right .fontawesome-icon,
|
|
.fusion-body .fusion-title div.title-heading-tag.title-heading-right .fontawesome-icon,
|
|
.fusion-body .fusion-title p.title-heading-tag.title-heading-right .fontawesome-icon,
|
|
.fusion-body .fusion-title .comment-reply-title.title-heading-right img,
|
|
.fusion-body .fusion-title h1.title-heading-right img,
|
|
.fusion-body .fusion-title h2.title-heading-right img,
|
|
.fusion-body .fusion-title h3.title-heading-right img,
|
|
.fusion-body .fusion-title h4.title-heading-right img,
|
|
.fusion-body .fusion-title h5.title-heading-right img,
|
|
.fusion-body .fusion-title h6.title-heading-right img,
|
|
.fusion-body .fusion-title div.title-heading-tag.title-heading-right img,
|
|
.fusion-body .fusion-title p.title-heading-tag.title-heading-right img {
|
|
margin-left: 10px;
|
|
margin-right: 0;
|
|
}
|
|
.fusion-body .fusion-title .comment-reply-title img,
|
|
.fusion-body .fusion-title h1 img,
|
|
.fusion-body .fusion-title h2 img,
|
|
.fusion-body .fusion-title h3 img,
|
|
.fusion-body .fusion-title h4 img,
|
|
.fusion-body .fusion-title h5 img,
|
|
.fusion-body .fusion-title h6 img,
|
|
.fusion-body .fusion-title div.title-heading-tag img,
|
|
.fusion-body .fusion-title p.title-heading-tag img {
|
|
margin-right: 10px;
|
|
}
|
|
.fusion-body .fusion-title .comment-reply-title .fontawesome-icon,
|
|
.fusion-body .fusion-title h1 .fontawesome-icon,
|
|
.fusion-body .fusion-title h2 .fontawesome-icon,
|
|
.fusion-body .fusion-title h3 .fontawesome-icon,
|
|
.fusion-body .fusion-title h4 .fontawesome-icon,
|
|
.fusion-body .fusion-title h5 .fontawesome-icon,
|
|
.fusion-body .fusion-title h6 .fontawesome-icon,
|
|
.fusion-body .fusion-title div.title-heading-tag .fontawesome-icon,
|
|
.fusion-body .fusion-title p.title-heading-tag .fontawesome-icon {
|
|
display: inline-block;
|
|
float: none;
|
|
vertical-align: middle;
|
|
margin-left: 0;
|
|
margin-top: 0;
|
|
}
|
|
.fusion-body .fusion-title .awb-title-spacer {
|
|
max-width: 0.3em;
|
|
flex-grow: 1;
|
|
}
|
|
.fusion-body .fusion-title.fusion-title-center {
|
|
text-align: center;
|
|
}
|
|
.fusion-body .fusion-title.fusion-title-center.fusion-sep-none .title-heading-center,
|
|
.fusion-body .fusion-title.fusion-title-center.sep-underline .title-heading-center {
|
|
padding: 0;
|
|
text-align: center;
|
|
}
|
|
.fusion-body .fusion-title.fusion-sep-none {
|
|
display: block;
|
|
}
|
|
.fusion-body .fusion-title.fusion-sep-none .title-heading-left {
|
|
padding: 0;
|
|
text-align: left;
|
|
}
|
|
.fusion-body .fusion-title.fusion-sep-none .title-heading-right {
|
|
padding: 0;
|
|
text-align: right;
|
|
}
|
|
.fusion-body .fusion-title .title-sep-container {
|
|
position: relative;
|
|
height: 6px;
|
|
flex-grow: 1;
|
|
}
|
|
.fusion-body .fusion-title.sep-underline {
|
|
display: block;
|
|
padding-bottom: 10px;
|
|
width: 100%;
|
|
border-bottom: 1px solid var(--awb-sep-color);
|
|
}
|
|
.fusion-body .fusion-title.sep-underline.sep-dashed {
|
|
border-bottom-style: dashed;
|
|
}
|
|
.fusion-body .fusion-title.sep-underline.sep-dotted {
|
|
border-bottom-style: dotted;
|
|
}
|
|
.fusion-body .fusion-title.sep-underline .title-heading-right {
|
|
margin: 0;
|
|
}
|
|
.fusion-body .fusion-title.sep-underline .title-heading-left,
|
|
.fusion-body .fusion-title.sep-underline .title-heading-right {
|
|
padding: 0;
|
|
}
|
|
.fusion-body .fusion-title .title-sep {
|
|
position: relative;
|
|
display: block;
|
|
width: 100%;
|
|
border-style: solid;
|
|
border: 0 solid var(--awb-sep-color);
|
|
box-sizing: content-box;
|
|
}
|
|
.fusion-body .fusion-title .title-sep.sep-double {
|
|
height: 6px;
|
|
border-bottom-width: 1px;
|
|
border-top-width: 1px;
|
|
}
|
|
.fusion-body .fusion-title .title-sep.sep-single {
|
|
border-bottom-width: 1px;
|
|
}
|
|
.fusion-body .fusion-title .title-sep.sep-dashed {
|
|
border-bottom-style: dashed;
|
|
border-top-style: dashed;
|
|
}
|
|
.fusion-body .fusion-title .title-sep.sep-dotted {
|
|
border-bottom-style: dotted;
|
|
border-top-style: dotted;
|
|
}
|
|
.fusion-body .fusion-title .fusion-animated-texts {
|
|
visibility: hidden;
|
|
}
|
|
.fusion-body .fusion-title .fusion-animated-texts-wrapper {
|
|
position: relative;
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
width: 0;
|
|
text-align: initial;
|
|
}
|
|
.fusion-body .fusion-title .fusion-animated-text {
|
|
opacity: 0;
|
|
position: absolute;
|
|
}
|
|
.fusion-body .fusion-title.fusion-title-typeIn .fusion-animated-texts-wrapper:before {
|
|
content: "";
|
|
position: absolute;
|
|
left: auto;
|
|
right: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
height: 90%;
|
|
width: 1px;
|
|
background-color: var(--awb-text-color);
|
|
animation: typeInCursor 1s infinite;
|
|
}
|
|
.fusion-body .fusion-title.fusion-title-clipIn span[class^="line"] {
|
|
overflow: hidden;
|
|
display: inline-flex !important;
|
|
width: 0;
|
|
}
|
|
.fusion-body .fusion-title.fusion-title-clipIn .fusion-animated-texts-wrapper:before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: auto;
|
|
right: 0;
|
|
width: 2px;
|
|
height: 100%;
|
|
background-color: var(--awb-text-color);
|
|
}
|
|
.fusion-body .fusion-title.fusion-title-highlight {
|
|
overflow: visible;
|
|
}
|
|
.fusion-body .fusion-title.fusion-title-highlight .fusion-highlighted-text {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
.fusion-body .fusion-title.fusion-title-highlight .fusion-highlighted-text-wrapper {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
.fusion-body .fusion-title.fusion-title-highlight .fusion-highlighted-text-wrapper svg {
|
|
display: none;
|
|
margin-top: var(--awb-highlight-top-margin);
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: calc(100% + .75em);
|
|
height: calc(100% + .75em);
|
|
transform: translate(-50%, -50%);
|
|
overflow: visible;
|
|
}
|
|
.fusion-body .fusion-title.fusion-title-highlight .fusion-highlighted-text-wrapper svg path {
|
|
stroke: var(--awb-highlight-color);
|
|
stroke-width: var(--awb-highlight-width);
|
|
fill: none;
|
|
stroke-dasharray: 1500;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
animation-duration: calc(var(--awb-highlight-animation-duration) * 5.26ms);
|
|
}
|
|
.fusion-body .fusion-title.fusion-title-highlight .fusion-highlighted-text-wrapper .awb-animate {
|
|
display: block;
|
|
}
|
|
.fusion-body .fusion-title.fusion-title-highlight.fusion-animate-loop.fusion-highlight-double_underline .fusion-highlighted-text-wrapper svg path:last-child,
|
|
.fusion-body .fusion-title.fusion-title-highlight.fusion-animate-loop.fusion-highlight-double .fusion-highlighted-text-wrapper svg path:last-child,
|
|
.fusion-body .fusion-title.fusion-title-highlight.fusion-animate-loop.fusion-highlight-x .fusion-highlighted-text-wrapper svg path:last-child {
|
|
opacity: 0;
|
|
animation-delay: calc(var(--awb-highlight-animation-duration) * 5.26ms / 22);
|
|
}
|
|
.fusion-body .fusion-title.fusion-title-highlight.fusion-animate-loop .fusion-highlighted-text-wrapper svg.awb-animate path {
|
|
animation-iteration-count: infinite;
|
|
animation-name: fusion-title-highlight-loop;
|
|
}
|
|
.fusion-body .fusion-title.fusion-title-highlight.fusion-animate-once .fusion-highlighted-text-wrapper svg.awb-animate path {
|
|
animation-name: fusion-title-highlight-once;
|
|
}
|
|
.fusion-body .fusion-title.fusion-title-highlight.fusion-animate-none .fusion-highlighted-text-wrapper svg {
|
|
display: block;
|
|
}
|
|
.fusion-body .fusion-title.fusion-title-highlight.fusion-highlight-circle .fusion-highlighted-text-wrapper svg {
|
|
height: calc(100% + 1.3em);
|
|
}
|
|
.fusion-body .fusion-title.fusion-highlight-marker .fusion-highlighted-text-wrapper {
|
|
margin: -0.075em -0.15em;
|
|
}
|
|
.fusion-body .fusion-title.fusion-highlight-marker .fusion-highlighted-text {
|
|
background-image: linear-gradient(to right, var(--awb-highlight-color-trans, var(--awb-highlight-color)), var(--awb-highlight-color-min, var(--awb-highlight-color)) 1%, var(--awb-highlight-color-max, var(--awb-highlight-color)) 5%, var(--awb-highlight-color-inter, var(--awb-highlight-color)) 99%, var(--awb-highlight-color-trans, var(--awb-highlight-color)) 100%);
|
|
background-size: 0% calc(var(--awb-highlight-width) * 1%);
|
|
background-position: left bottom;
|
|
background-repeat: no-repeat;
|
|
-webkit-box-decoration-break: clone;
|
|
box-decoration-break: clone;
|
|
padding: 0.075em 0.15em;
|
|
}
|
|
.fusion-body .fusion-title.fusion-highlight-marker.fusion-animate-loop .awb-animate {
|
|
animation-iteration-count: infinite;
|
|
animation-name: fusion-title-highlight-marker-loop;
|
|
animation-duration: calc(var(--awb-highlight-animation-duration) * 5.26ms);
|
|
}
|
|
.fusion-body .fusion-title.fusion-highlight-marker.fusion-animate-once .awb-animate {
|
|
animation-fill-mode: forwards;
|
|
animation-name: fusion-title-highlight-marker-once;
|
|
animation-duration: calc(var(--awb-highlight-animation-duration) * 5.26ms);
|
|
}
|
|
.fusion-body .fusion-title.fusion-highlight-marker.fusion-animate-none .fusion-highlighted-text {
|
|
background-size: 100% calc(var(--awb-highlight-width) * 1%);
|
|
}
|
|
.fusion-body .fusion-title.fusion-title-slideInDown {
|
|
overflow: hidden;
|
|
}
|
|
.fusion-body .fusion-title.fusion-text-has-stroke {
|
|
--awb-text-stroke-size: 1px;
|
|
--awb-text-stroke-color: var(--primary_color);
|
|
}
|
|
.fusion-body .fusion-title.fusion-text-has-stroke .fusion-title-heading {
|
|
-webkit-text-stroke: var(--awb-text-stroke-size) var(--awb-text-stroke-color);
|
|
}
|
|
.fusion-body .fusion-title.fusion-has-text-overflow {
|
|
--awb-text-overflow: "ellipsis";
|
|
}
|
|
.fusion-body .fusion-title.fusion-has-text-overflow .fusion-title-heading {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: var(--awb-text-overflow);
|
|
}
|
|
.fusion-body .awb-off-canvas-wrap .fusion-title .comment-reply-title,
|
|
.fusion-body .fusion-modal .fusion-title .comment-reply-title,
|
|
.fusion-body #wrapper .fusion-title .comment-reply-title,
|
|
.fusion-body .awb-off-canvas-wrap .fusion-title h1,
|
|
.fusion-body .fusion-modal .fusion-title h1,
|
|
.fusion-body #wrapper .fusion-title h1,
|
|
.fusion-body .awb-off-canvas-wrap .fusion-title h2,
|
|
.fusion-body .fusion-modal .fusion-title h2,
|
|
.fusion-body #wrapper .fusion-title h2,
|
|
.fusion-body .awb-off-canvas-wrap .fusion-title h3,
|
|
.fusion-body .fusion-modal .fusion-title h3,
|
|
.fusion-body #wrapper .fusion-title h3,
|
|
.fusion-body .awb-off-canvas-wrap .fusion-title h4,
|
|
.fusion-body .fusion-modal .fusion-title h4,
|
|
.fusion-body #wrapper .fusion-title h4,
|
|
.fusion-body .awb-off-canvas-wrap .fusion-title h5,
|
|
.fusion-body .fusion-modal .fusion-title h5,
|
|
.fusion-body #wrapper .fusion-title h5,
|
|
.fusion-body .awb-off-canvas-wrap .fusion-title h6,
|
|
.fusion-body .fusion-modal .fusion-title h6,
|
|
.fusion-body #wrapper .fusion-title h6,
|
|
.fusion-body .awb-off-canvas-wrap .fusion-title div.title-heading-tag,
|
|
.fusion-body .fusion-modal .fusion-title div.title-heading-tag,
|
|
.fusion-body #wrapper .fusion-title div.title-heading-tag,
|
|
.fusion-body .awb-off-canvas-wrap .fusion-title p.title-heading-tag,
|
|
.fusion-body .fusion-modal .fusion-title p.title-heading-tag,
|
|
.fusion-body #wrapper .fusion-title p.title-heading-tag {
|
|
flex-grow: 0;
|
|
padding: 0;
|
|
font-size: 1em;
|
|
color: var(--awb-text-color);
|
|
}
|
|
.awb-gradient-text {
|
|
background-size: 100%;
|
|
-webkit-background-clip: text;
|
|
-moz-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
-moz-text-fill-color: transparent;
|
|
}
|
|
.fusion-border-below-title {
|
|
display: block;
|
|
}
|
|
#main .post-content .fusion-border-below-title h1,
|
|
#main .post-content .fusion-border-below-title h2,
|
|
#main .post-content .fusion-border-below-title h3,
|
|
#main .post-content .fusion-border-below-title h4,
|
|
#main .post-content .fusion-border-below-title h5,
|
|
#main .post-content .fusion-border-below-title h6 {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
.fusion-border-below-title .title-sep-container {
|
|
display: none;
|
|
height: 8px;
|
|
}
|
|
/******************************
|
|
* Title highlight animations.
|
|
*******************************/
|
|
@keyframes fusion-title-highlight-loop {
|
|
0% {
|
|
stroke-dasharray: 0 1500;
|
|
opacity: 1;
|
|
}
|
|
19% {
|
|
stroke-dasharray: 1500 1500;
|
|
opacity: 1;
|
|
}
|
|
95% {
|
|
stroke-dasharray: 1500 1500;
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
stroke-dasharray: 1500 1500;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
@keyframes fusion-title-highlight-once {
|
|
0% {
|
|
stroke-dasharray: 0 1500;
|
|
opacity: 1;
|
|
}
|
|
19% {
|
|
stroke-dasharray: 1500 1500;
|
|
opacity: 1;
|
|
}
|
|
95% {
|
|
stroke-dasharray: 1500 1500;
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
stroke-dasharray: 1500 1500;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
@keyframes fusion-title-highlight-marker-loop {
|
|
0% {
|
|
background-size: 0% calc(var(--awb-highlight-width) * 1%);
|
|
background-position-x: left;
|
|
}
|
|
19% {
|
|
background-size: 100% calc(var(--awb-highlight-width) * 1%);
|
|
background-position-x: left;
|
|
}
|
|
95% {
|
|
background-size: 100% calc(var(--awb-highlight-width) * 1%);
|
|
background-position-x: right;
|
|
}
|
|
100% {
|
|
background-size: 0% calc(var(--awb-highlight-width) * 1%);
|
|
background-position-x: right;
|
|
}
|
|
}
|
|
@keyframes fusion-title-highlight-marker-once {
|
|
0% {
|
|
background-size: 0% calc(var(--awb-highlight-width) * 1%);
|
|
background-position-x: left;
|
|
}
|
|
19% {
|
|
background-size: 100% calc(var(--awb-highlight-width) * 1%);
|
|
background-position-x: left;
|
|
}
|
|
100% {
|
|
background-size: 100% calc(var(--awb-highlight-width) * 1%);
|
|
background-position-x: left;
|
|
}
|
|
}
|
|
/******************************
|
|
* Title rotation animations.
|
|
*******************************/
|
|
@keyframes typeIn {
|
|
from {
|
|
display: none;
|
|
}
|
|
to {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
@keyframes typeOut {
|
|
from {
|
|
display: inline-block;
|
|
}
|
|
to {
|
|
display: none;
|
|
}
|
|
}
|
|
@keyframes typeInCursor {
|
|
0% {
|
|
transform: translateY(-50%) scale(1);
|
|
opacity: 1;
|
|
}
|
|
40% {
|
|
transform: translateY(-50%) scale(0.9);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: translateY(-50%) scale(0);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
@keyframes bounceIn {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale(0.3);
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
transform: scale(1.05);
|
|
}
|
|
70% {
|
|
transform: scale(0.9);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
@keyframes bounceOut {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
25% {
|
|
transform: scale(0.95);
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
transform: scale(1.1);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: scale(0.3);
|
|
}
|
|
}
|
|
@keyframes fadeIn {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
@keyframes fadeOut {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
@keyframes flipInX {
|
|
from {
|
|
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
|
|
animation-timing-function: ease-in;
|
|
opacity: 0;
|
|
}
|
|
40% {
|
|
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
|
|
animation-timing-function: ease-in;
|
|
}
|
|
60% {
|
|
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
|
|
opacity: 1;
|
|
}
|
|
80% {
|
|
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
|
|
}
|
|
to {
|
|
transform: perspective(400px);
|
|
}
|
|
}
|
|
@keyframes flipOutX {
|
|
from {
|
|
transform: perspective(400px);
|
|
}
|
|
30% {
|
|
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
@keyframes lightSpeedIn {
|
|
0% {
|
|
transform: translateX(100%) skewX(-30deg);
|
|
opacity: 0;
|
|
}
|
|
60% {
|
|
transform: translateX(-20%) skewX(30deg);
|
|
opacity: 1;
|
|
}
|
|
80% {
|
|
transform: translateX(0%) skewX(-15deg);
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: translateX(0%) skewX(0deg);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
@keyframes lightSpeedOut {
|
|
0% {
|
|
transform: translateX(0%) skewX(0deg);
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: translateX(100%) skewX(-30deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
@keyframes rollIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
}
|
|
@keyframes rollOut {
|
|
from {
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
|
|
}
|
|
}
|
|
@keyframes slideInDown {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(-2000px);
|
|
}
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
@keyframes slideOutUpTitle {
|
|
0% {
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
100% {
|
|
visibility: hidden;
|
|
transform: translate3d(0, -100%, 0);
|
|
}
|
|
}
|
|
@keyframes zoomIn {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale3d(0.3, 0.3, 0.3);
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
@keyframes zoomOut {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0;
|
|
transform: scale3d(0.3, 0.3, 0.3);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.fusion-title-animated {
|
|
visibility: hidden;
|
|
animation-fill-mode: both;
|
|
animation-duration: 1s;
|
|
}
|
|
.fusion-title-animated.typeIn,
|
|
.fusion-title-animated.typeOut {
|
|
animation-duration: 0.1s;
|
|
}
|
|
.fusion-title-animated.bounceIn {
|
|
animation-name: bounceIn;
|
|
}
|
|
.fusion-title-animated.bounceOut {
|
|
animation-name: bounceOut;
|
|
}
|
|
.fusion-title-animated.fadeIn {
|
|
animation-name: fadeIn;
|
|
}
|
|
.fusion-title-animated.fadeOut {
|
|
animation-name: fadeOut;
|
|
}
|
|
.fusion-title-animated.flipInX {
|
|
animation-name: flipInX;
|
|
}
|
|
.fusion-title-animated.flipOutX {
|
|
animation-name: flipOutX;
|
|
}
|
|
.fusion-title-animated.lightSpeedIn {
|
|
animation-name: lightSpeedIn;
|
|
animation-timing-function: ease-out;
|
|
}
|
|
.fusion-title-animated.lightSpeedOut {
|
|
animation-name: lightSpeedOut;
|
|
animation-timing-function: ease-in;
|
|
}
|
|
.fusion-title-animated.rollIn {
|
|
animation-name: rollIn;
|
|
}
|
|
.fusion-title-animated.rollOut {
|
|
animation-name: rollOut;
|
|
}
|
|
.fusion-title-animated.typeIn {
|
|
animation-name: typeIn;
|
|
}
|
|
.fusion-title-animated.typeOut {
|
|
animation-name: typeOut;
|
|
}
|
|
.fusion-title-animated.slideInDown {
|
|
animation-name: slideInDown;
|
|
}
|
|
.fusion-title-animated.slideOutUp {
|
|
animation-name: slideOutUpTitle !important;
|
|
}
|
|
.fusion-title-animated.zoomIn {
|
|
animation-name: zoomIn;
|
|
}
|
|
.fusion-title-animated.zoomOut {
|
|
animation-name: zoomOut;
|
|
}
|
|
.fusion-title-marquee .fusion-title-heading {
|
|
display: flex;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
.fusion-title-marquee .awb-marquee-masked {
|
|
-webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
|
|
mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
|
|
}
|
|
.fusion-title-marquee .awb-marquee-content {
|
|
padding: 0 0.2em;
|
|
animation: marquee var(--awb-marquee-speed) linear infinite;
|
|
}
|
|
@keyframes marquee {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
100% {
|
|
transform: translateX(var(--awb-marquee-translate-x));
|
|
}
|
|
}
|
|
.awb-title__scroll-reveal--color_change {
|
|
--awb-animation-base-color: var(--awb-text-color);
|
|
}
|
|
.awb-title__scroll-reveal--color_change a {
|
|
--awb-animation-base-color: var(--awb-link-color);
|
|
}
|
|
.awb-title__scroll-reveal--color_change[data-scroll-reveal-basis="lines"] a:hover .line,
|
|
.awb-title__scroll-reveal--color_change[data-scroll-reveal-basis="words"] a:hover .word,
|
|
.awb-title__scroll-reveal--color_change[data-scroll-reveal-basis="chars"] a:hover .char {
|
|
color: inherit;
|
|
}
|
|
.awb-title__scroll-reveal--color_change[data-scroll-reveal-basis="lines"] .line,
|
|
.awb-title__scroll-reveal--color_change[data-scroll-reveal-basis="words"] .word,
|
|
.awb-title__scroll-reveal--color_change[data-scroll-reveal-basis="chars"] .char {
|
|
color: transparent;
|
|
background-image: linear-gradient(to right, var(--awb-animated-text-color) 50%, var(--awb-animation-base-color) 50%);
|
|
background-size: 200% 100%;
|
|
background-position-x: 100%;
|
|
background-clip: text;
|
|
transition: color 0.2s;
|
|
}
|