/* ================================================= JATAÍ FRAMEWORK Component: 2 (NAVEGAÇÃO) Version: 3.9.8 ================================================= */ /* ================================================= ITEM 0 TRANSIÇÃO SUAVE ENTRE PÁGINAS (View Transitions API) Recurso NATIVO do navegador — não é uma biblioteca, não intercepta navegação nenhuma (cada clique continua sendo um carregamento de página de verdade, com PHP rodando do zero). O navegador só troca visualmente com um crossfade suave, em vez do salto abrupto de sempre. Sidebar, header e as barras mobile/tablet ganham um nome próprio (view-transition-name) pra ficarem DE FORA do crossfade — como o nome é o MESMO em toda página, o navegador entende que é "o mesmo elemento continuando", então ele fica parado, só o conteúdo principal (.jatai-main-area) troca com a transição suave. Sem suporte no navegador (Firefox, por exemplo) — nada quebra, a navegação simplesmente continua exatamente como sempre foi, sem o efeito. ================================================= */ @view-transition { navigation: auto; } .jatai-header { view-transition-name: jatai-vt-header; } .jatai-sidebar { view-transition-name: jatai-vt-sidebar; } .jatai-mobile { view-transition-name: jatai-vt-mobile; } .jatai-tablet-bar { view-transition-name: jatai-vt-tablet; } .jatai-main-area { view-transition-name: jatai-vt-conteudo; } /* Trava explícita: header/sidebar/barras NUNCA animam, mesmo que o item "ativo" destacado mude de uma página pra outra (ex: "Dashboard" destacado numa, "Aulas" destacado na próxima) — sem isso, o navegador percebe essa pequena diferença visual entre a versão antiga e a nova e tenta interpolar/cruzar entre as duas, o que aparece como um lampejo rápido. Com animation:none, ele troca na hora, sem transição nenhuma — fica realmente parado, do jeito que devia ser desde o início. */ ::view-transition-group(jatai-vt-header), ::view-transition-group(jatai-vt-sidebar), ::view-transition-group(jatai-vt-mobile), ::view-transition-group(jatai-vt-tablet) { animation: none !important; } ::view-transition-old(jatai-vt-header), ::view-transition-new(jatai-vt-header), ::view-transition-old(jatai-vt-sidebar), ::view-transition-new(jatai-vt-sidebar), ::view-transition-old(jatai-vt-mobile), ::view-transition-new(jatai-vt-mobile), ::view-transition-old(jatai-vt-tablet), ::view-transition-new(jatai-vt-tablet) { animation: none !important; mix-blend-mode: normal !important; } /* Crossfade do conteúdo principal — um pouco mais longo que o padrão do navegador (que é bem seco/abrupto, ~90ms) e com um leve movimento vertical junto da opacidade, pra ficar mais perceptível sem exagerar. */ ::view-transition-old(jatai-vt-conteudo) { animation: jatai-vt-sair .32s ease-out both !important; } ::view-transition-new(jatai-vt-conteudo) { animation: jatai-vt-entrar .32s ease-out both !important; } @keyframes jatai-vt-sair { to { opacity: 0; transform: translateY(-6px); } } @keyframes jatai-vt-entrar { from { opacity: 0; transform: translateY(6px); } } /* Efeito "arrastar entre abas" (estilo iOS/WhatsApp) — só no mobile (hover:none/pointer:coarse), e só quando o clique foi num item da barra inferior. A direção chega aqui como um "tipo" de transição (componente2-navegacao.php marca isso via viewTransition.types no evento pagereveal, antes do navegador tirar o "print" da página nova) — :active-view-transition-type() é o seletor feito pra isso; uma classe comum no não funcionaria aqui, porque os pseudo- elementos de view-transition existem fora da árvore normal do documento (um seletor ancestral tipo "html.classe ::view-transition- old(...)" simplesmente não tem efeito nenhum sobre eles). */ @media (hover: none), (pointer: coarse) { :active-view-transition-type(fwd) { &::view-transition-old(jatai-vt-conteudo) { animation: jatai-vt-sair-fwd .3s ease-out both !important; } &::view-transition-new(jatai-vt-conteudo) { animation: jatai-vt-entrar-fwd .3s ease-out both !important; } } :active-view-transition-type(back) { &::view-transition-old(jatai-vt-conteudo) { animation: jatai-vt-sair-back .3s ease-out both !important; } &::view-transition-new(jatai-vt-conteudo) { animation: jatai-vt-entrar-back .3s ease-out both !important; } } } @keyframes jatai-vt-sair-fwd { to { opacity: 0; transform: translateX(-18px); } } @keyframes jatai-vt-entrar-fwd { from { opacity: 0; transform: translateX(18px); } } @keyframes jatai-vt-sair-back { to { opacity: 0; transform: translateX(18px); } } @keyframes jatai-vt-entrar-back { from { opacity: 0; transform: translateX(-18px); } } /* Spinner de carregamento — aparece assim que a pessoa clica num link (ver componente2-navegacao.js), sinalizando "já entendi seu clique, só um instante". Como a navegação continua sendo uma troca de página de verdade, esse elemento simplesmente desaparece junto com a página antiga assim que a nova terminar de carregar — não precisa de nenhuma lógica pra escondê-lo depois. Centralizado na tela (não mais um cantinho no topo, onde passava despercebido) — é a única posição que continua fazendo sentido em qualquer largura de tela, com ou sem sidebar visível. */ .jatai-vt-spinner { position: fixed !important; top: 50% !important; left: 50% !important; right: auto !important; transform: translate(-50%, -50%) scale(.85) !important; z-index: 2147483647 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 52px !important; height: 52px !important; background: rgba(255, 255, 255, 0.92) !important; border-radius: 50% !important; box-shadow: 0 8px 24px rgba(31, 35, 40, 0.22) !important; opacity: 0 !important; transition: opacity .15s ease, transform .15s ease !important; pointer-events: none !important; } .jatai-vt-spinner--visivel { opacity: 1 !important; transform: translate(-50%, -50%) scale(1) !important; } /* Preto no escuro (era branco fixo, destoando de tudo que já tinha escurecido em volta). */ [data-jatai-tema="escuro"] .jatai-vt-spinner { background: rgba(20, 20, 22, 0.94) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important; } [data-jatai-tema="escuro"] .jatai-vt-spinner__circulo { border-color: #3A3A3C !important; border-top-color: #E0916F !important; } .jatai-vt-spinner__circulo { width: 26px !important; height: 26px !important; border: 3px solid #E4E8EF !important; border-top-color: #A85A3D !important; border-radius: 50% !important; animation: jatai-vt-girar .7s linear infinite !important; } @keyframes jatai-vt-girar { to { transform: rotate(360deg); } } /* ================================================= ITEM 1 VISIBILIDADE POR DISPOSITIVO ================================================= */ .jatai-sidebar, .jatai-mobile, .jatai-tablet{ display:none !important; } .jatai-sidebar.jatai-sidebar-ativa, .jatai-mobile.jatai-mobile-ativa, .jatai-tablet.jatai-tablet-ativa{ display:flex !important; } /* ================================================= FALLBACK: EDITOR DO ELEMENTOR Garante visibilidade independente de timing do JS (a classe abaixo pode ser adicionada pelo Elementor depois do DOMContentLoaded, então o CSS reage sozinho) ================================================= */ body.elementor-editor-active .jatai-sidebar, html.elementor-editor-active .jatai-sidebar, body.elementor-editor-active .jatai-mobile, html.elementor-editor-active .jatai-mobile, body.elementor-editor-active .jatai-tablet, html.elementor-editor-active .jatai-tablet{ display:flex !important; } /* ================================================= ALTURA DA SIDEBAR ACOMPANHA O MAIN-AREA O Elementor já usa align-items:stretch por padrão nos Containers — não precisa forçar nada aqui. Definir uma altura explícita (mesmo em %) desativaria esse stretch nativo, então essa seção fica só como registro: NENHUMA regra de height/align-items deve ser adicionada aqui. ================================================= */ /* ================================================= ALTERNATIVA: TRAVAR ALTURA DA TELA + SCROLL INTERNO Em vez de esticar a sidebar pra acompanhar o conteúdo (instável em flexbox quando a altura do pai é "auto"), trava a altura do "shell" da página no tamanho do viewport e deixa só o main-area rolar por dentro. Isso faz a sidebar (altura 100% do shell) sempre bater certinho com a área visível, sem depender de stretch. Ajuste o valor do calc() abaixo se sobrar/faltar um pouco de espaço por causa da altura real do cabeçalho. ================================================= */ .jatai-page-shell { height: calc(100vh - 90px) !important; overflow: hidden !important; } .jatai-main-area { height: 100% !important; flex: 1 1 auto !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; overflow-y: auto !important; } /* O padding do .jatai-main-area é definido direto no painel do Elementor (hoje: 50px nos 4 lados) — 50px de cada lado já é mais de 20% da largura de um celular comum, e foi exatamente isso que sobrava fazendo o conteúdo parecer estreito, mesmo com o resto da cadeia (.jatai-pagina, o widget etc.) já corrigido. Em vez de entrar em cada página no Elementor pra ajustar isso, sobrescreve aqui uma vez só — vale pra qualquer página que use essa mesma área principal. html body na frente por segurança (mesmo motivo de sempre: o Elementor gera CSS próprio pra cada elemento por ID, e essa é a blindagem que já provou funcionar contra isso no resto do sistema). */ html body .jatai-main-area { padding-top: 30px !important; padding-right: 0px !important; padding-bottom: 30px !important; padding-left: 0px !important; /* HIVE: main area branca e lisa (padrão Cora). A foto floral de fundo foi aposentada, no claro e no escuro. */ background: #FFFFFF !important; background-color: #FFFFFF !important; background-image: none !important; } /* No desktop/tablet, esse "shell fixo com scroll interno" faz sentido — a barra lateral fica fixa na tela enquanto só o conteúdo rola por dentro. No mobile não tem barra lateral fixa competindo por espaço, então esse scroll duplo (um da .jatai-main-area, outro da página inteira) só confunde — a pessoa desce a página, acha que chegou ao fim, mas ainda falta um pedaço escondido dentro do scroll interno, e precisa "caçar" o ponto certo pra continuar rolando. Aqui a área principal vira só mais uma parte do fluxo normal da página — um scroll só, do jeito que qualquer site mobile já funciona. */ @media (max-width: 600px) { .jatai-page-shell { height: auto !important; overflow: visible !important; } .jatai-main-area { height: auto !important; overflow-y: visible !important; } /* Continua removendo os wrappers do Elementor da caixa de layout (display:contents) — reforço extra, mesmo com a correção principal abaixo. */ .jatai-main-area .elementor-section, .jatai-main-area .elementor-container, .jatai-main-area .elementor-column, .jatai-main-area .elementor-column-wrap, .jatai-main-area .elementor-widget-wrap, .jatai-main-area .e-con, .jatai-main-area .e-con-inner { display: contents !important; } /* A CAUSA RAIZ DE VERDADE — e o motivo de só aparecer na versão "um shortcode monta a página inteira": o WIDGET do Elementor que envolve qualquer [jatai_pagina_*] vem com largura PRÓPRIA menor que a do container real (medido por debug antes: 346px dentro de um main-area de 485px). Essa correção já existia pro header e pra barra de tablet, só que usando :has() — e o debug de clique (?jatai_debug_click=1) mostrou o dado real: a classe responsável é a própria classe que o ELEMENTOR gera pra configuração de largura do widget, "elementor-widget__width-initial" — é o painel Avançado do widget com "Width: Initial" em vez de "Full width", o que faz ele NÃO crescer dentro do container flex (.jatai-main-area é display:flex), encolhendo pro tamanho do conteúdo. Ataca essa classe direto agora, sem :has() (mais seguro — :has() é recente e pode não estar disponível dependendo do navegador, e não tinha como confirmar se era isso ou especificidade sem o dado real). */ html body .jatai-main-area .elementor-widget__width-initial, html body .jatai-main-area .elementor-widget-shortcode, html body .jatai-main-area .elementor-shortcode, html body div.jatai-main-area div.elementor-element.elementor-widget__width-initial { width: 100% !important; max-width: 100% !important; flex: 1 1 100% !important; flex-grow: 1 !important; flex-shrink: 1 !important; flex-basis: 100% !important; } /* Com o widget já corrigido acima, .jatai-pagina só precisa ser 89% dele — ligeiramente menor que os 90% originais, porque sobrava um corte bem pequeno na lateral esquerda mesmo com tudo já corrigido (provavelmente arredondamento de pixel na cadeia de porcentagens, não vale a pena caçar mais fundo por 1% de diferença) — vêm de um padding simples em porcentagem, sempre relativo ao MESMO pai (nunca compara duas réguas diferentes, então não tem como descentralizar). */ html body .jatai-pagina { display: block !important; width: 100% !important; max-width: 100% !important; padding: 0 5.5% !important; box-sizing: border-box !important; } } /* ================================================= ITEM 2 BOTTOM SHEET ================================================= */ .jatai-bottomsheet{ transform:translateY(120%); opacity:0; visibility:hidden; pointer-events:none; transition: transform .35s cubic-bezier(.22,1,.36,1), opacity .25s; } .jatai-mobile.jatai-bottomsheet-opened .jatai-bottomsheet{ transform:translateY(0); opacity:1; visibility:visible; pointer-events:auto; } body.jatai-scroll-lock{ overflow:hidden; } /* ================================================= ITEM 2.1 MOBILE - EVENTOS ================================================= */ /* Container principal não captura cliques */ .jatai-mobile{ pointer-events:none; } /* Barra captura cliques */ .jatai-mobile-bar{ pointer-events:auto; } /* Bottom Sheet captura cliques */ .jatai-bottomsheet{ pointer-events:auto; } /* ================================================= MOBILE BAR ATIVA / HOVER ================================================= */ /* ========================================= ITEM ========================================= */ .jatai-mobile-nav-item{ border-radius:18px; transition: background-color .35s cubic-bezier(.22,1,.36,1), transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s cubic-bezier(.22,1,.36,1); } /* ========================================= ÍCONE ========================================= */ .jatai-mobile-nav-icon{ transition: color .30s ease, transform .35s cubic-bezier(.22,1,.36,1); } /* ========================================= HOVER ========================================= */ .jatai-mobile-nav-item:hover{ background:var(--jatai-nav-active-bg); transform:translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.08); } .jatai-mobile-nav-item:hover .jatai-mobile-nav-icon{ color:var(--jatai-nav-active-text); } /* ========================================= ATIVO ========================================= */ .jatai-mobile-nav-item.jatai-nav-active{ background:var(--jatai-nav-active-bg); transform:translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.08); } .jatai-mobile-nav-item.jatai-nav-active .jatai-mobile-nav-icon{ color:var(--jatai-nav-active-text); } /* ================================================= ITEM 2.2 BARRA MOBILE NATIVA ([jatai_sidebar_mobile]) Glass / flutuante, inspirada em Apple e Google — mesma família visual da sidebar/tablet (variáveis de cor por role já escopadas em .mobile-gestora/.mobile-teacher/ .mobile-aluna, reaproveitadas aqui sem redefinir nada). ================================================= */ .jatai-mobile{ position:fixed !important; left:5vw !important; right:5vw !important; bottom:calc(14px + env(safe-area-inset-bottom)) !important; z-index:99998; /* display:none/flex já é resolvido pela regra base (ITEM 1) via .jatai-mobile-ativa — aqui só definimos o miolo do layout, que só importa depois que o componente já está visível. */ flex-direction:column !important; align-items:center !important; } /* ========================================= BARRA — CÁPSULA GLASS ========================================= */ .jatai-mobile-bar{ width:100% !important; display:flex !important; align-items:center !important; justify-content:space-between !important; gap:2px !important; padding:8px 10px !important; border-radius:999px !important; background:rgba(255,255,255,.9) !important; backdrop-filter:blur(44px) saturate(2.1) brightness(1.05) !important; -webkit-backdrop-filter:blur(44px) saturate(2.1) brightness(1.05) !important; border:0.5px solid rgba(255,255,255,.65) !important; box-shadow: 0 12px 32px rgba(31, 35, 40,.16), 0 2px 8px rgba(31, 35, 40,.08), inset 0 1px 0 rgba(255,255,255,.7) !important; } /* ========================================= ITEM (ícone individual) — totalmente redondo, não mais um quadrado com canto arredondado. ========================================= */ .jatai-mobile-nav-item{ position:relative !important; flex:1 1 0 !important; display:flex !important; align-items:center !important; justify-content:center !important; height:46px !important; max-width:46px !important; margin:0 auto !important; border-radius:50% !important; color:var(--jatai-sb-texto-suave, #6F7787) !important; background:transparent !important; border:none !important; padding:0 !important; font-family:inherit !important; cursor:pointer !important; -webkit-tap-highlight-color:transparent !important; } .jatai-mobile-nav-icon{ display:flex !important; align-items:center !important; justify-content:center !important; } /* ========================================= ITEM CENTRAL — mesma linha horizontal dos demais ícones. Vidro (glass) de verdade — mesma receita da cápsula da barra — com um anel de cor animado por trás (nunca preenchendo o miolo, só a borda). Prefixo "html body" + qualificador de tag nas regras de fundo é de propósito: é a mesma blindagem que o breadcrumb já usa contra o CSS de botão que o Elementor injeta com prioridade alta — sem isso, o :root dele pode "vencer" mesmo um !important de especificidade mais baixa. Dois modificadores: --continuar (teacher/aluna): anel em degradê suave, nas próprias cores da role (nada de arco-íris aqui — é delicado, não é festivo). --criar (gestora): anel em arco-íris pastel, inspirado na flor do formulário [jatai_criar_aula] — aqui é onde as aulas novas "nascem". ========================================= */ html body .jatai-mobile-nav-item--central, html body button.jatai-mobile-nav-item--central, html body a.jatai-mobile-nav-item--central{ position:relative !important; z-index:1 !important; flex:0 0 auto !important; width:56px !important; height:56px !important; max-width:56px !important; border-radius:50% !important; background-color:rgba(255,255,255,.42) !important; background:rgba(255,255,255,.42) !important; /* SEM backdrop-filter aqui de propósito — o estilo inline (ver PHP) já desliga isso explicitamente. Blur "aninhado" (elemento com blur dentro de outro que já tem blur, caso da cápsula da barra) é um bug conhecido do Safari/iOS que pode pintar sólido em vez de vidro. O efeito de vidro deste botão vem só da translucidez (rgba) sobre o blur que a cápsula por baixo já aplicou. */ color:var(--jatai-nav-active-text) !important; border:none !important; box-shadow: 0 8px 18px rgba(31, 35, 40,.16), 0 2px 6px rgba(31, 35, 40,.10), inset 0 1px 0 rgba(255,255,255,.5) !important; transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease !important; } .jatai-mobile-nav-item--central:active{ transform:scale(.92) !important; } .jatai-mobile-nav-item--central .jatai-mobile-nav-icon svg{ width:21px !important; height:21px !important; } /* ----------------------------------------- Modificador --continuar: anel em degradê suave (3 tons da própria role, do claro pro escuro) girando bem devagar, com uma respiração delicada por trás — o "convite pra continuar", sem ficar berrante. ----------------------------------------- */ .jatai-mobile-nav-item--continuar{ animation:jatai-mobile-continuar-respirar 3s ease-in-out infinite !important; } .jatai-mobile-nav-item--continuar::before{ content:"" !important; position:absolute !important; inset:-2px !important; z-index:-1 !important; border-radius:50% !important; background:conic-gradient( from 0deg, var(--jatai-nav-active-bg), var(--jatai-sb-indicador-ativo, var(--jatai-nav-active-text)), var(--jatai-nav-active-text), var(--jatai-sb-indicador-ativo, var(--jatai-nav-active-text)), var(--jatai-nav-active-bg) ) !important; -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)) !important; mask:radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)) !important; animation:jatai-mobile-continuar-girar 9s linear infinite !important; } .jatai-mobile-nav-item--continuar .jatai-mobile-nav-icon{ animation:jatai-mobile-continuar-icone 3s ease-in-out infinite !important; } .jatai-mobile-nav-item--continuar:hover, .jatai-mobile-nav-item--continuar:active{ animation-duration:1.4s !important; } /* ----------------------------------------- Modificador --chat: aparece no lugar do Continuar quando quem está logada (teacher/ gestora) está vestindo uma aluna — mesmo anel/respiro do Continuar (mesmo contexto, mesmas cores da aluna), só com nomes de animação próprios pra não colidir. ----------------------------------------- */ .jatai-mobile-nav-item--chat{ animation:jatai-mobile-chat-respirar 3s ease-in-out infinite !important; color:var(--jatai-nav-active-text, #A85A3D) !important; } .jatai-mobile-nav-item--chat::before{ content:"" !important; position:absolute !important; inset:-2px !important; z-index:-1 !important; border-radius:50% !important; background:conic-gradient( from 0deg, var(--jatai-nav-active-bg), var(--jatai-sb-indicador-ativo, var(--jatai-nav-active-text)), var(--jatai-nav-active-text), var(--jatai-sb-indicador-ativo, var(--jatai-nav-active-text)), var(--jatai-nav-active-bg) ) !important; -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)) !important; mask:radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)) !important; animation:jatai-mobile-chat-girar 9s linear infinite !important; } .jatai-mobile-nav-item--chat .jatai-mobile-nav-icon{ animation:jatai-mobile-chat-icone 3s ease-in-out infinite !important; } .jatai-mobile-nav-item--chat:hover, .jatai-mobile-nav-item--chat:active{ animation-duration:1.4s !important; } @keyframes jatai-mobile-chat-respirar{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.05); } } @keyframes jatai-mobile-chat-girar{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } } @keyframes jatai-mobile-chat-icone{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.08); } } @keyframes jatai-mobile-continuar-respirar{ 0%,100%{ box-shadow:0 0 0 0 rgba(255,255,255,.45), 0 8px 18px rgba(31, 35, 40,.16); } 50%{ box-shadow:0 0 0 5px rgba(255,255,255,0), 0 8px 18px rgba(31, 35, 40,.16); } } @keyframes jatai-mobile-continuar-girar{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } } @keyframes jatai-mobile-continuar-icone{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.08); } } /* ----------------------------------------- Modificador --criar (só gestora): a cor fica SÓ na borda — um anel em arco-íris pastel (mesmas 6 cores da flor do formulário [jatai_criar_aula]) girando bem devagar. Usa mask (não só z-index) pra recortar um "anel" de verdade — o miolo do pseudo-elemento fica sem nenhuma tinta, então não vaza cor por trás do vidro translúcido do centro, que continua 100% glass. ----------------------------------------- */ .jatai-mobile-nav-item--criar{ color:var(--jatai-sb-indicador-ativo, #B8923D) !important; animation:jatai-mobile-criar-respirar 4s ease-in-out infinite !important; } .jatai-mobile-nav-item--criar::before{ content:"" !important; position:absolute !important; inset:-2.5px !important; z-index:-1 !important; border-radius:50% !important; background:conic-gradient( from 0deg, #FFC6FF, #FFADAD, #FFD6A5, #CAFFBF, #A0C4FF, #BDB2FF, #FFC6FF ) !important; -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)) !important; mask:radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)) !important; animation:jatai-mobile-criar-girar 7s linear infinite !important; } .jatai-mobile-nav-item--criar:active{ transform:scale(.92) !important; } @keyframes jatai-mobile-criar-respirar{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.05); } } @keyframes jatai-mobile-criar-girar{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } } @media (prefers-reduced-motion: reduce){ .jatai-mobile-nav-item--continuar, .jatai-mobile-nav-item--continuar::before, .jatai-mobile-nav-item--continuar .jatai-mobile-nav-icon, .jatai-mobile-nav-item--criar, .jatai-mobile-nav-item--criar::before, .jatai-mobile-nav-item--chat, .jatai-mobile-nav-item--chat::before, .jatai-mobile-nav-item--chat .jatai-mobile-nav-icon{ animation:none !important; } } /* ========================================= BOTÃO "MAIS" (abre o sheet) — mesmo vidro dos demais botões em destaque da barra (não mais o branco opaco emprestado do card de aluna). Um pouco menor que o item central, pra não competir visualmente com ele. ========================================= */ html body .jatai-mobile-bar .jatai-bottomsheet-open, html body .jatai-mobile-bar button.jatai-bottomsheet-open{ flex:0 0 auto !important; width:38px !important; height:38px !important; max-width:38px !important; border-radius:50% !important; background-color:rgba(255,255,255,.42) !important; background:rgba(255,255,255,.42) !important; /* SEM backdrop-filter aqui de propósito — mesmo motivo do botão central (ver comentário lá): blur aninhado por cima do blur da cápsula é instável no Safari/iOS. O inline no PHP desliga isso explicitamente pra esse botão. */ border:0.5px solid rgba(255,255,255,.6) !important; color:var(--jatai-sb-texto-suave, #6F7787) !important; box-shadow:0 2px 8px rgba(31, 35, 40,.08) !important; transition:background-color .12s ease !important; } .jatai-mobile-bar .jatai-bottomsheet-open:hover, .jatai-mobile-bar .jatai-bottomsheet-open:active{ background-color:rgba(255,255,255,.6) !important; } .jatai-mobile-bar .jatai-bottomsheet-open.jatai-nav-active{ background-color:var(--jatai-nav-active-bg) !important; border-color:transparent !important; color:var(--jatai-nav-active-text) !important; } /* ========================================= SHEET — FUNDO PASTEL DA ROLE + CARDS BRANCOS ========================================= */ .jatai-mobile-sheet{ position:fixed !important; left:5vw !important; right:5vw !important; bottom:calc(14px + env(safe-area-inset-bottom)) !important; max-height:74vh !important; overflow-y:auto !important; -webkit-overflow-scrolling:touch !important; padding:18px 16px calc(16px + env(safe-area-inset-bottom)) !important; border-radius:26px !important; background:var(--jatai-sb-bg, #F1E6D3) !important; box-shadow: 0 -8px 40px rgba(0,0,0,.18), 0 20px 50px rgba(0,0,0,.20) !important; z-index:99999 !important; } /* Fundo escurecido por trás do sheet, pra dar profundidade (estilo modal do iOS/Android) — some junto com o sheet porque depende exatamente da mesma classe de estado. */ .jatai-mobile.jatai-bottomsheet-opened::before{ content:"" !important; position:fixed !important; inset:0 !important; background:rgba(15, 20, 30,.38) !important; -webkit-backdrop-filter:blur(2px) !important; backdrop-filter:blur(2px) !important; z-index:99997 !important; pointer-events:auto !important; opacity:1 !important; transition:opacity .3s ease !important; } /* Botão de fechar — mesma família visual do botão "Mais" (círculo branco, borda fina), pra ficar claro que é o par dele: um abre, o outro fecha. Fica por cima de tudo (z-index maior que o próprio sheet) pra nunca ficar escondido atrás do card de contexto. */ .jatai-mobile-sheet__fechar{ position:absolute !important; top:14px !important; right:14px !important; width:32px !important; height:32px !important; max-width:32px !important; border-radius:50% !important; display:flex !important; align-items:center !important; justify-content:center !important; background:#ffffff !important; border:0.5px solid #E4E8EF !important; color:#1A1A1A !important; box-shadow:0 2px 8px rgba(0,0,0,.10) !important; padding:0 !important; margin:0 !important; cursor:pointer !important; z-index:5 !important; appearance:none !important; -webkit-appearance:none !important; } .jatai-mobile-sheet__fechar:hover, .jatai-mobile-sheet__fechar:active{ background:#F0F3F8 !important; } .jatai-mobile-sheet__contexto{ display:flex !important; align-items:center !important; gap:10px !important; padding:12px 14px !important; margin:34px 0 12px !important; border-radius:18px !important; background:#fff !important; box-shadow:0 4px 14px rgba(0,0,0,.06) !important; color:var(--jatai-sb-texto) !important; font-weight:600 !important; font-size:14.5px !important; } .jatai-mobile-sheet__contexto-avatar{ display:flex !important; flex-shrink:0 !important; } .jatai-mobile-sheet__lista{ display:flex !important; flex-direction:column !important; border-radius:18px !important; background:#fff !important; box-shadow:0 4px 14px rgba(0,0,0,.06) !important; overflow:hidden !important; } .jatai-mobile-sheet-item{ display:flex !important; align-items:center !important; gap:12px !important; padding:13px 16px !important; border-bottom:1px solid rgba(0,0,0,.055) !important; color:var(--jatai-sb-texto) !important; font-weight:500 !important; font-size:14px !important; text-decoration:none !important; transition:background-color .2s ease !important; } .jatai-mobile-sheet-item:last-child{ border-bottom:none !important; } .jatai-mobile-sheet-item:active{ background-color:var(--jatai-nav-active-bg) !important; } .jatai-mobile-sheet-item.jatai-nav-active{ background-color:var(--jatai-nav-active-bg) !important; color:var(--jatai-nav-active-text) !important; } .jatai-mobile-sheet-item__icone{ display:flex !important; align-items:center !important; justify-content:center !important; width:20px !important; height:20px !important; flex-shrink:0 !important; color:var(--jatai-nav-active-text) !important; } /* Visibilidade por breakpoint (mobile vs tablet vs desktop) NÃO é resolvida aqui — é o mesmo container do Elementor com "Ocultar no Desktop/Tablet" que já envolve a sidebar/tablet hoje que decide isso. Este CSS só cuida de QUAL variante de role mostrar dentro do dispositivo já visível (mesmo papel de .jatai-sidebar-ativa/ .jatai-tablet-ativa, ver ITEM 1). */ /* ================================================= ITEM 3 TABLET BAR ================================================= */ /* O Elementor cria um wrapper em volta do componente inteiro da barra de tablet (visível só em telas de tablet, por isso elementor-hidden-desktop + elementor-hidden-mobile). Esse wrapper às vezes fica mais alto que o jatai-page-shell disponível — sem essa regra, o excesso é cortado pelo overflow:hidden do shell antes mesmo de chegar na rolagem própria da .jatai-tablet-bar (que já funciona). Uso :has() com essas classes utilitárias do Elementor (não um ID de página) pra funcionar em qualquer página que use o mesmo componente de tablet. overflow-x NÃO trava aqui (fica no padrão do navegador) — de propósito. A .jatai-tablet-bar (elemento de dentro) já trava sozinha a rolagem horizontal indevida da barra recolhida, então travar aqui TAMBÉM era redundante — e pior, ativamente prejudicial: é este wrapper que precisa "deixar passar" a barra quando ela alarga pra 280px ao abrir. Travando o overflow-x aqui, a parte expandida ficava cortada/escondida, em vez de aparecer por cima do resto da página. z-index alto aqui (não é !important de propósito, só precisa vencer o z-index:auto do main-area, que é irmão dele dentro do jatai-page-shell) — sem isso, quando a barra abre, ela cresce mas fica visualmente ATRÁS do conteúdo principal, porque o z-index:50 que já existe lá dentro da .jatai-tablet-bar não "sobe" pro pai — cada elemento só disputa empilhamento com os IRMÃOS dele, não com quem está fora do seu próprio galho. */ .elementor-hidden-desktop.elementor-hidden-mobile.e-con:has(.jatai-tablet-bar) { height: 100% !important; overflow-y: auto !important; position: relative; z-index: 500; } .jatai-tablet-bar{ width:80px; min-width:80px; max-width:80px; height: 100% !important; min-height: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; transition: width .35s cubic-bezier(.22,1,.36,1), min-width .35s cubic-bezier(.22,1,.36,1), max-width .35s cubic-bezier(.22,1,.36,1); } .jatai-tablet-bar.jatai-tablet-bar-opened{ width:280px; min-width:280px; max-width:280px; } .jatai-tablet{ width:100%; min-width:100%; max-width:100%; height: 100% !important; min-height: 0 !important; overflow-y: auto !important; } .jatai-tablet-navigation{ width:100%; } .jatai-tablet-nav-item{ width:100%; } .jatai-tablet-user-name{ opacity:0; transform:translateX(-18px); white-space:nowrap; pointer-events:none; transition: opacity .25s ease, transform .35s cubic-bezier(.22,1,.36,1); } .jatai-tablet-bar.jatai-tablet-bar-opened .jatai-tablet-user-name{ opacity:1; transform:translateX(0); pointer-events:auto; } .jatai-tablet-nav-label{ opacity:0; transform:translateX(-18px); white-space:nowrap; pointer-events:none; transition: opacity .25s ease, transform .35s cubic-bezier(.22,1,.36,1); } .jatai-tablet-bar.jatai-tablet-bar-opened .jatai-tablet-nav-label{ opacity:1; transform:translateX(0); pointer-events:auto; } .jatai-tablet-toggle-button{ transition:none; } .jatai-tablet-toggle-icon{ transition: transform .35s cubic-bezier(.22,1,.36,1); transform-origin:center; } .jatai-tablet-bar.jatai-tablet-bar-opened .jatai-tablet-toggle-icon{ transform:scaleX(-1); } /* ================================================= TABLET BAR ESTADO DOS ITENS ================================================= */ /* ========================================= ITEM ========================================= */ .jatai-tablet-nav-item{ border-radius:18px; transition: background-color .35s cubic-bezier(.22,1,.36,1), transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s cubic-bezier(.22,1,.36,1); } /* ========================================= ÍCONE ========================================= */ .jatai-tablet-nav-icon{ transition: color .30s ease, transform .35s cubic-bezier(.22,1,.36,1); } /* ========================================= LABEL ========================================= */ .jatai-tablet-nav-label{ transition: color .30s ease; } /* ========================================= HOVER ========================================= */ .jatai-tablet-nav-item:hover{ background:var(--jatai-nav-active-bg); box-shadow: 0 12px 28px rgba(0,0,0,.08); } .jatai-tablet-nav-item:hover .jatai-tablet-nav-icon, .jatai-tablet-nav-item:hover .jatai-tablet-nav-label{ color:var(--jatai-nav-active-text); } /* ========================================= ATIVO ========================================= */ .jatai-tablet-nav-item.jatai-nav-active{ background:var(--jatai-nav-active-bg); box-shadow: 0 12px 28px rgba(0,0,0,.08); } .jatai-tablet-nav-item.jatai-nav-active .jatai-tablet-nav-icon, .jatai-tablet-nav-item.jatai-nav-active .jatai-tablet-nav-label{ color:var(--jatai-nav-active-text); } /* ================================================= ITEM 4 SIDEBAR BAR E CORES POR ROLE ================================================= */ /* ========================================= ROLE - GESTORA (HIVE #E87514) ========================================= */ .sidebar-gestora, .tablet-gestora, .mobile-gestora, .dashboard-gestora{ --hive-role: #E87514; --hive-role-forte: #D16912; --hive-role-hover: #FAE3D0; --hive-role-texto: #964C0D; --hive-role-sobre: #1F2328; /* Compatibilidade: as variáveis antigas agora apontam pros tokens HIVE. --jatai-nav-active-bg = tom CLARINHO (hover, fundo de ícone), --jatai-nav-active-text = tom de TEXTO (legível sobre branco). O item ATIVO usa a cor cheia (--hive-role), ver bloco HIVE no fim. */ --jatai-nav-active-bg: var(--hive-role-hover); --jatai-nav-active-text: var(--hive-role-texto); --jatai-sb-bg: #FFFFFF; --jatai-sb-texto: #3A4250; --jatai-sb-texto-suave: #6F7787; --jatai-sb-indicador-ativo: var(--hive-role); } /* ========================================= ROLE - TEACHER (HIVE #FD9C18) ========================================= */ .sidebar-teacher, .tablet-teacher, .mobile-teacher, .dashboard-teacher{ --hive-role: #FD9C18; --hive-role-forte: #E48C16; --hive-role-hover: #FFEBD1; --hive-role-texto: #985801; --hive-role-sobre: #1F2328; /* Compatibilidade: as variáveis antigas agora apontam pros tokens HIVE. --jatai-nav-active-bg = tom CLARINHO (hover, fundo de ícone), --jatai-nav-active-text = tom de TEXTO (legível sobre branco). O item ATIVO usa a cor cheia (--hive-role), ver bloco HIVE no fim. */ --jatai-nav-active-bg: var(--hive-role-hover); --jatai-nav-active-text: var(--hive-role-texto); --jatai-sb-bg: #FFFFFF; --jatai-sb-texto: #3A4250; --jatai-sb-texto-suave: #6F7787; --jatai-sb-indicador-ativo: var(--hive-role); } /* ========================================= ROLE - ALUNA (HIVE #FBC83C) ========================================= */ .sidebar-aluna, .tablet-aluna, .mobile-aluna, .dashboard-aluna{ --hive-role: #FBC83C; --hive-role-forte: #E2B436; --hive-role-hover: #FEF4D8; --hive-role-texto: #8C6703; --hive-role-sobre: #1F2328; /* Compatibilidade: as variáveis antigas agora apontam pros tokens HIVE. --jatai-nav-active-bg = tom CLARINHO (hover, fundo de ícone), --jatai-nav-active-text = tom de TEXTO (legível sobre branco). O item ATIVO usa a cor cheia (--hive-role), ver bloco HIVE no fim. */ --jatai-nav-active-bg: var(--hive-role-hover); --jatai-nav-active-text: var(--hive-role-texto); --jatai-sb-bg: #FFFFFF; --jatai-sb-texto: #3A4250; --jatai-sb-texto-suave: #6F7787; --jatai-sb-indicador-ativo: var(--hive-role); } /* ========================================= SIDEBAR - HOVER ========================================= */ .jatai-sidebar-nav-item{ transition: background-color .35s cubic-bezier(.22,1,.36,1), transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s cubic-bezier(.22,1,.36,1); } .jatai-sidebar-nav-item:hover{ background:var(--jatai-nav-active-bg); box-shadow: 0 10px 24px rgba(0,0,0,.06); } /* ========================================= SIDEBAR - LISTA ========================================= */ .jatai-sidebar-nav-list{ transition: color .30s ease; } .jatai-sidebar-nav-item:hover .jatai-sidebar-nav-list{ color:var(--jatai-nav-active-text); } /* ========================================= SIDEBAR - ATIVO ========================================= */ .jatai-sidebar-nav-item.jatai-nav-active{ background:var(--jatai-nav-active-bg); box-shadow: 0 12px 28px rgba(0,0,0,.08); } .jatai-sidebar-nav-item.jatai-nav-active .jatai-sidebar-nav-list{ color:var(--jatai-nav-active-text); } /* ================================================= BREADCRUMB — só aparece em PC/tablet O botão de "voltar" flutuante que existia aqui (chevron glass estilo iOS) foi removido — o [jatai_header] agora tem o próprio botão de voltar embutido no lugar certo, então no mobile o breadcrumb inteiro dá lugar ao header. ================================================= */ @media (max-width: 600px) { /* Especificidade reforçada ("html body") de propósito: existe uma regra .jatai-breadcrumb{display:inline-flex!important} incondicional mais abaixo no arquivo — mesma especificidade + !important nos dois faz a ordem no arquivo decidir, e aquela vencia por vir depois. Com dois seletores extras aqui, esse display:none passa a ganhar sempre, não importa a ordem. */ html body .jatai-breadcrumb { display: none !important; } } /* ================================================= SIDEBAR ÚNICA ([jatai_sidebar]) Uma marcação só, três "temas" por role via variáveis CSS — gancho pronto pra outros temas (dark, glass) no futuro: basta um novo bloco de variáveis, a estrutura não muda. ================================================= */ .jatai-sidebar { /* Padrão = gestora. Fundo branco, estilo Cora: a cor da role só aparece no item ativo (cheia), no hover (clarinha) e no indicador. */ --hive-role: #E87514; --hive-role-forte: #D16912; --hive-role-hover: #FAE3D0; --hive-role-texto: #964C0D; --hive-role-sobre: #1F2328; --jatai-sb-bg: #FFFFFF; --jatai-sb-texto: #3A4250; --jatai-sb-texto-suave: #6F7787; --jatai-sb-item-hover: var(--hive-role-hover); --jatai-sb-item-ativo-bg: var(--hive-role); --jatai-sb-item-ativo-texto: var(--hive-role-sobre); --jatai-sb-indicador-ativo: var(--hive-role); display: flex !important; flex-direction: column !important; background: var(--jatai-sb-bg) !important; padding: 20px 14px !important; box-sizing: border-box !important; min-height: 100vh !important; align-self: stretch !important; border-right: 1px solid #E4E8EF !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important; } .jatai-sidebar--teacher { --hive-role: #FD9C18; --hive-role-forte: #E48C16; --hive-role-hover: #FFEBD1; --hive-role-texto: #985801; --hive-role-sobre: #1F2328; } .jatai-sidebar--aluna { --hive-role: #FBC83C; --hive-role-forte: #E2B436; --hive-role-hover: #FEF4D8; --hive-role-texto: #8C6703; --hive-role-sobre: #1F2328; } /* O item INATIVO usava --jatai-sb-texto-suave, uma cor mais clara que pro role aluna especificamente ficava "apagada" demais em comparação com os outros dois roles. Usa a MESMA cor que o :hover já usa (--jatai-sb-texto) — assim o item já nasce com presença, sem competir com o item ATIVO (que continua tendo seu próprio destaque: fundo pastel + peso 700). :not(--ativo) evita que essa regra mais específica "vaze" por cima da cor do item ativo. */ .jatai-sidebar--aluna .jatai-sidebar__item:not(.jatai-sidebar__item--ativo) { color: var(--jatai-sb-texto) !important; } .jatai-sidebar__topo { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 10px !important; margin-bottom: 26px !important; } .jatai-sidebar__avatar { width: 64px !important; height: 64px !important; border-radius: 50% !important; overflow: hidden !important; flex-shrink: 0 !important; } .jatai-sidebar__nome { font-size: 13.5px !important; font-weight: 700 !important; color: var(--jatai-sb-texto) !important; text-align: center !important; } .jatai-sidebar__menu { display: flex !important; flex-direction: column !important; gap: 2px !important; } .jatai-sidebar__item { display: flex !important; align-items: center !important; gap: 12px !important; padding: 10px 12px !important; border-radius: 10px !important; position: relative !important; color: var(--jatai-sb-texto-suave) !important; text-decoration: none !important; font-size: 13.5px !important; font-weight: 500 !important; transition: background .12s ease, color .12s ease, font-weight .12s ease !important; } .jatai-sidebar__item:hover { font-weight: 600 !important; } /* Indicador ÚNICO que desliza entre os itens (JS move ele), em vez de cada item ter a própria marquinha — é isso que cria o efeito contínuo de "percorrer" a barra, sem saltos/vãos entre um item e outro. Fica na borda REAL da sidebar (-14px = padding horizontal da .jatai-sidebar), igual ao banco Cora. */ .jatai-sidebar__menu { position: relative !important; } .jatai-sidebar__indicador { position: absolute !important; right: -14px !important; width: 3px !important; border-radius: 2px !important; background: transparent !important; pointer-events: none !important; opacity: 0 !important; transition: top .2s cubic-bezier(.4,0,.2,1), height .2s cubic-bezier(.4,0,.2,1), background .15s ease, opacity .15s ease !important; } .jatai-sidebar__indicador--visivel { opacity: 1 !important; } .jatai-sidebar__indicador--hover { background: #C3CAD5 !important; } .jatai-sidebar__indicador--ativo { background: var(--jatai-sb-indicador-ativo) !important; } .jatai-sidebar__item-icone { display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } /* Contador ao lado do label (ex: "Reposições (3)") — mesmo número que já existia antes da sidebar virar nativa. Discreto, mesma cor do texto do item (não é um alerta vermelho — reposição pendente é rotina, não uma emergência); herda a cor de "ativo"/hover automaticamente por não fixar cor própria. */ .jatai-sidebar__item-contador, .jatai-tablet-nav-contador, .jatai-mobile-sheet-item__contador { opacity: .68 !important; font-weight: 600 !important; } .jatai-sidebar__item:hover { background: var(--jatai-sb-item-hover) !important; color: var(--jatai-sb-texto) !important; } .jatai-sidebar__item--ativo { background: var(--jatai-sb-item-ativo-bg) !important; color: var(--jatai-sb-item-ativo-texto) !important; font-weight: 700 !important; } /* "Continuar" — fundo destacado sempre (é um convite à ação, não um indicador de página atual), com uma luz deslizando por trás em loop contínuo. No hover, a luz acelera e fica mais viva. */ .jatai-sidebar__item--continuar { position: relative !important; animation: jatai-continuar-respirar 2.2s ease-in-out infinite !important; } .jatai-sidebar__item--continuar .jatai-sidebar__item-icone { animation: jatai-continuar-icone 2.2s ease-in-out infinite !important; } .jatai-sidebar__item--continuar:hover { animation-duration: 1.1s !important; } .jatai-sidebar__item--continuar:hover .jatai-sidebar__item-icone { animation-duration: 1.1s !important; } /* Glow pulsante ao redor do botão — o mesmo tipo de "respiração" que apps usam pra sinalizar a ação principal (AirDrop, notificações). Nada de linha fina passando — isso é impossível de não notar. */ @keyframes jatai-continuar-respirar { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55), 0 2px 8px rgba(0, 0, 0, 0.06); } 50% { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0), 0 2px 8px rgba(0, 0, 0, 0.06); } } @keyframes jatai-continuar-icone { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } } @media (prefers-reduced-motion: reduce) { .jatai-sidebar__item--continuar, .jatai-sidebar__item--continuar .jatai-sidebar__item-icone { animation: none !important; } } @media (max-width: 600px) { .jatai-sidebar { padding: 16px 12px !important; } .jatai-sidebar__avatar { width: 52px !important; height: 52px !important; } } /* ================================================= BREADCRUMB ([jatai_nav_breadcrumb]) Antes só existia estilo solto herdado do Elementor — agora tem identidade própria: ícone de início, cor de acento por role (mesma família da sidebar), teachers como chips, truncamento no tablet. ================================================= */ .jatai-breadcrumb { --jatai-bc-acento: #3F4654; position: relative !important; display: inline-flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 1px !important; margin-bottom: 20px !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important; font-size: 13.5px !important; } /* Faltava esse modificador — só existiam --teacher e --aluna, então o contexto "gestora" sempre caía no tom genérico marrom de cima (não o dourado que já é a cor dela em todo o resto do sistema: sidebar, calendário, dashboard). */ .jatai-breadcrumb--gestora { --jatai-bc-acento: #964C0D; } /* Teacher e aluna estavam com um tom bem mais escuro/apagado (pensado só pra ter contraste em cima do vidro claro) do que a cor "oficial" de cada role no resto do sistema — verde quase preto e marrom bem escuro, sem parecer a mesma identidade visual da sidebar/calendário. Mesmos tons vivos usados lá. */ .jatai-breadcrumb--teacher { --jatai-bc-acento: #985801; } .jatai-breadcrumb--aluna { --jatai-bc-acento: #8C6703; } html body .jatai-breadcrumb-link, html body a.jatai-breadcrumb-link, html body .jatai-breadcrumb-current { display: inline-flex !important; align-items: center !important; gap: 5px !important; padding: 5px 12px !important; border-radius: 999px !important; font-weight: 500 !important; color: #5B6372 !important; background: rgba(255, 255, 255, 0.55) !important; background-color: rgba(255, 255, 255, 0.55) !important; background-image: none !important; backdrop-filter: blur(10px) saturate(1.6) !important; -webkit-backdrop-filter: blur(10px) saturate(1.6) !important; border: none !important; box-shadow: 0 2px 8px rgba(31, 35, 40, 0.06) !important; text-shadow: none !important; outline: none !important; transform: none !important; font-style: normal !important; text-decoration: none !important; white-space: nowrap !important; transition: background .12s ease, color .12s ease !important; } html body .jatai-breadcrumb-link:hover, html body a.jatai-breadcrumb-link:hover, html body .jatai-breadcrumb-link:focus, html body a.jatai-breadcrumb-link:focus { background: rgba(255, 255, 255, 0.8) !important; background-color: rgba(255, 255, 255, 0.8) !important; background-image: none !important; color: var(--jatai-bc-acento) !important; border: none !important; box-shadow: 0 2px 10px rgba(31, 35, 40, 0.1) !important; text-shadow: none !important; outline: none !important; transform: none !important; } /* Nó raiz — o hover prevê PRA ONDE o link leva (a role de quem tá logado), não a role de quem está vendo agora. Cores sólidas (não os tons pálidos da sidebar) porque a fonte fica branca em cima. */ html body a.jatai-breadcrumb-link--gestora:hover, html body a.jatai-breadcrumb-link--gestora:focus { background: #E87514 !important; background-color: #E87514 !important; color: #1F2328 !important; } html body a.jatai-breadcrumb-link--teacher:hover, html body a.jatai-breadcrumb-link--teacher:focus { background: #FD9C18 !important; background-color: #FD9C18 !important; color: #1F2328 !important; } html body a.jatai-breadcrumb-link--aluna:hover, html body a.jatai-breadcrumb-link--aluna:focus { background: #FBC83C !important; background-color: #FBC83C !important; color: #1F2328 !important; } .jatai-breadcrumb-current { color: #5B6372 !important; font-weight: 700 !important; } /* Só o TEXTO fica na cor da role ativa — o ícone (casinha, no nó raiz) fica neutro de propósito, senão "pisca" junto e disputa atenção com o texto, que é o que realmente precisa se destacar aqui. */ .jatai-breadcrumb-current .jatai-breadcrumb-texto { color: var(--jatai-bc-acento) !important; } .jatai-breadcrumb-current svg, .jatai-breadcrumb-link svg { flex-shrink: 0 !important; opacity: 0.85 !important; } .jatai-breadcrumb-separator { color: #D6DCE5 !important; padding: 0 1px !important; font-weight: 400 !important; user-select: none !important; } .jatai-breadcrumb-teachers { display: inline-flex !important; align-items: center !important; gap: 4px !important; flex-wrap: wrap !important; padding: 0 4px !important; } html body .jatai-breadcrumb-chip, html body a.jatai-breadcrumb-chip { display: inline-flex !important; align-items: center !important; gap: 5px !important; padding: 5px 12px !important; border-radius: 999px !important; font-size: 13.5px !important; font-weight: 500 !important; font-style: normal !important; color: #8A92A1 !important; background: rgba(255, 255, 255, 0.32) !important; background-color: rgba(255, 255, 255, 0.32) !important; background-image: none !important; backdrop-filter: blur(10px) saturate(1.6) !important; -webkit-backdrop-filter: blur(10px) saturate(1.6) !important; border: none !important; box-shadow: 0 2px 8px rgba(31, 35, 40, 0.06) !important; text-shadow: none !important; outline: none !important; transform: none !important; text-decoration: none !important; white-space: nowrap !important; transition: background .12s ease, color .12s ease !important; } html body .jatai-breadcrumb-chip:hover, html body a.jatai-breadcrumb-chip:hover, html body .jatai-breadcrumb-chip:focus, html body a.jatai-breadcrumb-chip:focus { background: #FD9C18 !important; background-color: #FD9C18 !important; background-image: none !important; color: #1F2328 !important; border: none !important; box-shadow: none !important; text-shadow: none !important; outline: none !important; transform: none !important; } /* Tablet — nomes longos truncam em vez de quebrar o layout ou estourar a linha */ @media (min-width: 601px) and (max-width: 1024px) { .jatai-breadcrumb-texto { display: inline-block !important; max-width: 120px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; vertical-align: middle !important; } .jatai-breadcrumb-chip { max-width: 100px !important; overflow: hidden !important; text-overflow: ellipsis !important; } } /* ================================================= SIDEBAR DE TABLET ([jatai_sidebar_tablet]) Visual que faltava (fundo, botão de expandir, avatar, cor de repouso dos itens) — o mecanismo de abrir/fechar, largura, transições e cor ativa por role já existiam. ================================================= */ .jatai-tablet-bar { background: var(--jatai-sb-bg) !important; padding: 16px 10px !important; box-sizing: border-box !important; position: relative !important; display: flex !important; flex-direction: column !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important; } .jatai-tablet-toggle-button { -webkit-appearance: none !important; appearance: none !important; position: relative !important; left: 50% !important; transform: translateX(-50%) !important; flex-shrink: 0 !important; width: 34px !important; height: 34px !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.6) !important; border: none !important; box-shadow: none !important; outline: none !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; color: var(--jatai-sb-texto) !important; margin-bottom: 12px !important; } .jatai-tablet-toggle-button:hover { background: rgba(255, 255, 255, 0.9) !important; } .jatai-tablet-user { display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; margin-bottom: 18px !important; min-height: 40px !important; } .jatai-tablet-avatar { width: 40px !important; height: 40px !important; border-radius: 50% !important; overflow: hidden !important; flex-shrink: 0 !important; } .jatai-tablet-user-name { font-size: 13px !important; font-weight: 700 !important; color: var(--jatai-sb-texto) !important; } .jatai-tablet-navigation { display: flex !important; flex-direction: column !important; gap: 2px !important; } .jatai-tablet-nav-item { display: flex !important; align-items: center !important; gap: 12px !important; padding: 10px !important; position: relative !important; color: var(--jatai-sb-texto-suave) !important; text-decoration: none !important; transition: background .12s ease, color .12s ease, font-weight .12s ease !important; } .jatai-tablet-nav-item:hover { font-weight: 600 !important; } .jatai-tablet-nav-item.jatai-nav-active { font-weight: 700 !important; } /* Mesmo indicador único deslizante da sidebar de desktop, adaptado pra barra de tablet (-10px = padding horizontal da .jatai-tablet-bar) */ .jatai-tablet-navigation { position: relative !important; overflow: hidden !important; } .jatai-tablet-indicador { position: absolute !important; right: 0 !important; width: 3px !important; border-radius: 2px !important; background: transparent !important; pointer-events: none !important; opacity: 0 !important; transition: top .2s cubic-bezier(.4,0,.2,1), height .2s cubic-bezier(.4,0,.2,1), background .15s ease, opacity .15s ease !important; } .jatai-tablet-indicador--visivel { opacity: 1 !important; } .jatai-tablet-indicador--hover { background: #C3CAD5 !important; } .jatai-tablet-indicador--ativo { background: var(--jatai-sb-indicador-ativo) !important; } .jatai-tablet-nav-icon { display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } /* ================================================= CORREÇÃO — LARGURA REAL DO NOME/RÓTULOS RECOLHIDOS opacity:0 + translateX já existiam e escondem visualmente, mas o elemento continua ocupando o espaço LARGO de verdade no layout (opacity não afeta dimensão) — isso empurrava tudo pra fora dos 60px disponíveis quando a barra está recolhida, sobrando só rolagem horizontal pra alcançar os itens. Trava a largura em 0 de propósito nesse estado, liberando só quando abre — sem tocar nas regras de opacidade/ transform que já existiam. ================================================= */ .jatai-tablet-user-name, .jatai-tablet-nav-label { max-width: 0 !important; overflow: hidden !important; transition: opacity .25s ease, transform .35s cubic-bezier(.22,1,.36,1), max-width .35s cubic-bezier(.22,1,.36,1) !important; } .jatai-tablet-bar.jatai-tablet-bar-opened .jatai-tablet-user-name, .jatai-tablet-bar.jatai-tablet-bar-opened .jatai-tablet-nav-label { max-width: 160px !important; } /* ================================================= CORREÇÃO — ALTURA REAL DA BARRA DE TABLET Mesmo problema que já resolvemos na sidebar de desktop: height:100% só funciona se TODOS os ancestrais tiverem altura definida — aqui a cadeia quebra num wrapper do Elementor/JetEngine que não estica (calcula só pelo conteúdo). min-height:100vh não depende de ancestral nenhum pra funcionar. ================================================= */ .jatai-tablet-bar { min-height: calc(100vh - 90px) !important; } /* ================================================= CORREÇÃO — LARGURA REAL DOS WRAPPERS DO ELEMENTOR Mesmo raciocínio da correção de altura no topo do arquivo: um wrapper do Elementor (.elementor-shortcode) que envolve o componente ficava com 65px, mais estreito que os 80px reais da barra — essa sobra de 15px criava rolagem horizontal nativa do navegador (as "setinhas" estranhas). :has() alcança esse ancestral específico só quando ele contém a barra, sem afetar outros shortcodes do site. ================================================= */ .elementor-shortcode:has(.jatai-tablet-bar) { width: 80px !important; max-width: 80px !important; overflow: visible !important; } /* ================================================= .sidebar-tablet — CONTAINER DEDICADO DA PÁGINA Classe própria colocada no container do Elementor que hospeda [jatai_sidebar_tablet], pra ter controle direto sem precisar adivinhar em qual nível da árvore o Elementor está impondo largura/altura/padding fixos. Zera tudo — o [jatai_sidebar_tablet] já cuida de 100% do próprio tamanho (80px↔280px, altura da tela toda), esse container só precisa ser um espaço livre. ================================================= */ .sidebar-tablet { width: auto !important; max-width: none !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; } /* ================================================= CORREÇÃO — DIREÇÃO DO FLEX EM .jatai-tablet As regras já existentes (não minhas) nunca definiram flex-direction — o padrão do CSS é "linha" (lado a lado), não "coluna" (um embaixo do outro). Sem isso, o bloco do avatar e o bloco de navegação disputam layout de um jeito que não faz sentido (avatar "esticado" pra combinar com a altura do menu ao lado, por align-items:stretch ser o padrão em linha). Direção certa: coluna, avatar em cima, menu embaixo. ================================================= */ .jatai-tablet { flex-direction: column !important; align-items: stretch !important; } /* ================================================= CORREÇÃO — SVG DO TOGGLE ACHATADO + CAMADA (Z-INDEX) DO ESTADO ABERTO 1) Algum reset global de imagem/SVG do tema estava distorcendo as proporções do ícone — força as dimensões reais do SVG (12x20), sem depender do que o resto do site define pra em geral. 2) Quando abre, o JS troca pra position:fixed (pra escapar do overflow:hidden do container) — mas nunca existia um z-index pra esse estado, então a barra aberta ficava "atrás" de outras coisas da página que já tinham camada própria. ================================================= */ .jatai-tablet-toggle-icon svg { width: 9px !important; height: 15px !important; display: block !important; } .jatai-tablet-bar.jatai-tablet-bar-opened { position: fixed !important; z-index: 99999 !important; } /* ================================================= HEADER ([jatai_header]) Desktop/tablet: logo | título da página | sino + avatar. Mobile: chevron de voltar | logo | sino + avatar (o título dá lugar ao logo no centro, e o logo do canto esquerdo dá lugar ao chevron). ================================================= */ /* O widget de Shortcode do Elementor que envolve o [jatai_header] vem com largura própria pequena por padrão (visto por debug: 280px dentro de um cabeçalho de 1521px) — isso fazia o header inteiro (mesmo com width:100% certo por dentro) ficar "espremido" e centralizado dentro desse espaço pequeno, em vez de esticar pra ocupar a barra toda. */ .elementor-widget-shortcode:has(.jatai-header), .elementor-shortcode:has(.jatai-header) { width: 100% !important; max-width: 100% !important; } /* Grid de 3 colunas (não mais flex+space-between) — com flex, o centro só ficava centralizado DENTRO do espaço sobrando entre os dois lados, então se um lado tivesse mais coisa que o outro (ex: avatar + sino de notificação de um lado, só um ícone do outro), o logo ficava puxado pro lado mais vazio, não no meio de verdade do header. Colunas 1 e 3 do grid são "1fr" cada — exatamente do mesmo tamanho entre si, sempre — então a coluna do meio fica matematicamente centralizada no header inteiro, não importa quanto conteúdo tem de cada lado. */ .jatai-header { display: grid !important; grid-template-columns: 1fr auto 1fr !important; align-items: center !important; width: 100% !important; padding: 6px 24px !important; box-sizing: border-box !important; background: #ffffff !important; border-bottom: 0.5px solid #E4E8EF !important; font-family: 'Montserrat', -apple-system, sans-serif !important; } .jatai-header__lado { display: flex !important; align-items: center !important; gap: 14px !important; min-width: 44px !important; } /* O lado direito precisa se alinhar contra a BORDA direita da sua coluna (não fica "flutuando" perto do meio) — o esquerdo já nasce assim por padrão (flex-start). */ .jatai-header__lado--direita { justify-content: flex-end !important; } .jatai-header__centro { display: flex !important; align-items: center !important; justify-content: center !important; min-width: 0 !important; padding: 0 12px !important; } .jatai-header__titulo { font-size: 15px !important; font-weight: 700 !important; color: #1F2328 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .jatai-header__logo { display: flex !important; align-items: center !important; text-decoration: none !important; } .jatai-header__logo img, .jatai-header__logo .custom-logo { height: 46px !important; width: auto !important; display: block !important; } /* Botão "+" ao lado do logo — só gestora, abre o mesmo sheet de escolha (Aula/Pacote) que já existe no resto do sistema. Duas versões (desktop/mobile) porque os dois logos também já são assim — cada uma só aparece na largura certa, igual o próprio logo já faz. */ html body button.jatai-header__criar { -webkit-appearance: none !important; appearance: none !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 32px !important; margin-left: 6px !important; padding: 0 !important; border-radius: 50% !important; background: #F0F3F8 !important; border: none !important; box-shadow: none !important; color: #A85A3D !important; cursor: pointer !important; flex-shrink: 0 !important; transition: background .12s ease !important; } html body button.jatai-header__criar:hover { background: #E6EBF2 !important; } html body button.jatai-header__criar--mobile { display: none !important; } html body a.jatai-header__voltar { display: none !important; align-items: center !important; justify-content: center !important; width: 34px !important; height: 34px !important; border-radius: 50% !important; background: transparent !important; color: #2A2F38 !important; text-decoration: none !important; flex-shrink: 0 !important; } html body span.jatai-header__logo--mobile { display: none !important; } html body a.jatai-header__avatar { display: flex !important; align-items: center !important; justify-content: center !important; width: 38px !important; height: 38px !important; border-radius: 50% !important; overflow: hidden !important; flex-shrink: 0 !important; } .jatai-header__avatar img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } @media (max-width: 600px) { .jatai-header { padding: 8px 5vw !important; } html body span.jatai-header__logo--desktop { display: none !important; } .jatai-header__titulo { display: none !important; } html body a.jatai-header__voltar { display: flex !important; } html body span.jatai-header__logo--mobile { display: flex !important; } .jatai-header__logo--mobile img, .jatai-header__logo--mobile .custom-logo { height: 30px !important; } /* No mobile, o "+" de criar aula/pacote fica escondido dos dois lados (tanto o normal quanto o par que vivia junto do logo central) — já tem o botão central fixo na barra mobile cobrindo essa função, ter os dois ficava redundante. */ html body button.jatai-header__criar:not(.jatai-header__criar--mobile) { display: none !important; } html body button.jatai-header__criar--mobile { display: none !important; } } /* ================================================= RODAPÉ ([jatai_footer]) ================================================= */ .jatai-footer { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 6px !important; width: 100% !important; padding: 22px 24px !important; box-sizing: border-box !important; background: #ffffff !important; border-top: 0.5px solid #E4E8EF !important; font-family: 'Montserrat', -apple-system, sans-serif !important; text-align: center !important; } .jatai-footer__direitos { font-size: 12.5px !important; font-weight: 600 !important; color: #5B6372 !important; letter-spacing: 0.02em !important; } .jatai-footer__dev { display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; font-size: 11.5px !important; font-weight: 500 !important; color: #A3AAB7 !important; } .jatai-footer__icone { width: 18px !important; height: 18px !important; display: block !important; } .jatai-footer__dev-link { display: inline-flex !important; align-items: center !important; gap: 6px !important; color: inherit !important; text-decoration: none !important; transition: opacity .12s ease !important; } .jatai-footer__dev-link:hover { opacity: 0.7 !important; } /* ================================================= SHORTCODES DE PÁGINA — só o essencial (placeholder do Meu Perfil, que ainda não tem conteúdo de verdade). O resto (.jatai-pagina em si) não leva nenhum estilo próprio de propósito — não force nada de padding que possa competir com o container do Elementor. ================================================= */ .jatai-pagina__placeholder { display: flex !important; align-items: center !important; justify-content: center !important; min-height: 200px !important; font-family: 'Montserrat', -apple-system, sans-serif !important; } .jatai-pagina__placeholder-texto { font-size: 13px !important; font-weight: 500 !important; color: #A3AAB7 !important; } /* ================================================= TEMA ESCURO — shell compartilhado (sidebar, tablet-bar, header, barra mobile, breadcrumb) Padrão visual estilo Apple (Ajustes do iOS): fundo bem escuro por trás, superfícies (cards, sidebar, header) num cinza-carvão elevado, texto branco. As cores de cada role (dourado=gestora, verde=teacher, terracota=aluna) continuam as mesmas — são cores de identidade, não fazem parte da paleta clara/escura — só ajusto onde o contraste contra o fundo escuro pedia isso (ex: tons pastel que dependiam do fundo claro por trás pra funcionar). ================================================= */ /* Sidebar (desktop), barra de tablet, e o wrapper mobile (o sheet "Mais opções" reaproveita essas MESMAS variáveis --jatai-sb-*) — três consumidores, mas fundo/texto/hover são neutros, iguais pra qualquer papel, então uma única redefinição cobre os três. As cores de DESTAQUE (item ativo, indicador), porém, precisam ficar separadas por role: uma única redefinição aqui teria a MESMA especificidade de ".jatai-sidebar"/".jatai-tablet-bar" (não das variantes ".jatai-sidebar--teacher"/".tablet-teacher"), então sempre venceria a variante de role, não importa a ordem do arquivo — era exatamente esse o bug: no escuro, sidebar/tablet SEMPRE ficavam com o dourado da gestora, mesmo logado como teacher ou "vestindo" uma aluna. */ [data-jatai-tema="escuro"] .jatai-sidebar, [data-jatai-tema="escuro"] .jatai-tablet-bar, [data-jatai-tema="escuro"] .jatai-mobile { --jatai-sb-bg: #1C1C1E; --jatai-sb-texto: #F2F2F2; --jatai-sb-texto-suave: #98989D; --jatai-sb-item-hover: var(--hive-role-hover); } /* Destaque por role — GESTORA (dourado). Vem primeiro, então funciona como o padrão; as duas variantes abaixo (mesma especificidade, mas declaradas depois) sobrescrevem certinho pra teacher/aluna. Junto de --jatai-sb-*, aproveito pra fechar --jatai-nav-active-bg/ --jatai-nav-active-text aqui também — mesma variável de "cor de destaque por role", só que usada por outros consumidores (ícone padrão dos widgets do dashboard, fundo do item ativo do menu mobile, hover/ativo da barra de tablet). Não tinha NENHUM tratamento escuro antes, em lugar nenhum — por isso vários ícones do dashboard continuavam com o círculo pastel clarinho mesmo no tema escuro. */ /* Destaque por role no escuro — GESTORA. A cor cheia (--hive-role) e o texto sobre ela não mudam; só o clarinho vira translúcido e o tom de texto vira a própria cor cheia (lê bem sobre o carvão). */ [data-jatai-tema="escuro"] .jatai-sidebar, [data-jatai-tema="escuro"] .jatai-tablet-bar, [data-jatai-tema="escuro"] .tablet-gestora, [data-jatai-tema="escuro"] .dashboard-gestora, [data-jatai-tema="escuro"] .mobile-gestora { --hive-role-hover: rgba(232, 117, 20, 0.16); --hive-role-texto: #E87514; } /* Destaque por role no escuro — TEACHER. A cor cheia (--hive-role) e o texto sobre ela não mudam; só o clarinho vira translúcido e o tom de texto vira a própria cor cheia (lê bem sobre o carvão). */ [data-jatai-tema="escuro"] .jatai-sidebar--teacher, [data-jatai-tema="escuro"] .tablet-teacher, [data-jatai-tema="escuro"] .dashboard-teacher, [data-jatai-tema="escuro"] .mobile-teacher { --hive-role-hover: rgba(253, 156, 24, 0.16); --hive-role-texto: #FD9C18; } /* Destaque por role no escuro — ALUNA. A cor cheia (--hive-role) e o texto sobre ela não mudam; só o clarinho vira translúcido e o tom de texto vira a própria cor cheia (lê bem sobre o carvão). */ [data-jatai-tema="escuro"] .jatai-sidebar--aluna, [data-jatai-tema="escuro"] .tablet-aluna, [data-jatai-tema="escuro"] .dashboard-aluna, [data-jatai-tema="escuro"] .mobile-aluna { --hive-role-hover: rgba(251, 200, 60, 0.16); --hive-role-texto: #FBC83C; } /* A borda direita da sidebar era pensada pra separar do fundo BRANCO da página (preta bem translúcida). Uma linha translúcida contra o fundo escuro se mistura visualmente com o que tem atrás — nesse caso, a imagem de fundo com elementos florais em tons terrosos/dourados — criando um efeito de "linha dourada" estranho. Cor SÓLIDA em vez de translúcida: sempre aparece igual, não importa o que tiver atrás. */ [data-jatai-tema="escuro"] .jatai-sidebar { border-right: 1px solid #2C2C2E !important; } /* A barrinha vertical de "hover" (antes de virar "ativo") usava uma cor cinza-clara FIXA, não uma variável — ficava clara demais e sem relação com o resto da paleta escura. Agora usa a mesma cor de destaque da role (mais discreta que o indicador "ativo" cheio, via opacidade), pra já dar uma pista de "pra que role é essa página" mesmo antes de clicar. */ [data-jatai-tema="escuro"] .jatai-sidebar__indicador--hover { background: var(--jatai-sb-indicador-ativo) !important; opacity: .5 !important; } /* Texto do item, no hover — no claro/escuro "base" ele só ficava mais grosso (font-weight), sem nenhuma cor diferente do resto do menu. No escuro, ganha uma tintura sutil na cor da role (a mesma do item ativo) — é o que avisa "isso é clicável e é dessa role" antes mesmo de soltar o clique, sem gritar tanto quanto o fundo pastel do item realmente ativo. */ [data-jatai-tema="escuro"] .jatai-sidebar__item:hover { color: var(--hive-role-texto) !important; } [data-jatai-tema="escuro"] .jatai-header { background: #1C1C1E !important; border-bottom: 0.5px solid rgba(255, 255, 255, 0.12) !important; } [data-jatai-tema="escuro"] .jatai-header__titulo { color: #F2F2F2 !important; } /* Logo — vem via get_custom_logo() do WordPress, com uma URL fixa (a imagem clara configurada no Personalizar > Identidade do Site). Não dá pra trocar o src de um só com CSS, então a técnica aqui é: esconde a imagem original (visibility:hidden mantém o espaço que ela ocupa, diferente de display:none que colapsaria o layout) e desenha a versão branca como background do próprio container, do tamanho exato que a imagem tinha. */ [data-jatai-tema="escuro"] .jatai-header__logo img, [data-jatai-tema="escuro"] .jatai-header__logo .custom-logo { visibility: hidden !important; } [data-jatai-tema="escuro"] .jatai-header__logo { background-image: url('http://portal.teacherbiagrisolia.com.br/wp-content/uploads/2025/12/logo-v2-branco.png') !important; background-repeat: no-repeat !important; background-position: center center !important; background-size: contain !important; } /* No escuro, "aumentar o logo sem aumentar o header" significa comer o espaço vazio ao redor dele (o padding vertical do header), não só o tamanho da caixa — os dois precisam mudar juntos, na mesma proporção, pra altura total continuar exatamente igual (58px: antes 6px de respiro + 46px de logo, agora 2px de respiro + 54px de logo). */ [data-jatai-tema="escuro"] .jatai-header { padding-top: 2px !important; padding-bottom: 2px !important; } [data-jatai-tema="escuro"] .jatai-header__logo--desktop { width: 240px !important; height: 54px !important; } [data-jatai-tema="escuro"] .jatai-header__logo--mobile { width: 165px !important; height: 38px !important; } /* Barra mobile — o "pill" flutuante de vidro fosco vira uma versão escura do mesmo efeito, em vez de branco translúcido. */ [data-jatai-tema="escuro"] .jatai-mobile-bar { background: rgba(18, 18, 20, 0.94) !important; backdrop-filter: blur(44px) saturate(1.8) brightness(0.9) !important; -webkit-backdrop-filter: blur(44px) saturate(1.8) brightness(0.9) !important; border: 0.5px solid rgba(255, 255, 255, 0.14) !important; } /* Botão central ("+", criar) e o de "Mais opções" — os dois usam um branco translúcido FIXO (rgba(255,255,255,.42)) sem depender de nenhuma variável, pensado pra flutuar em cima da cápsula clara. No escuro, esse mesmo branco ficava sozinho ali, destoando de tudo (os outros ícones já escureceram, só esses dois continuavam claros) — era exatamente essa a sensação de "não estar na mesma cor que os demais botões". Aqui, o mesmo princípio (círculo translúcido por cima do blur da cápsula, sem blur próprio — os dois têm isso desligado de propósito no inline do PHP, por causa de um bug de blur aninhado no Safari/iOS), só que na direção oposta: branco translúcido vira ESCURO translúcido. */ [data-jatai-tema="escuro"] .jatai-mobile-nav-item--central { background: rgba(0, 0, 0, 0.32) !important; background-color: rgba(0, 0, 0, 0.32) !important; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; } [data-jatai-tema="escuro"] .jatai-mobile-bar .jatai-bottomsheet-open { background: rgba(0, 0, 0, 0.32) !important; background-color: rgba(0, 0, 0, 0.32) !important; border-color: rgba(255, 255, 255, 0.14) !important; color: #98989D !important; } [data-jatai-tema="escuro"] .jatai-mobile-bar .jatai-bottomsheet-open:hover, [data-jatai-tema="escuro"] .jatai-mobile-bar .jatai-bottomsheet-open:active { background: rgba(0, 0, 0, 0.45) !important; background-color: rgba(0, 0, 0, 0.45) !important; } /* .jatai-nav-active (sheet aberto) já lê --jatai-nav-active-bg/texto, que já são certas no escuro — sem ajuste necessário aqui. */ [data-jatai-tema="escuro"] .jatai-mobile-nav-item { color: #98989D !important; } [data-jatai-tema="escuro"] .jatai-mobile-nav-item.jatai-nav-active { color: var(--jatai-nav-active-text, #F2F2F2) !important; } /* Sheet "Mais opções" da barra mobile — o fundo geral (--jatai-sb-bg) e o texto dos itens já escurecem sozinhos agora que .jatai-mobile entrou na redefinição de variáveis lá em cima; faltava só o que ficava com branco sólido HARDCODED (não vinha de variável nenhuma): o botão de fechar, o card de contexto (avatar + nome) e o cartão que envolve a lista de itens. */ html[data-jatai-tema="escuro"] body .jatai-mobile-sheet__fechar { background: #2C2C2E !important; border-color: rgba(255, 255, 255, 0.14) !important; color: #F2F2F2 !important; } html[data-jatai-tema="escuro"] body .jatai-mobile-sheet__fechar:hover, html[data-jatai-tema="escuro"] body .jatai-mobile-sheet__fechar:active { background: #3A3A3C !important; } html[data-jatai-tema="escuro"] body .jatai-mobile-sheet__contexto, html[data-jatai-tema="escuro"] body .jatai-mobile-sheet__lista { background: #2C2C2E !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important; } [data-jatai-tema="escuro"] .jatai-mobile-sheet-item { border-bottom-color: rgba(255, 255, 255, 0.08) !important; } /* Breadcrumb — no claro, o fundo de cada pill é "vidro" (translúcido + desfocado) por cima da página branca, e funciona bem porque o fundo ali é liso. No escuro, esse mesmo vidro fica em cima da imagem de fundo (elementos florais, textura irregular) — o desfoque soma com a transparência e cria uma mancha/faixa de cor diferente atrás do texto, dependendo do que está exatamente atrás de cada pill. Fundo SÓLIDO (sem backdrop-filter) resolve de vez: sempre a mesma cor, não importa o que tiver atrás. */ [data-jatai-tema="escuro"] .jatai-breadcrumb-link, [data-jatai-tema="escuro"] a.jatai-breadcrumb-link, [data-jatai-tema="escuro"] .jatai-breadcrumb-current { color: #C7C7CC !important; background: #242426 !important; background-color: #242426 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* As cores de --jatai-bc-acento (dourado/verde/marrom) foram calibradas pra ler bem em cima do pill de vidro CLARO — no escuro, ficam escuras/pouco contraste contra o fundo escuro do pill (o verde e o marrom da teacher/aluna, principalmente, quase somem). Versões mais claras das mesmas cores, só pro tema escuro — mesma família já usada no resto do sistema pra texto de role em cima de fundo escuro (sidebar, calendário, widgets). */ [data-jatai-tema="escuro"] .jatai-breadcrumb--gestora { --jatai-bc-acento: #E87514; } [data-jatai-tema="escuro"] .jatai-breadcrumb--teacher { --jatai-bc-acento: #FD9C18; } [data-jatai-tema="escuro"] .jatai-breadcrumb--aluna { --jatai-bc-acento: #FBC83C; } /* O texto do nó ATIVO precisa continuar na cor da role mesmo no escuro — a regra de cima (".jatai-breadcrumb-current") tem MAIS especificidade que a regra do claro que pinta só o texto (".jatai-breadcrumb-current .jatai-breadcrumb-texto"), então sem essa declaração aqui ela simplesmente apagava a cor de volta pro cinza genérico: era exatamente esse o motivo da cor da role "sumir" no nó ativo do breadcrumb no escuro. */ [data-jatai-tema="escuro"] .jatai-breadcrumb-current .jatai-breadcrumb-texto { color: var(--jatai-bc-acento) !important; } [data-jatai-tema="escuro"] .jatai-breadcrumb-link:hover, [data-jatai-tema="escuro"] a.jatai-breadcrumb-link:hover, [data-jatai-tema="escuro"] .jatai-breadcrumb-link:focus, [data-jatai-tema="escuro"] a.jatai-breadcrumb-link:focus { background: #303032 !important; background-color: #303032 !important; } /* O hover colorido do nó RAIZ (Gestora/Teacher/Aluna — cor sólida da role + texto branco) já existe lá no claro, mas com uma especificidade menor que a regra genérica de cima: no escuro, ela sempre vencia e o hover do nó raiz virava só um branco bem fraquinho, sem cor de role nenhuma — "estranho" é exatamente essa sensação de hover sem reação nenhuma de verdade. As regras abaixo, com a MESMA especificidade da genérica (mesmo número de classes/atributos), restauram a cor sólida. */ [data-jatai-tema="escuro"] a.jatai-breadcrumb-link--gestora:hover, [data-jatai-tema="escuro"] a.jatai-breadcrumb-link--gestora:focus { background: #E87514 !important; background-color: #E87514 !important; color: #1F2328 !important; } [data-jatai-tema="escuro"] a.jatai-breadcrumb-link--teacher:hover, [data-jatai-tema="escuro"] a.jatai-breadcrumb-link--teacher:focus { background: #FD9C18 !important; background-color: #FD9C18 !important; color: #1F2328 !important; } [data-jatai-tema="escuro"] a.jatai-breadcrumb-link--aluna:hover, [data-jatai-tema="escuro"] a.jatai-breadcrumb-link--aluna:focus { background: #FBC83C !important; background-color: #FBC83C !important; color: #1F2328 !important; } /* Chips de teacher (breadcrumb de uma aluna com mais de uma teacher) não tinham NENHUM tratamento escuro — o cinza-marrom claro (#8A92A1) pensado pro fundo de vidro claro ficava "lavado" contra o fundo escuro, quase ilegível. Fundo sólido (sem depender de blur, mesmo motivo de cima) resolve a mancha — mas BEM mais suave que os outros pills (#242426 vira algo quase imperceptível aqui): o chip é uma informação secundária ("de quem é essa aluna"), não devia chamar mais atenção que o próprio nome da página atual. Antes de ajustar, tava com o MESMO peso visual de um pill "de verdade" e roubava a cena do nó ativo, que é o que devia se destacar mais. */ [data-jatai-tema="escuro"] .jatai-breadcrumb-chip, [data-jatai-tema="escuro"] a.jatai-breadcrumb-chip { color: #A8A8AD !important; background: rgba(255, 255, 255, 0.1) !important; background-color: rgba(255, 255, 255, 0.1) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Fundo da área principal — imagem fornecida, uma versão pra PC e outra pra mobile (mesma quebra de 600px já usada no resto do C2). background-color por baixo (não só a imagem) é de propósito: garante um fundo escuro sólido SEMPRE, mesmo se a imagem tiver alguma borda transparente ou não cobrir 100% da área em alguma proporção de tela — sem isso, qualquer parte sem cobertura mostraria o branco padrão por trás, criando o efeito de "borda clara" bem na five entre a sidebar e o conteúdo. */ [data-jatai-tema="escuro"] .jatai-main-area { background: #111113 !important; background-color: #111113 !important; background-image: none !important; } /* Proteção extra: containers do PRÓPRIO Elementor (não nossos) que às vezes têm fundo branco por padrão do tema, dentro da main-area — se algum "vazar" por baixo/ao redor da imagem de fundo, ainda assim fica escuro. */ [data-jatai-tema="escuro"] .jatai-main-area .elementor-widget-wrap, [data-jatai-tema="escuro"] .jatai-main-area .elementor-container, [data-jatai-tema="escuro"] .jatai-main-area .e-con-inner, [data-jatai-tema="escuro"] .jatai-main-area .e-con { background-color: transparent !important; } /* A "borda branca sólida" ao redor da sidebar (achada via debug numa página) não vem de nenhum CSS nosso — é um container do PRÓPRIO Elementor com fundo/borda configurados DIRETO no editor visual (aba Estilo do container). Só que a sidebar é inserida via um widget/ template do Elementor repetido em CADA página — então cada página tem o SEU PRÓPRIO container envolvendo a sidebar, com um ID diferente (ex: "ab33536" só existe na página onde eu testei; outra página tem outro ID qualquer). Uma regra mirando um ID específico só resolve NAQUELA página. A correção genérica: ":has()" pra pegar QUALQUER elemento do Elementor que tenha a sidebar (ou o shell inteiro) como descendente, não importa a distância nem o ID — cobre toda página de uma vez, para sempre, mesmo que o Elementor gere um ID novo amanhã. */ html[data-jatai-tema="escuro"] body .elementor-element:has(.jatai-sidebar), html[data-jatai-tema="escuro"] body .elementor-element:has(.jatai-page-shell), html[data-jatai-tema="escuro"] body .e-con:has(.jatai-sidebar), html[data-jatai-tema="escuro"] body .e-con:has(.jatai-page-shell) { background: transparent !important; background-color: transparent !important; background-image: none !important; border: none !important; border-color: transparent !important; outline: none !important; box-shadow: none !important; } [data-jatai-tema="escuro"] .jatai-footer { background: #1C1C1E !important; border-top: 0.5px solid rgba(255, 255, 255, 0.12) !important; } [data-jatai-tema="escuro"] .jatai-footer__direitos { color: #C7C7CC !important; } [data-jatai-tema="escuro"] .jatai-footer__dev { color: #6E6E73 !important; } /* Botão "+" ao lado do logo (criar aula/pacote, só gestora) e o botão "voltar" (mobile) */ html[data-jatai-tema="escuro"] body button.jatai-header__criar { background: #2C2C2E !important; color: #E8956E !important; } html[data-jatai-tema="escuro"] body button.jatai-header__criar:hover { background: #3A3A3C !important; } html[data-jatai-tema="escuro"] body a.jatai-header__voltar { color: #C7C7CC !important; } /* ================================================= HIVE — NAVEGAÇÃO POR ROLE (padrão Cora) Sidebar e main area brancas. #F0F3F8 nos detalhes claros. A cor da role aparece em 3 tons: --hive-role cheia: item ATIVO e indicador --hive-role-hover clarinha: HOVER dos itens --hive-role-texto escura: texto/ícone em cima de branco --hive-role-sobre texto em cima da cor cheia Antes, hover e ativo usavam o mesmo --jatai-nav-active-bg; aqui eles se separam em sidebar, tablet, mobile e sheet. ================================================= */ :root { --hive-branco: #FFFFFF; --hive-claro: #F0F3F8; --hive-claro-forte: #E6EBF2; --hive-borda: #E4E8EF; --hive-borda-forte: #D6DCE5; --hive-texto: #1F2328; --hive-texto-2: #3A4250; --hive-texto-3: #5B6372; --hive-texto-suave: #8A92A1; } /* Sidebar desktop — item em repouso com texto escuro (igual pras 3 roles, estilo Cora), hover clarinho da role e ativo com a cor cheia. "html body .jatai-sidebar" na frente pra vencer a regra antiga .jatai-sidebar--aluna .jatai-sidebar__item:not(...). */ html body .jatai-sidebar .jatai-sidebar__item { color: var(--jatai-sb-texto) !important; } html body .jatai-sidebar .jatai-sidebar__item:hover { background: var(--hive-role-hover) !important; color: var(--hive-role-texto) !important; } html body .jatai-sidebar .jatai-sidebar__item--ativo, html body .jatai-sidebar .jatai-sidebar__item--ativo:hover { background: var(--hive-role) !important; color: var(--hive-role-sobre) !important; } .jatai-sidebar__indicador--hover, .jatai-tablet-indicador--hover { background: var(--hive-role) !important; opacity: .35 !important; } /* Sidebar legada, tablet, mobile e sheet: ATIVO = cor cheia */ html body .jatai-sidebar-nav-item.jatai-nav-active, html body .jatai-tablet-nav-item.jatai-nav-active, html body .jatai-mobile-nav-item.jatai-nav-active, html body .jatai-mobile-sheet-item.jatai-nav-active, html body .jatai-mobile-bar .jatai-bottomsheet-open.jatai-nav-active { background: var(--hive-role) !important; background-color: var(--hive-role) !important; color: var(--hive-role-sobre) !important; } html body .jatai-sidebar-nav-item.jatai-nav-active .jatai-sidebar-nav-list, html body .jatai-tablet-nav-item.jatai-nav-active .jatai-tablet-nav-icon, html body .jatai-tablet-nav-item.jatai-nav-active .jatai-tablet-nav-label, html body .jatai-mobile-nav-item.jatai-nav-active .jatai-mobile-nav-icon, html body .jatai-mobile-sheet-item.jatai-nav-active .jatai-mobile-sheet-item__icone { color: var(--hive-role-sobre) !important; } /* HOVER = clarinho da role (sem sombra, mais limpo) */ .jatai-sidebar-nav-item:not(.jatai-nav-active):hover, .jatai-tablet-nav-item:not(.jatai-nav-active):hover, .jatai-mobile-nav-item:not(.jatai-nav-active):not(.jatai-mobile-nav-item--central):hover { background: var(--hive-role-hover) !important; box-shadow: none !important; } .jatai-tablet-nav-item.jatai-nav-active, .jatai-sidebar-nav-item.jatai-nav-active { box-shadow: none !important; } /* Barra de tablet e sheet mobile no padrão branco/#F0F3F8 */ .jatai-tablet-bar { border-right: 1px solid var(--hive-borda) !important; } html body .jatai-tablet-toggle-button { background: var(--hive-claro) !important; } html body .jatai-tablet-toggle-button:hover { background: var(--hive-claro-forte) !important; } .jatai-mobile-sheet { background: var(--hive-claro) !important; } .jatai-mobile-sheet-item:active { background-color: var(--hive-role-hover) !important; } /* Breadcrumb: sem vidro (o fundo agora é branco liso) */ html body .jatai-breadcrumb-link, html body a.jatai-breadcrumb-link, html body .jatai-breadcrumb-current, html body .jatai-breadcrumb-chip, html body a.jatai-breadcrumb-chip { background: var(--hive-claro) !important; background-color: var(--hive-claro) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; } html body .jatai-breadcrumb-link:hover, html body a.jatai-breadcrumb-link:hover, html body .jatai-breadcrumb-link:focus, html body a.jatai-breadcrumb-link:focus { background: var(--hive-claro-forte) !important; background-color: var(--hive-claro-forte) !important; box-shadow: none !important; } .jatai-breadcrumb-separator { color: var(--hive-borda-forte) !important; } /* ---------- Pares escuros ---------- */ [data-jatai-tema="escuro"] .jatai-tablet-bar { border-right: 1px solid #2C2C2E !important; } html[data-jatai-tema="escuro"] body .jatai-tablet-toggle-button { background: #2C2C2E !important; } html[data-jatai-tema="escuro"] body .jatai-tablet-toggle-button:hover { background: #3A3A3C !important; } [data-jatai-tema="escuro"] .jatai-mobile-sheet { background: #1C1C1E !important; } html[data-jatai-tema="escuro"] body .jatai-breadcrumb-link, html[data-jatai-tema="escuro"] body a.jatai-breadcrumb-link, html[data-jatai-tema="escuro"] body .jatai-breadcrumb-current { background: #242426 !important; background-color: #242426 !important; } html[data-jatai-tema="escuro"] body .jatai-breadcrumb-chip, html[data-jatai-tema="escuro"] body a.jatai-breadcrumb-chip { background: rgba(255, 255, 255, 0.1) !important; background-color: rgba(255, 255, 255, 0.1) !important; } html[data-jatai-tema="escuro"] body .jatai-breadcrumb-link:hover, html[data-jatai-tema="escuro"] body a.jatai-breadcrumb-link:hover, html[data-jatai-tema="escuro"] body .jatai-breadcrumb-link:focus, html[data-jatai-tema="escuro"] body a.jatai-breadcrumb-link:focus { background: #303032 !important; background-color: #303032 !important; } [data-jatai-tema="escuro"] .jatai-breadcrumb-separator { color: #3A3A3C !important; } html body a.jatai-breadcrumb-chip:hover, html body a.jatai-breadcrumb-chip:focus { background: #FD9C18 !important; background-color: #FD9C18 !important; color: #1F2328 !important; } html body a.jatai-breadcrumb-link--gestora:hover, html body a.jatai-breadcrumb-link--gestora:focus, html[data-jatai-tema="escuro"] body a.jatai-breadcrumb-link--gestora:hover, html[data-jatai-tema="escuro"] body a.jatai-breadcrumb-link--gestora:focus { background: #E87514 !important; background-color: #E87514 !important; color: #1F2328 !important; } html body a.jatai-breadcrumb-link--teacher:hover, html body a.jatai-breadcrumb-link--teacher:focus, html[data-jatai-tema="escuro"] body a.jatai-breadcrumb-link--teacher:hover, html[data-jatai-tema="escuro"] body a.jatai-breadcrumb-link--teacher:focus { background: #FD9C18 !important; background-color: #FD9C18 !important; color: #1F2328 !important; } html body a.jatai-breadcrumb-link--aluna:hover, html body a.jatai-breadcrumb-link--aluna:focus, html[data-jatai-tema="escuro"] body a.jatai-breadcrumb-link--aluna:hover, html[data-jatai-tema="escuro"] body a.jatai-breadcrumb-link--aluna:focus { background: #FBC83C !important; background-color: #FBC83C !important; color: #1F2328 !important; } /* ================================================= HIVE 1.6.0 — BOTÃO "ABRIR" NA COR DO DESTINO O botão usa a cor da role do painel que VAI abrir (não a de quem está vendo): abrir uma gestora é laranja, uma teacher é laranja-claro, uma aluna é amarelo. É o aviso visual de "daqui em diante tudo fica nessa cor". Cores fixas por modificador, de propósito (não usa --hive-role, que é a cor do contexto ATUAL). ================================================= */ /* Só o ícone, no mesmo formato de sempre (quadrado 34px, canto 9px) — a cor é que diz pra onde leva. */ html body .jatai-botao-abrir { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; width: 34px !important; height: 34px !important; padding: 0 !important; border-radius: 9px !important; border: none !important; line-height: 1 !important; text-decoration: none !important; cursor: pointer !important; transition: background .12s ease, transform .12s ease !important; } html body .jatai-botao-abrir:active { transform: scale(.97) !important; } html body .jatai-botao-abrir--gestora { background: #E87514 !important; color: #1F2328 !important; } html body .jatai-botao-abrir--teacher { background: #FD9C18 !important; color: #1F2328 !important; } html body .jatai-botao-abrir--aluna { background: #FBC83C !important; color: #1F2328 !important; } html body .jatai-botao-abrir--comercial { background: #526B3D !important; color: #FFFFFF !important; } html body .jatai-botao-abrir--gestora:hover, html body *:hover > .jatai-botao-abrir--gestora { background: #D16912 !important; } html body .jatai-botao-abrir--teacher:hover, html body *:hover > .jatai-botao-abrir--teacher { background: #E48C16 !important; } html body .jatai-botao-abrir--aluna:hover, html body *:hover > .jatai-botao-abrir--aluna { background: #E2B436 !important; } html body .jatai-botao-abrir--comercial:hover, html body *:hover > .jatai-botao-abrir--comercial { background: #465B34 !important; } /* ================================================= HIVE 1.6.0 — PALETA DO COMERCIAL (#526B3D) Vale quando o dono do workspace atual é um comercial (body.jatai- contexto-comercial, ver C2 PHP). Sobrescreve os tokens das mesmas classes da gestora — tudo que já lê --hive-role* (sidebar, tablet, mobile, dashboard, breadcrumb, calendário) muda junto. Diferente das outras roles, o verde escuro aceita texto BRANCO por cima (5,95:1), então --hive-role-sobre é #FFFFFF. ================================================= */ body.jatai-contexto-comercial .sidebar-gestora, body.jatai-contexto-comercial .tablet-gestora, body.jatai-contexto-comercial .mobile-gestora, body.jatai-contexto-comercial .dashboard-gestora, body.jatai-contexto-comercial .jatai-sidebar, body.jatai-contexto-comercial .jatai-tablet-bar { --hive-role: #526B3D; --hive-role-forte: #465B34; --hive-role-hover: #E3E7E0; --hive-role-texto: #526B3D; --hive-role-sobre: #FFFFFF; --jatai-c4-accent: #526B3D; --jatai-c4-accent-claro: #526B3D; --jatai-c4-accent-texto: #526B3D; --jatai-c4-accent-sobre: #FFFFFF; } body.jatai-contexto-comercial .jatai-breadcrumb--gestora { --jatai-bc-acento: #526B3D; } html body a.jatai-breadcrumb-link--comercial:hover, html body a.jatai-breadcrumb-link--comercial:focus, html[data-jatai-tema="escuro"] body a.jatai-breadcrumb-link--comercial:hover, html[data-jatai-tema="escuro"] body a.jatai-breadcrumb-link--comercial:focus { background: #526B3D !important; background-color: #526B3D !important; color: #FFFFFF !important; } /* Escuro: cor cheia igual; clarinho vira translúcido e o tom de texto clareia (o verde escuro sozinho some no carvão — 2,9:1). */ html[data-jatai-tema="escuro"] body.jatai-contexto-comercial .sidebar-gestora, html[data-jatai-tema="escuro"] body.jatai-contexto-comercial .tablet-gestora, html[data-jatai-tema="escuro"] body.jatai-contexto-comercial .mobile-gestora, html[data-jatai-tema="escuro"] body.jatai-contexto-comercial .dashboard-gestora, html[data-jatai-tema="escuro"] body.jatai-contexto-comercial .jatai-sidebar, html[data-jatai-tema="escuro"] body.jatai-contexto-comercial .jatai-tablet-bar { --hive-role-hover: rgba(82, 107, 61, 0.30); --hive-role-texto: #9DBB83; --jatai-c4-accent-texto: #9DBB83; --jatai-c4-accent-claro: #9DBB83; } html[data-jatai-tema="escuro"] body.jatai-contexto-comercial .jatai-breadcrumb--gestora { --jatai-bc-acento: #9DBB83; }