/***** Geral *****/
html {
--slideVerticalIntro: 100%;
}
/*.titulo, .texto, .botao, .anime-img img {
visibility:hidden;
}*/
/* ============================================
EVERBREW DESIGN SYSTEM
Unified CSS Variables - Elementor + Gutenberg
============================================
MAPEAMENTO ELEMENTOR SITE KIT (post-24074.css):
-----------------------------------------------
--e-global-color-primary: #99C33F (Verde Principal)
--e-global-color-secondary: #7CA622 (Verde Escuro)
--e-global-color-text: #1A171B (Texto Principal)
--e-global-color-accent: #5C8309 (Verde Accent/CTA)
--e-global-color-8b63731: #00000000 (Transparente)
--e-global-color-09173ac: #FFFFFF (Branco)
--e-global-color-f578313: #000000 (Preto)
--e-global-color-1939eb6: #BAE267 (Verde Claro)
--e-global-color-8c412e4: #D5F397 (Verde Muito Claro)
--e-global-color-9219da7: #18101A (Quase Preto)
--e-global-color-f0cc227: #150A19 (Roxo Escuro)
--e-global-color-fdd2a9f: #443C47 (Cinza Escuro)
--e-global-color-73de3fa: #665A69 (Cinza Médio)
--e-global-color-3976a40: #A02E2E (Vermelho Erro)
--e-global-color-df14112: #1978AF (Azul Info)
--e-global-color-0dd0579: #F29003 (Laranja Warning)
TIPOGRAFIA:
--e-global-typography-primary-font-family: "Press Feeling"
--e-global-typography-secondary-font-family: "Press Feeling"
--e-global-typography-text-font-family: "Montserrat"
--e-global-typography-accent-font-family: "Montserrat"
============================================ */
/* ============================================
VARIÁVEIS SEMÂNTICAS EVERBREW
Mapeadas para variáveis do Elementor
============================================ */
:root {
/* ==========================================
CORES PRINCIPAIS (do Elementor Site Kit)
========================================== */
/* Verde Principal - Brand Color */
--everbrew-primary: var(--e-global-color-primary, #99C33F);
/* Verde Escuro - Secondary */
--everbrew-secondary: var(--e-global-color-secondary, #7CA622);
/* Verde Accent - CTAs e destaques */
--everbrew-accent: var(--e-global-color-accent, #5C8309);
/* Verde Claro - Highlights */
--everbrew-light: var(--e-global-color-1939eb6, #BAE267);
/* Verde Muito Claro - Backgrounds suaves */
--everbrew-lighter: var(--e-global-color-8c412e4, #D5F397);
/* ==========================================
CORES DE TEXTO
========================================== */
/* Texto Principal */
--everbrew-text: var(--e-global-color-text, #1A171B);
--everbrew-text-primary: var(--e-global-color-text, #1A171B);
/* Texto Escuro (quase preto) */
--everbrew-text-dark: var(--e-global-color-9219da7, #18101A);
/* Texto em superfícies escuras */
--everbrew-text-light: var(--e-global-color-09173ac, #FFFFFF);
/* Texto Secundário */
--everbrew-text-secondary: var(--e-global-color-73de3fa, #665A69);
/* Texto Muted */
--everbrew-text-muted: var(--e-global-color-fdd2a9f, #443C47);
/* ==========================================
CORES NEUTRAS
========================================== */
/* Branco */
--everbrew-white: var(--e-global-color-09173ac, #FFFFFF);
/* Preto */
--everbrew-black: var(--e-global-color-f578313, #000000);
/* Transparente */
--everbrew-transparent: var(--e-global-color-8b63731, transparent);
/* Backgrounds escuros */
--everbrew-dark: var(--e-global-color-f0cc227, #150A19);
--everbrew-darker: var(--e-global-color-9219da7, #18101A);
/* ==========================================
CORES DE STATUS/FEEDBACK
========================================== */
/* Erro */
--everbrew-error: var(--e-global-color-3976a40, #A02E2E);
--everbrew-danger: var(--e-global-color-3976a40, #A02E2E);
/* Info */
--everbrew-info: var(--e-global-color-df14112, #1978AF);
/* Warning */
--everbrew-warning: var(--e-global-color-0dd0579, #F29003);
/* Success - usa o verde principal */
--everbrew-success: var(--e-global-color-primary, #99C33F);
/* ==========================================
CORES DO TEMA (Light/Dark Mode)
========================================== */
/* Backgrounds */
--everbrew-bg-primary: var(--e-global-color-09173ac, #FFFFFF);
--everbrew-bg-secondary: var(--e-global-color-8c412e4, #D5F397);
--everbrew-bg-dark: var(--e-global-color-9219da7, #18101A);
/* Bordas */
--everbrew-border: var(--e-global-color-fdd2a9f, #443C47);
--everbrew-border-light: rgba(255, 255, 255, 0.2);
/* Header */
--everbrew-header-bg: rgba(255, 255, 255, 0.95);
--everbrew-header-bg-dark: rgba(24, 16, 26, 0.95);
/* Icons - herda das cores de texto */
--everbrew-icon-fill: var(--everbrew-text);
--everbrew-icon-stroke: var(--everbrew-text);
/* ==========================================
UTILIDADES
========================================== */
/* Transições */
--everbrew-transition: 0.3s ease;
--everbrew-transition-fast: 0.15s ease;
--everbrew-transition-slow: 0.5s ease;
/* Sombras */
--everbrew-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--everbrew-shadow-md: 0 4px 10px rgba(0, 0, 0, 0.05);
--everbrew-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
/* Border Radius (do Site Kit) */
--everbrew-radius-sm: 12px;
--everbrew-radius-md: 25px;
--everbrew-radius-lg: 50px;
--everbrew-radius-full: 9999px;
}
/* ============================================
DARK THEME (Non-Member View)
Inverte cores para modo escuro
============================================ */
body.theme-dark {
/* Inverte backgrounds */
--everbrew-bg-primary: var(--e-global-color-9219da7, #18101A);
--everbrew-bg-secondary: var(--e-global-color-f0cc227, #150A19);
/* Inverte textos */
--everbrew-text: var(--e-global-color-09173ac, #FFFFFF);
--everbrew-text-primary: var(--e-global-color-09173ac, #FFFFFF);
--everbrew-text-secondary: var(--e-global-color-73de3fa, #665A69);
/* Bordas mais claras */
--everbrew-border: var(--e-global-color-73de3fa, #665A69);
--everbrew-border-light: rgba(255, 255, 255, 0.1);
/* Header escuro */
--everbrew-header-bg: var(--everbrew-header-bg-dark);
/* Icons claros */
--everbrew-icon-fill: var(--e-global-color-09173ac, #FFFFFF);
--everbrew-icon-stroke: var(--e-global-color-09173ac, #FFFFFF);
}
/* ============================================
COMPATIBILIDADE GUTENBERG
Mapeia variáveis WordPress para Everbrew
============================================ */
:root {
/* WordPress/Gutenberg color palette */
--wp--preset--color--primary: var(--everbrew-primary);
--wp--preset--color--secondary: var(--everbrew-secondary);
--wp--preset--color--accent: var(--everbrew-accent);
--wp--preset--color--background: var(--everbrew-bg-primary);
--wp--preset--color--foreground: var(--everbrew-text);
}
/* Transição suave entre temas */
body {
transition:
background-color var(--everbrew-transition),
color var(--everbrew-transition);
}
/* ============================================
SWITCHER BUTTONS (#switcher-member)
============================================ */
#switcher-member {
position: relative;
}
#switcher-member .elementor-social-icons-wrapper {
gap: 5px !important;
}
#switcher-member .elementor-social-icon {
transition:
transform var(--everbrew-transition-fast),
opacity var(--everbrew-transition-fast),
background-color var(--everbrew-transition),
box-shadow var(--everbrew-transition) !important;
cursor: pointer;
}
/* Estado inativo */
#switcher-member .elementor-social-icon:not(.active) {
opacity: 0.5;
}
/* Estado ativo - usa verde principal do Elementor */
#switcher-member .elementor-social-icon.active {
opacity: 1;
background-color: var(--everbrew-primary) !important;
box-shadow: 0 0 10px rgba(153, 195, 63, 0.5);
}
/* Hover */
#switcher-member .elementor-social-icon:hover {
opacity: 1;
transform: scale(1.1);
}
/* Ícones SVG dentro dos botões */
#switcher-member .elementor-social-icon svg {
transition: fill var(--everbrew-transition);
}
/* Member view: botão member ativo (verde principal) */
body.member-view #switcher-member [data-switcher="member"] {
background-color: var(--everbrew-primary) !important;
}
body.member-view #switcher-member [data-switcher="member"] svg {
fill: var(--everbrew-text-dark) !important;
}
body.member-view #switcher-member [data-switcher="non-member"] {
background-color: var(--everbrew-border) !important;
opacity: 0.6;
}
/* Non-member view: botão non-member ativo (escuro) */
body.non-member-view #switcher-member [data-switcher="non-member"] {
background-color: var(--everbrew-text-secondary) !important;
}
body.non-member-view #switcher-member [data-switcher="non-member"] svg {
fill: var(--everbrew-white) !important;
}
body.non-member-view #switcher-member [data-switcher="member"] {
background-color: var(--everbrew-text-muted) !important;
opacity: 0.6;
}
body.non-member-view #switcher-member [data-switcher="member"] svg {
fill: var(--everbrew-text-secondary) !important;
}
/* ============================================
HEADER ELEMENTS - SVG Color Changes
============================================ */
/* Everclub logo SVG - ajustar cores baseado no tema */
body.theme-light .elementor-sticky svg .cls-1,
body.theme-light .elementor-sticky svg .cls-3 {
stroke: var(--everbrew-text-dark);
}
body.theme-light .elementor-sticky svg .cls-2 {
fill: var(--everbrew-text-dark);
}
body.theme-dark .elementor-sticky svg .cls-1,
body.theme-dark .elementor-sticky svg .cls-3 {
stroke: var(--everbrew-white);
}
body.theme-dark .elementor-sticky svg .cls-2 {
fill: var(--everbrew-white);
}
/* Header background */
body.theme-light .elementor-sticky {
background-color: var(--everbrew-header-bg) !important;
}
body.theme-dark .elementor-sticky {
background-color: var(--everbrew-header-bg) !important;
}
/* Menu cart icon colors */
body.theme-light .elementor-menu-cart__toggle_button svg {
fill: var(--everbrew-text-dark);
}
body.theme-dark .elementor-menu-cart__toggle_button svg {
fill: var(--everbrew-white);
}
/* Menu cart text color */
body.theme-light .elementor-menu-cart__toggle_button .elementor-button-text {
color: var(--everbrew-text-dark);
}
body.theme-dark .elementor-menu-cart__toggle_button .elementor-button-text {
color: var(--everbrew-white);
}
/* ============================================
PRICE DISPLAY - Member/Non-Member Toggle
============================================ */
/* Por padrão, mostrar preços de membro */
body.member-view .nmembro-valores,
body.member-view .price-non-member,
body.member-view [data-price-type="non-member"] {
display: none !important;
}
body.member-view .membro-valores,
body.member-view .price-member,
body.member-view [data-price-type="member"] {
display: block !important;
}
/* Non-member view: inverter */
body.non-member-view .membro-valores,
body.non-member-view .price-member,
body.non-member-view [data-price-type="member"] {
display: none !important;
}
body.non-member-view .nmembro-valores,
body.non-member-view .price-non-member,
body.non-member-view [data-price-type="non-member"] {
display: block !important;
}
/* Estilos dos valores de membro/não-membro */
.membro-valores,
.nmembro-valores {
padding: 5px 0;
}
.membros-valor,
.naomembros-valor {
display: block;
}
.membros-valor small,
.naomembros-valor small {
font-size: 0.75em;
opacity: 0.7;
display: block;
margin-bottom: 2px;
}
/* Badge de membro no preço */
body.member-view .membros-valor::before {
content: '🍺';
margin-right: 5px;
}
/* ============================================
ANIMATIONS
============================================ */
/*
* Animação de transição do tema REMOVIDA
* Estava causando efeito visual indesejado no carregamento da página
* Comentado para referência futura caso queira reativar
*/
/*
@keyframes theme-switch {
0% {
opacity: 0.8;
transform: scale(0.98);
}
100% {
opacity: 1;
transform: scale(1);
}
}
body.theme-light,
body.theme-dark {
animation: theme-switch 0.3s ease forwards;
}
*/
/* Pulse no botão ativo - usa verde principal */
@keyframes switcher-pulse {
0%, 100% {
box-shadow: 0 0 0 0 rgba(153, 195, 63, 0.4);
}
50% {
box-shadow: 0 0 0 8px rgba(153, 195, 63, 0);
}
}
#switcher-member .elementor-social-icon.active {
animation: switcher-pulse 2s infinite;
}
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 767px) {
#switcher-member .elementor-social-icon {
width: 36px !important;
height: 36px !important;
}
#switcher-member .elementor-social-icon svg {
width: 16px !important;
height: 16px !important;
}
}
/**** Keyframes *****/
@keyframes blur {
0% {
transform: translate(-0.1em, 0) scale(0.9) rotate(-2deg);
}
50% {
transform: translate(0, 0) scale(1.1) rotate(0deg);
}
100% {
transform: translate(0.1em, 0) scale(0.9) rotate(2deg);
}
}
@keyframes plop {
0% {
opacity: 0;
transform: translate3d(0px, 10px, 400px) rotate(180deg);
animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.25);
}
20% {
transform: translate3d(0px, -20px, 200px) rotate(90deg);
animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1.1);
}
40%, 70% {
opacity: 1;
transform: translate3d(0px, 0px, 0px) rotate(0deg);
}
90%, 100% {
opacity: 0;
transform: translate3d(0px, 10px, -200px) rotate(-90deg);
animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.25);
}
}
@keyframes fall-in {
0% {
transform: translateY(-150%) rotate(-120deg);
opacity: 0;
}
20% {
opacity: 0;
}
100% {
transform: translateY(0%) rotate(0deg);
opacity: 1;
}
}
@keyframes fall-out {
50% {
transform: translateY(10%) rotate(15deg);
transform-origin: bottom left;
opacity: 1;
}
100% {
transform: translateY(250%) rotate(120deg);
transform-origin: center center;
opacity: 0;
}
}
@keyframes bounce-end {
to {
transform: translateY(0%) scale(1);
}
}
@keyframes bounce-char {
20% {
transform: translateY(0%) scale(1.3, 0.8);
}
70% {
transform: translateY(-40%) scale(0.8, 1.2);
}
}
@keyframes wiggle-char {
0%, 50%, 100% {
transform: rotate(0deg);
}
25% {
transform: rotate(6deg);
}
75% {
transform: rotate(-6deg);
}
}
@keyframes wiggle-char {
0%, 50%, 100% {
transform: rotate(0deg);
}
25% {
transform: rotate(6deg);
}
75% {
transform: rotate(-6deg);
}
}
@keyframes glitch-bounce {
20% {
transform: translate(-1%, 0%);
}
40% {
transform: translate(14%, -2%);
}
50% {
transform: translate(-5%, 5%);
}
65% {
transform: translate(1%, -2%);
}
80% {
transform: translate(-3%, 2%);
}
}
@keyframes glitch-anim {
0% {
clip-path: polygon(0 70%, 100% 70%, 100% 75%, 0 75%);
}
20% {
clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
}
40% {
clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
}
60% {
clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
}
80% {
clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
}
100% {
clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
}
}
@keyframes color-cycle {
25% {
color: #feff89;
}
50% {
color: #ff9f68;
}
75% {
color: #f85959;
}
100% {
color: #ac005d;
}
}
@keyframes pop-char-out {
0%, 70%, 100% {
transform: translate(0em, 0em);
}
35% {
transform: translate(0.05em, -0.1em);
}
}
@keyframes pop-char-out2 {
0%, 70%, 100% {
transform: translate(0em, 0em);
}
35% {
transform: translate(0.025em, -0.05em);
}
}
/*** Blur-it Splitting ***/
.blur-it .char {
color: var(--e-global-color-primary );
transition: opacity 0.2s linear;
}
.blur-it .char:before, .blur-it .char:after {
visibility: visible;
opacity: 0;
}
.blur-it:hover .char {
color: rgb(var(--e-global-color-primary ) / 50%);
}
.blur-it:hover .char:before, .blur-it:hover .char:after {
opacity: 0.8;
animation: blur 0.6s linear infinite alternate;
animation-delay: calc(-0.2s * var(--distance-percent));
}
.blur-it:hover .char:after {
animation-delay: calc(0.3s + (-0.2s * var(--distance-percent)));
}
/*** Plop-it Splitting ***/
.plop-it {
perspective: 500px;
transform-style: preserve-3d;
}
.plop-it:hover .char {
animation: plop 2s ease-out infinite both;
animation-delay: calc(0.05s * var(--char-index));
}
/*** Plump-it Splitting ***/
.plump-it, .pinch-it {
perspective: 300px;
transform-style: preserve-3d;
}
.plump-it .char, .pinch-it .char {
transition: transform 0.4s cubic-bezier(0.8, 0, 0, 0.8);
transition-delay: calc(0.06s * var(--distance-percent));
}
.plump-it:hover .char {
transform: translateX(calc(-0.5em * var(--distance-sine))) translateZ(calc(100px * (1 - var(--distance-percent) ))) rotateY(calc(40deg * var(--distance-sine)));
}
.pinch-it:hover .char {
transform: translateX(calc(-1em * var(--distance-sine))) translateZ(calc(-150px * (1 - var(--distance-percent) ))) rotateY(calc(-60deg * var(--distance-sine)));
}
/*** Stagger-it Splitting ***/
.stagger-it .char {
transition: color 0.5s linear;
transition-delay: calc(0.04s * var(--char-index));
}
.stagger-it:hover, .stagger-it:hover .elementor-heading-title {
color: var(--e-global-color-secondary)!important;
}
.elementor-widget-heading .elementor-heading-title
/*** Stretch-it Splitting ***/
.stretch-it .char {
transition: transform 0.5s cubic-bezier(0.8, 0, 0, 0.9);
}
.stretch-it:hover .char {
transform: scale(0.8, 0.8);
}
.stretch-it .char:hover {
transform: scale(0.9, 1.5);
transition-duration: 0.3s;
}
/*** Slide Vertical/Horizontal Splitting ***/
.slide-vertical .char, .slide-horizontal .char {
overflow: hidden;
color: transparent;
}
.slide-vertical .char:before, .slide-horizontal .char:before, .slide-vertical .char:after, .slide-horizontal .char:after {
visibility: visible;
color: var(--e-global-color-primary );
transition: transform 0.5s cubic-bezier(0.9, 0, 0.2, 1);
transition-delay: calc(0.2s + ( 0.02s * ( var(--char-index)) ));
transform: translateY(var(--slideVerticalIntro));
}
.slide-vertical .char:before, .slide-horizontal .char:before {
color: var(--e-global-color-secondary);
transition-delay: calc(0.02s * ( var(--char-index)));
}
.slide-vertical:hover .char:before, .slide-horizontal:hover .char:before {
transition-delay: calc(0.2s + ( 0.02s * ( var(--char-index)) ));
}
.slide-vertical:hover .char:after, .slide-horizontal:hover .char:after {
transition-delay: calc(0.02s * ( var(--char-index)));
}
.slide-vertical .char:before {
transform: translateY(-100%);
}
.slide-vertical:hover .char:before {
transform: translateY(0%);
}
.slide-vertical:hover .char:after {
transform: translateY(100%);
}
.slide-horizontal .char:before {
transform: translateX(110%);
}
.slide-horizontal:hover .char:before {
transform: translateX(0%);
}
.slide-horizontal:hover .char:after {
transform: translateX(-110%);
}
/*** Fall-out Splitting ***/
.fall-out .char {
transition: transform 0.5s cubic-bezier(0.86, 0.01, 0.14, 0.98);
color: transparent;
}
.fall-out .char:before, .fall-out .char:after {
visibility: visible;
color: var(--e-global-color-primary );
animation-timing-function: cubic-bezier(0.77, 0.02, 0.11, 0.97);
animation-fill-mode: both;
animation-delay: calc(0.75s + (0.05s * var(--char-index)));
animation-duration: 1s;
}
.fall-out .char:after {
animation-delay: calc(0.05s * var(--char-index));
}
.fall-out:hover .char:before {
animation-name: fall-in;
}
.fall-out:hover .char:after {
animation-name: fall-out;
}
/*** Run-out Splitting ***/
.run-out {
width: 100%;
overflow: hidden;
pointer-events: none;
}
.run-out .word {
pointer-events: auto;
}
.run-out .char {
color: transparent;
}
.run-out .char:before, .run-out .char:after {
visibility: visible;
color: var(--e-global-color-primary );
transition: transform 1.2s cubic-bezier(0.77, 0.02, 0.11, 0.97);
transition-delay: calc(0.04s * var(--char-total) + (0.08s * var(--char-index)));
}
.run-out .char:before {
transform: translateX(-100vw) rotate(-35deg);
transition-delay: calc(0.04s * var(--char-index));
}
.run-out:hover .char:before {
transform: translateX(0) rotate(0deg);
transition-delay: calc(0.04s * var(--char-total) + (0.08s * (var(--char-total) - var(--char-index))));
}
.run-out:hover .char:after {
transform: translateX(100vw) rotate(35deg);
transition-delay: calc((0.04s * (var(--char-total) - var(--char-index))));
}
/*** Shift-right Splitting ***/
.shift-right:before {
content: '>';
font: inherit;
vertical-align: 0.1em;
display: inline-block;
transform: scaleY(0) translateX(-1em);
margin-right: -0.25em;
}
.shift-right:before, .shift-right .char {
transition: transform 0.8s cubic-bezier(0.75, 0, 0.24, 0.98);
transition-delay: calc(0.015s * var(--char-index));
}
.shift-right .char {
transform: translateX(-0.15em);
}
.shift-right:hover:before {
transform: scaleY(1) translateX(0em);
}
.shift-right:hover .char {
transform: translateX(1em);
transform: translateX(0.5em) translateX(calc(0.1em * var(--char-index)));
}
/*** Spread-Out Splitting ***/
.spread-out .char {
transition: transform 1s cubic-bezier(0.8, 0, 0.2, 1);
transition-delay: calc(0.2s * var(--distance-percent));
}
.spread-out:hover .char {
transition-delay: calc(0.2s * ( 1 - var(--distance-percent) ));
transform: scale(0.6) translateX(calc(1.25em * var(--distance-sine)));
}
.pull-in .char {
transition: transform 1s cubic-bezier(0.8, 0, 0.2, 1);
transition-delay: calc(0.2s * ( 1 - var(--distance-percent) ));
}
.pull-in:hover .char {
transition-delay: calc(0.2s * var(--distance-percent));
transform: scale(0.5) translateX(calc(0em * var(--distance-sine)));
}
/*** inflate-it Splitting ***/
.inflate-it .char {
transform: scale(1) translateX(0em);
text-shadow: 0 0 5px rgba(0, 0, 0, 0);
transition: transform 0.8s cubic-bezier(0.75, 0, 0.24, 0.98), text-shadow 0.8s linear;
transition-delay: calc(0.18s * var(--distance-percent));
}
.inflate-it:hover .char {
text-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
transform: scale(calc(1 + ( 0.7 * ( 1 - var(--distance-percent) ) ))) translateX(calc(-0.12em * var(--distance-sine)));
transition-delay: calc(0.08s * var(--distance-percent));
}
/*** Bounce-it Splitting ***/
.bounce-it .char {
line-height: 1;
transform-origin: center bottom;
animation-timing-function: cubic-bezier(0.77, 0.02, 0.11, 0.97);
animation-iteration-count: infinite;
animation-fill-mode: both;
animation-delay: calc(0.05s * var(--char-index));
animation-duration: calc(0.2s + ( 0.03s * var(--char-total)));
}
.bounce-it:hover .char {
animation-name: bounce-char;
}
/*** Wiggle-it Splitting ***/
.wiggle-it:hover .char {
transform-origin: center 50%;
animation: wiggle-char 0.25s linear infinite both;
animation-delay: calc(-0.02s * var(--char-index));
}
/*** Zip-it Splitting ***/
.zip-it .char, .split-it .char {
color: var(--e-global-color-primary );
}
.zip-it .char, .split-it .char, .zip-it .char:before, .split-it .char:before, .zip-it .char:after, .split-it .char:after {
transition: transform 0.8s cubic-bezier(0.75, 0, 0.25, 1);
transition-delay: calc(0.2s * var(--distance-percent));
}
.zip-it .char:before, .split-it .char:before, .zip-it .char:after, .split-it .char:after {
visibility: visible;
color: var(--e-global-color-secondary );
}
.zip-it .char:before, .split-it .char:before {
clip-path: polygon(0 0, 100% 0, 100% 54%, 0 54%);
}
.zip-it .char:after, .split-it .char:after {
clip-path: polygon(0 46%, 100% 46%, 100% 100%, 0 100%);
}
.zip-it:hover .char:before, .split-it:hover .char:before {
transform: translateY(-45%) scaleY(0);
}
.zip-it:hover .char:after, .split-it:hover .char:after {
transform: translateY(45%) scaleY(0);
}
.zip-it .char, .zip-it .char:before, .zip-it .char:after {
transition-delay: calc(0.5s * ( 1 - var(--char-percent) ));
}
.zip-it:hover .char, .zip-it:hover .char:before, .zip-it:hover .char:after {
transition-delay: calc(0.5s * var(--char-percent));
}
/*** Glitch-it Splitting ***/
.glitch-it .char, .glitch-it .char:before, .glitch-it .char:after {
transition: color 0.2s linear;
animation-duration: 0.6s, 0.4s;
animation-iteration-count: infinite;
animation-timing-function: steps(1);
animation-delay: calc(-0.1s * var(--char-index));
}
.glitch-it .char:before, .glitch-it .char:after {
visibility: visible;
opacity: 0;
mix-blend-mode: overlay;
transition-property: opacity;
animation-name: glitch-anim, glitch-bounce;
animation-play-state: paused;
}
.glitch-it .char:before {
color: var(--e-global-color-primary );
animation-delay: calc(-0.02s * var(--char-index));
}
.glitch-it .char:after {
color: var(--e-global-color-secondary );
animation-delay: calc(-.5s * var(--char-index));
}
.glitch-it:hover .char {
color: rgba(255, 255, 255, 0.3);
animation-name: glitch-bounce;
}
.glitch-it:hover .char:before, .glitch-it:hover .char:after {
opacity: 1;
animation-play-state: running;
}
/*** Frown-it Splitting ***/
.frown-it .char, .smile-it .char {
transition: transform 1s cubic-bezier(0.75, 0, 0.25, 1);
transition-duration: calc(0.3s + ( 0.03s * var(--distance-percent)));
}
.frown-it:hover .char {
transform: translateY(calc(1.2em * var(--distance-percent))) rotate(calc(30deg * var(--distance-sine)));
}
.smile-it:hover .char {
transform: translateY(calc(-1em * var(--distance-percent))) rotate(calc(-35deg * var(--distance-sine)));
}
/*** Flip-it Splitting ***/
.flip-it .char, .flip-3d .char {
transition: transform 0.6s cubic-bezier(0.6, 0, 0, 0.6);
transition-delay: calc(0.3s * ( 1 - var(--distance-percent)));
transition-delay: calc(0.3s * var(--distance-percent));
}
.flip-it:hover .char, .flip-3d:hover .char {
transform: rotateX(-1turn);
transition-duration: 1s;
transition-delay: calc(0.3s * var(--distance-percent));
transition-delay: calc(0.3s * ( 1 - var(--distance-percent)));
}
.flip-3d {
perspective: 200px;
transform-style: preserve-3d;
}
/*** Elevate-it Splitting ***/
.elevate-it {
perspective: 400px;
transform-style: preserve-3d;
}
.elevate-it .char {
transition: transform 0.8s cubic-bezier(0.5, 0, 0, 0.9);
transition-delay: calc(0.1s * (1 - var(--distance-percent)));
color: transparent;
}
.elevate-it .char:before, .elevate-it .char:after {
visibility: visible;
}
.elevate-it .char:before {
color: var(--everbrew-black);
opacity: 0.85;
transform: translateY(0%) rotateX(45deg) scale(1, 0);
transform-origin: center 80%;
}
.elevate-it .char:after {
color: var(--e-global-color-primary );
}
.elevate-it:hover .char:before {
transform: translateY(0%) rotateX(55deg) scale(0.8);
transform: translateY(0%) rotateX(55deg) scale(0.8, calc(0.4 + (0.4 * ( 1 - var(--distance-percent)))));
}
.elevate-it:hover .char:after {
transform: translateY(-20%) rotateX(55deg);
transform: translateY(-50%) translateY(calc(30% * var(--distance-percent))) rotateX(55deg);
}
/*** Color Cycle Splitting ***/
.color-cycle:hover .char {
animation: color-cycle 1s cubic-bezier(0.5, 0, 0.5, 1) infinite alternate;
animation-delay: calc(0.03s * var(--char-index));
animation-duration: calc(0.04s * calc( var(--char-total) ));
}
/*** Rainbow-it Splitting ***/
.rainbow-it .char {
transition: color 0.6s linear;
transition-delay: calc(0.2s * (1 - var(--distance-percent)));
}
.rainbow-it:hover .char {
color: var(--e-global-color-primary );
}
/*** Pop-out Splitting ***/
.pop-out .char {
color: var(--e-global-color-primary );
}
.pop-out .char:after {
visibility: visible;
color: var(--e-global-color-primary );
z-index: 2;
animation-timing-function: cubic-bezier(0.5, 0.5, 1), linear;
animation-iteration-count: infinite;
animation-duration: calc(0.08s * calc( var(--char-total) ));
animation-delay: calc(0.08s * var(--char-index));
}
.pop-out:hover .char:after {
animation-name: pop-char-out;
}
/*** Pop-out Color Splitting ***/
.pop-out-color .char,
.pop-out-color .elementor-heading-title .char {
color: var(--e-global-color-secondary );
animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1), linear;
animation-iteration-count: infinite;
animation-duration: calc(0.08s * calc( var(--char-total) ));
animation-delay: calc(0.08s * var(--char-index));
}
.pop-out-color .char:before, .pop-out-color .char:after,
.pop-out-color .elementor-heading-title .char:before, .pop-out-color .elementor-heading-title .char:after {
visibility: visible;
color: var(--e-global-color-primary );
z-index: 1;
animation: inherit;
}
.pop-out-color .elementor-heading-title .char:after {
color: var(--e-global-color-primary );
z-index: 2;
}
.pop-out-color:hover .elementor-heading-title .char {
animation-name: color-cycle;
}
.pop-out-color:hover .elementor-heading-title .char:after {
animation-name: pop-char-out;
}
.pop-out-color:hover .elementor-heading-title .char:before {
animation-name: pop-char-out2, color-cycle;
}