/* Theme Name: Bricks Child Theme Theme URI: https://bricksbuilder.io/ Description: Use this child theme to extend Bricks. Author: Bricks Author URI: https://bricksbuilder.io/ Template: bricks Version: 1.1 Text Domain: bricks */ /*===================================================*/ /*================== CSS DESTE SITE =================*/ /*===================================================*/ /*===================================================*/ /*============== CSS GLOBAL 221B BRICKS =============*/ /*===================================================*/ /* ESPAÇAMENTO SUPERIOR EM PÁGINAS CRIADAS COM GUTEMBERG */ article { padding-top:var(--distancia-m); padding-bottom:var(--distancia-m); } /*================================== == MATRIZ BREAKPOINTS == ==================================== \ / \/ */ /* Desktop G */ @media (min-width:1921px) { } /* Note G e Desktop P */ @media (min-width: 1367px) and (max-width:1920px) { } /* Notebook P */ @media (min-width: 821px) and (max-width:1366px) { } /* Tablet */ @media (min-width: 481px) and (max-width:820px) { } /* Celular */ @media (max-width:480px) { } /* /\ / \ ==================================== == MATRIZ BREAKPOINTS == ==================================*/ /*================================== == TEXTO == ==================================== \ / \/ */ /* Seleção de texto */ ::selection { background: var(--cor-acao); color: white; } /* Palavra 'viúva' nos parágrafos */ p { text-wrap:pretty; } /* COR DOS LINKS */ .brxe-text a { color:var(--cor-acao); } /* BOTÕES ESMAECEM NO HOVER */ /*.bricks-button:hover { opacity: 0.8; }*/ /* /\ / \ ==================================== == TEXTO == ==================================*/ /*================================== == COOKIE NOTICE == ==================================== \ / \/ */ #branda-cookie-notice { box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.2)!important; margin: 0px 2.5% 0px 2.2%!important; min-width: 95% !important; border-radius: 14px!important; background-color: #000000b5 !important; backdrop-filter: blur(12px)!important; color: #fff!important; text-align: left!important; z-index: 777777; bottom:20px!important; } #branda-cookie-notice .cookie-notice-container { max-width: 96%!important; padding: 20px 10px!important; } @media (max-width:767px) { #branda-cookie-notice .cookie-notice-container .branda-cn-container { flex-wrap:wrap!important; padding: 10px 7px!important } } #branda-cookie-notice a, #branda-cookie-notice a:link { color: #96e6ff!important; } #branda-cookie-notice .button.ub-cn-set-cookie { color: white !important; font-weight: 700; letter-spacing: 0.5px; } /* /\ / \ ==================================== == COOKIE NOTICE == ==================================*/ /*================================== == PLUGIN ACESSIBILIDADE == ==================================== \ / \/ */ /* #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a { display: block; padding: 10px 15px; font-size: var(--texto-tamanho-s)!important; line-height: 1; } #pojo-a11y-toolbar .pojo-a11y-toolbar-inner { max-height: 70svh; overflow-y: scroll; } #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle { border-radius: var(--radius-s) 0px 0px var(--radius-l); overflow: hidden; } html body #pojo-a11y-toolbar { font-size: var(--texto-tamanho-xs) !important; } */ /* /\ / \ ==================================== == PLUGIN ACESSIBILIDADE == ==================================*/ /*================================== == SCROLLBAR == ==================================== \ / \/ */ /* Firefox */ * { scrollbar-width: thin; scrollbar-color: #9f9f9f #d2d2d2; } /* Chrome, Edge, and Safari */ *::-webkit-scrollbar { width: 9px; } *::-webkit-scrollbar-track { background: #d2d2d2; border-radius: 50px!important; margin:10px 0px!important; } *::-webkit-scrollbar-thumb { background-color: #9f9f9f; border-radius: 50px!important; border: none; } /* /\ / \ ==================================== == SCROLLBAR == ==================================*/ /*================================== == NÃO VAZAR O SCROLL == ==================================== \ / \/ */ * { overscroll-behavior: contain; } /* /\ / \ ==================================== == NÃO VAZAR O SCROLL == ==================================*/ /*================================== == RODAPE NO BOTTOM DA JANELA == ==================================== \ / \/ */ .brx-body { min-height: 100dvh; } /* /\ / \ ==================================== == RODAPE NO BOTTOM DA JANELA == ==================================*/ /*================================== == BOTÕES EDIÇÃO BRICKS == ==================================== \ / \/ */ /* Tirar botões de edição da topbar no frontend para editores */ /*personalizar*/body.no-customize-support #wp-admin-bar-customize, /*editar página/post*/body.no-customize-support #wp-admin-bar-edit, /*editar com bricks*/body.no-customize-support #wp-admin-bar-edit_with_bricks, /*processar com bricks*/body.no-customize-support #wp-admin-bar-editor_mode { display:none!important; } /* /\ / \ ==================================== == BOTÕES EDIÇÃO BRICKS == ==================================*/ /*===================================================*/ /*================== FRAMEWORK CSS ==================*/ /*===================================================*/ /*================================== == VARIAVEIS == ==================================== \ / \/ */ :root { /*TEXTO*/ --texto-tamanho-3pp: clamp(0.66rem, calc(0.13vw + 0.64rem), 0.81rem); --texto-tamanho-2pp: clamp(0.74rem, calc(0.12vw + 0.71rem), 0.88rem); --texto-tamanho-pp: clamp(0.79rem, calc(0.13vw + 0.76rem), 0.94rem); --texto-tamanho-p: clamp(0.84rem, calc(0.15vw + 0.81rem), 1.01rem); --texto-tamanho-m: clamp(0.95rem, calc(0.11vw + 0.93rem), 1.07rem); --texto-tamanho-g: clamp(1.06rem, calc(0.16vw + 1.03rem), 1.25rem); --texto-tamanho-gg: clamp(1.13rem, calc(0.22vw + 1.08rem), 1.38rem); --texto-tamanho-2gg: clamp(1.31rem, calc(0.27vw + 1.26rem), 1.63rem); --texto-tamanho-3gg: clamp(1.5rem, calc(0.33vw + 1.44rem), 1.88rem); --texto-tamanho-4gg: clamp(1.75rem, calc(0.33vw + 1.69rem), 2.13rem); --texto-tamanho-5gg: clamp(2rem, calc(0.33vw + 1.94rem), 2.38rem); /*DISTANCIA*/ --distancia-4pp: clamp(0.13rem, calc(0.11vw + 0.1rem), 0.25rem); --distancia-3pp: clamp(0.38rem, calc(0.16vw + 0.34rem), 0.56rem); --distancia-2pp: clamp(0.56rem, calc(0.27vw + 0.51rem), 0.88rem); --distancia-pp: clamp(0.56rem, calc(0.71vw + 0.42rem), 1.38rem); --distancia-p: clamp(0.88rem, calc(0.87vw + 0.7rem), 1.88rem); --distancia-m: clamp(1.25rem, calc(1.09vw + 1.03rem), 2.5rem); --distancia-g: clamp(1.88rem, calc(1.3vw + 1.61rem), 3.38rem); --distancia-gg: clamp(3rem, calc(1.52vw + 2.7rem), 4.75rem); --distancia-2gg: clamp(4.5rem, calc(1.79vw + 4.14rem), 6.56rem); --distancia-3gg: clamp(5.88rem, calc(2.5vw + 5.38rem), 8.75rem); --distancia-4gg: clamp(8.13rem, calc(2.72vw + 7.58rem), 11.25rem); /*CANTO ARREDONDADO*/ --radius-pp:clamp(0.25rem, calc(-0.16vw + 0.47rem), 0.44rem); --radius-p:clamp(0.38rem, calc(-0.22vw + 0.67rem), 0.63rem); --radius-m:clamp(0.63rem, calc(-0.27vw + 0.99rem), 0.94rem); --radius-g:clamp(1.13rem, calc(-0.33vw + 1.56rem), 1.5rem); --radius-gg:clamp(1.56rem, calc(-0.38vw + 2.08rem), 2rem); /*CORES*/ --cor-absoluto-preto:hsla(0, 0%, 0%, 1); --cor-absoluto-branco:hsla(0, 0%, 100%, 1); --cor-neutro-20:hsla(0, 0%, 20%, 1); --cor-neutro-40:hsla(0, 0%, 40%, 1); --cor-neutro-60:hsla(0, 0%, 60%, 1); --cor-neutro-80:hsla(0, 0%, 80%, 1); } /* /\ / \ ==================================== == VARIAVEIS == ==================================*/ /*================================== == VARIAVEIS EM CLASSES == ==================================== \ / \/ */ /*=== TEXTO ===*/ .texto-tamanho-3pp {font-size:var(--texto-tamanho-3pp);} .texto-tamanho-2pp {font-size:var(--texto-tamanho-2pp);} .texto-tamanho-pp {font-size:var(--texto-tamanho-pp);} .texto-tamanho-p {font-size:var(--texto-tamanho-p);} .texto-tamanho-m {font-size:var(--texto-tamanho-m);} .texto-tamanho-g {font-size:var(--texto-tamanho-g);} .texto-tamanho-gg {font-size:var(--texto-tamanho-gg);} .texto-tamanho-2gg {font-size:var(--texto-tamanho-2gg);} .texto-tamanho-3gg {font-size:var(--texto-tamanho-3gg);} .texto-tamanho-4gg {font-size:var(--texto-tamanho-4gg);} .texto-tamanho-4gg {font-size:var(--texto-tamanho-5gg);} /*=== BORDER RADIUS ===*/ .radius-pp {border-radius:var(--radius-pp);overflow: clip;} .radius-p {border-radius:var(--radius-p);overflow: clip;} .radius-m {border-radius:var(--radius-m);overflow: clip;} .radius-g {border-radius:var(--radius-g);overflow: clip;} .radius-gg {border-radius:var(--radius-gg);overflow: clip;} /* /\ / \ ==================================== == VARIAVEIS EM CLASSES == ==================================*/ /*================================== == ANIMAÇÕES POR SCROLL == ==================================== \ / \/ */ /* Entra pela esquerda */ @keyframes entra-pela-esquerda { from { opacity: 0; transform: translateX(-100px); } to { opacity: 1; transform: translateX(0px); } } .animar_entra-pela-esquerda { animation: entra-pela-esquerda linear; animation-timeline: view(); animation-range: entry 0% cover 40%; } /* Entra pela direita */ @keyframes entra-pela-direita { from { opacity: 0; transform: translateX(100px); } to { opacity: 1; transform: translateX(0px); } } .animar_entra-pela-direita { animation: entra-pela-direita linear; animation-timeline: view(); animation-range: entry 0% cover 40%; } /* Entra por cima */ @keyframes entra-por-cima { from { opacity: 0; transform: translateY(-100px); } to { opacity: 1; transform: translateY(0px); } } .animar_entra-por-cima { animation: entra-por-cima linear; animation-timeline: view(); animation-range: entry 0% cover 40%; } /* Entra por baixo */ @keyframes entra-por-baixo { from { opacity: 0; transform: translateY(100px); } to { opacity: 1; transform: translateY(0px); } } .animar_entra-por-baixo { animation: entra-por-baixo linear; animation-timeline: view(); animation-range: entry 0% cover 40%; } /* Fade in */ @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } .animar_fade-in { animation: fade-in linear; animation-timeline: view(); animation-range: entry 0% cover 40%; } /* /\ / \ ==================================== == ANIMAÇÕES POR SCROLL == ==================================*/ /*================================== == DARK MODE ROOT == ==================================== \ / \/ */ /* Imagens darkmode */ html.cf-theme-light .lightmode-elemento, html.cf-theme-dark .darkmode-elemento { display:block!important; } html.cf-theme-dark .lightmode-elemento, html.cf-theme-light .darkmode-elemento { display:none!important; } /* /\ / \ ==================================== == DARK MODE ROOT == ==================================*/ /*================================== == NEOMORPHISMO == ==================================== \ / \/ */ .neomorfismo { box-shadow: 5px 5px 7px var(--sombra-preta),-5px -5px 7px var(--sombra-branca),inset -5px -5px 6px var(--sombra-preta),inset 5px 5px 7px var(--sombra-branca); } /* /\ / \ ==================================== == NEOMORPHISMO == ==================================*/