/* ========================================================================= * MODAL DE LOGIN DA CONTA - wc-account-dashboard * * COMO ESTE ARQUIVO CHEGA NA TELA (e por que ele nao usa a diretiva de * prioridade do CSS, aquela com ponto de exclamacao antes de important) * * Ele nao e enfileirado. includes/class-wc-account-dashboard-modal-styles.php * le o conteudo, remove os comentarios e imprime inline no rodape. Por sair * por ultimo no documento, vence por ORDEM de cascata qualquer folha do tema * ou do Elementor de mesma especificidade. Essa e a arma do arquivo: ele tem * ZERO ocorrencias daquela diretiva e precisa continuar com zero. Quando uma * regra nao pega, o caminho e subir a especificidade do jeito que o arquivo * ja faz (repetir a classe raiz no seletor). A diretiva de prioridade nao: * a primeira obriga todas as seguintes e a pele inteira apodrece. * * ORDEM DAS SECOES - a ordem E a cascata, nao mexa sem medir: * a) variaveis f) botao fechar * b) estrutura g) desktop (min-width: 768px) * c) painel da marca e logo h) celular (max-width: 767px) * d) formularios i) prefers-reduced-motion * e) acoes * * REGRA DE MANUTENCAO: existe UMA unica declaracao por par * (seletor, propriedade) dentro de cada contexto de media. Para mudar um * valor, edite a declaracao que ja existe. Empilhar um bloco novo no fim do * arquivo foi exatamente o que produziu as 48 declaracoes mortas que esta * versao removeu. * ========================================================================= */ /* ========================================================================= * a) VARIAVEIS * A classe raiz aparece DUAS vezes no seletor de proposito: e o degrau de * especificidade que deixa a pele vencer o kit do Elementor (que pinta h3, * button e input por tag) sem precisar de diretiva de prioridade. * ========================================================================= */ /* ------------------------------------------------------------------------- * COR DA MARCA: TRES NIVEIS, do mais especifico para o mais geral. * * 1) --wcad-modal-* controle do widget wcad_account_dropdown, por loja. * E o lugar certo de trocar a cor: Elementor > widget * da conta > Estilo > Modal de login > Cor de destaque. * 2) --e-global-color-* cor global do kit do Elementor, que fica no . * secondary = laranja/amarelo da marca da loja; * text = tom escuro de hover da marca da loja. * Os dois kits tem os MESMOS IDs com o valor de cada * loja, entao o mesmo arquivo serve as duas. * 3) o literal ultimo recurso. E o valor que este arquivo ja tinha, * para nao mudar nada em loja que nao tenha kit. * * NENHUMA cor de loja e escrita aqui. Antes desta versao os tres tons eram * literais amarelos e saiam iguais nas duas lojas - foi o que o dono viu na * Dig Fire. Quem quiser trocar mexe no nivel 1 (widget) ou no nivel 2 (kit). * ------------------------------------------------------------------------- */ .wcad-account-login-modal.wcad-account-login-modal{ --wcad-amber: var(--wcad-modal-accent, var(--e-global-color-secondary, #FFA71A)); --wcad-amber-press: var(--wcad-modal-accent-press, var(--e-global-color-text, #F19A0F)); --wcad-amber-deep: var(--wcad-modal-accent-deep, var(--e-global-color-text, #B5820A)); --wcad-amber-active: var(--wcad-modal-accent-active, var(--e-global-color-text, #C88A0B)); --wcad-ink: var(--e-global-color-33c099f, #18181B); --wcad-text: var(--e-global-color-e1e8980, #374151); --wcad-muted: var(--e-global-color-86f275e, #5B6270); --wcad-line: var(--e-global-color-16f14a9, #E7E5E4); --wcad-field-line: #8A8A93; --wcad-danger: var(--e-global-color-d0f3937, #DC2626); --wcad-surface: #FFFFFF; --wcad-sunken: #F4F4F5; --wcad-dark: var(--e-global-color-33c099f, #18181B); --wcad-on-dark: #FFFFFF; --wcad-on-dark-soft: var(--e-global-color-371ea2a, #A1A1AA); --wcad-chip-dark: #2E2E35; --wcad-chip-dark-line: #52525B; --wcad-r-card: 18px; --wcad-r-field: 10px; --wcad-ease: cubic-bezier(.22, 1, .36, 1); --wcad-slide: .45s; --wcad-font: Inter, 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } /* ========================================================================= * b) ESTRUTURA: raiz, backdrop, cartao, shell * ========================================================================= */ .wcad-account-login-modal.wcad-account-login-modal,.wcad-account-login-modal .wcad-account-login-modal *,.wcad-account-login-modal .wcad-account-login-modal *::before,.wcad-account-login-modal .wcad-account-login-modal *::after{ box-sizing: border-box; font-family: var(--wcad-font); } .wcad-account-login-modal.wcad-account-login-modal[hidden]{ display: none; } .wcad-account-login-modal.wcad-account-login-modal{ position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 16px; overflow-y: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .wcad-account-login-modal .wcad-account-login-modal__backdrop{ position: fixed; inset: 0; background: rgba(9, 9, 11, .64); -webkit-backdrop-filter: blur(6px) saturate(120%); backdrop-filter: blur(6px) saturate(120%); } .wcad-account-login-modal .wcad-account-login-modal__card{ position: relative; width: 100%; max-width: 420px; margin: auto; background: var(--wcad-surface); border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--wcad-r-card); box-shadow: 0 2px 6px rgba(9, 9, 11, .24), 0 36px 72px -20px rgba(9, 9, 11, .55); overflow: hidden; } .wcad-account-login-modal .wcad-account-login-modal__shell{ position: relative; } /* __layout so tem regra dentro das media queries: no desktop ele vira a pista do deslize (block + overflow clip); no celular vira coluna flex. */ /* ========================================================================= * c) PAINEL DA MARCA E LOGO * * POR QUE A LOGO TEM FILTRO NO DESKTOP E NAO NO CELULAR. * A logo da loja e escura. No desktop ela fica sobre o painel preto da marca, * onde sumiria; entao e forcada a branco por brightness(0) invert(1). O filtro * mora numa VARIAVEL declarada no proprio painel para que uma loja de logo ja * clara possa desliga-lo sem editar este arquivo. No celular nao existe painel * preto - a faixa do topo e branca (secao h) - e la o filtro e zerado, senao a * logo branca sumiria no fundo branco. * * A caixa branca que envolvia a logo foi retirada: com o filtro ela ja aparece * sozinha, e a caixa virava um adesivo colado no painel. * ========================================================================= */ .wcad-account-login-modal .wcad-account-login-modal__panel{ --wcad-logo-filtro: brightness(0) invert(1); position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 14px; padding: 26px 22px 26px; background-color: var(--wcad-dark); } .wcad-account-login-modal .wcad-account-login-modal__panel::before{ content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(115% 80% at 8% 0%, rgba(255, 255, 255, .065), rgba(255, 255, 255, 0) 62%), radial-gradient(90% 70% at 100% 100%, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0) 60%); } .wcad-account-login-modal .wcad-account-login-modal__panel::after{ content: ''; position: absolute; z-index: 0; pointer-events: none; width: 340px; height: 340px; right: -132px; bottom: -172px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .11); box-shadow: 0 0 0 34px rgba(255, 255, 255, .022), inset 0 0 60px rgba(255, 255, 255, .03); } .wcad-account-login-modal .wcad-account-login-modal__panel > *{ position: relative; z-index: 1; } .wcad-account-login-modal .wcad-account-login-modal__panel-logo-wrap{ align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; padding: 0; margin-bottom: 4px; background: transparent; border: 0; border-radius: 0; box-shadow: none; } .wcad-account-login-modal .wcad-account-login-modal__panel-logo{ display: block; width: auto; height: auto; max-width: 190px; filter: var(--wcad-logo-filtro); } .wcad-account-login-modal .wcad-account-login-modal__eyebrow{ display: block; margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--wcad-amber); } /* #FFFFFF literal, e nao var(--wcad-on-dark): as duas resolviam para o mesmo branco, e a literal era a ultima declarada - e ela que esta na tela hoje. */ .wcad-account-login-modal .wcad-account-login-modal__title{ margin: 0; font-size: 24px; line-height: 1.2; font-weight: 700; letter-spacing: -.015em; color: #FFFFFF; } .wcad-account-login-modal .wcad-account-login-modal__subtitle{ margin: 0; max-width: 42ch; font-size: 14px; line-height: 1.55; color: var(--wcad-on-dark-soft); } .wcad-account-login-modal .wcad-account-login-modal__benefits{ display: flex; flex-direction: column; gap: 14px; margin-top: 6px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .10); } .wcad-account-login-modal .wcad-account-login-modal__benefit{ position: relative; margin: 0; padding-left: 38px; min-height: 26px; font-size: 13.5px; line-height: 1.5; color: var(--wcad-on-dark-soft); } .wcad-account-login-modal .wcad-account-login-modal__benefit strong{ display: block; margin-bottom: 1px; font-size: 14px; font-weight: 600; letter-spacing: -.005em; color: var(--wcad-on-dark); } /* O CIRCULO e o ICONE deixaram de ser um elemento so. * Antes o ::before carregava as duas coisas: a cor do circulo em rgba fixa e o * traco do icone escrito DENTRO do data URI (stroke=%23FFA71A). Cor dentro de * data URI nao aceita variavel, entao o icone continuava amarelo mesmo com a * variavel da marca trocada - foi o que o dono viu. * Agora: * ::before = so o circulo. Pinta com a cor cheia da marca e usa opacity:.12 * para chegar nos mesmos 12%. Sem rgba fixa e sem color-mix. * ::after = so o icone. O data URI virou MASCARA (o desenho define apenas o * recorte; a cor do traco dentro dele deixou de ter efeito), e * quem pinta e background-color. Por isso os tres data URIs abaixo * seguem byte a byte os antigos, com o %23FFA71A inerte la dentro. * O ::after NAO declara content aqui de proposito: sem content o pseudo nao * nasce. Quem da content e cada regra :nth-child abaixo, junto com o icone. * Assim um quarto beneficio, sem icone, nao vira um quadrado laranja solido. */ .wcad-account-login-modal .wcad-account-login-modal__benefit::before{ content: ''; position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 8px; background-color: var(--wcad-amber); opacity: .12; } .wcad-account-login-modal .wcad-account-login-modal__benefit::after{ position: absolute; left: 0; top: 0; width: 26px; height: 26px; background-color: var(--wcad-amber); -webkit-mask-image: var(--wcad-benefit-icon); mask-image: var(--wcad-benefit-icon); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 15px 15px; mask-size: 15px 15px; } .wcad-account-login-modal .wcad-account-login-modal__benefit:nth-child(1)::after{ content: ''; --wcad-benefit-icon: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23FFA71A%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 2.6 20.5 7.3v9.4L12 21.4 3.5 16.7V7.3z%22/%3E%3Cpath d=%22M3.7 7.4 12 12l8.3-4.6%22/%3E%3Cpath d=%22M12 12v9.4%22/%3E%3C/svg%3E'); } .wcad-account-login-modal .wcad-account-login-modal__benefit:nth-child(2)::after{ content: ''; --wcad-benefit-icon: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23FFA71A%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 21.4c4.3-1.5 7.2-5.6 7.2-10.1V5.7L12 2.6 4.8 5.7v5.6c0 4.5 2.9 8.6 7.2 10.1z%22/%3E%3Cpath d=%22m9.1 11.9 2.2 2.2 3.6-4.3%22/%3E%3C/svg%3E'); } .wcad-account-login-modal .wcad-account-login-modal__benefit:nth-child(3)::after{ content: ''; --wcad-benefit-icon: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23FFA71A%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20.5 12.2c0 3.9-3.8 7.1-8.5 7.1-1 0-2-.15-2.9-.42L3.6 20.8l1.9-3.6c-1.2-1.3-2-3-2-5 0-3.9 3.8-7.1 8.5-7.1s8.5 3.2 8.5 7.1z%22/%3E%3C/svg%3E'); } /* ========================================================================= * d) FORMULARIOS: troca de vista, campos, rotulos, olho da senha, * lembrar-me e mensagem * * O estado vem de data-wcad-view na raiz. No celular quem esconde e o atributo * hidden que o JS poe nos inativos; no desktop os tres ficam montados (secao g) * e o JS marca os inativos com inert + aria-hidden. Nada disso e decidido aqui. * ========================================================================= */ .wcad-account-login-modal .wcad-account-login-modal__form-panel{ display: none; flex-direction: column; padding: 26px 22px 28px; background: var(--wcad-surface); } .wcad-account-login-modal .wcad-account-login-modal__form-panel[data-wcad-login-view=login]:not([hidden]){ display: flex; } .wcad-account-login-modal[data-wcad-view=lost] .wcad-account-login-modal__form-panel[data-wcad-login-view=login],.wcad-account-login-modal[data-wcad-view=register] .wcad-account-login-modal__form-panel[data-wcad-login-view=login]{ display: none; } .wcad-account-login-modal[data-wcad-view=lost] .wcad-account-login-modal__form-panel[data-wcad-login-view=lost]:not([hidden]),.wcad-account-login-modal[data-wcad-view=register] .wcad-account-login-modal__form-panel[data-wcad-login-view=register]:not([hidden]){ display: flex; } .wcad-account-login-modal .wcad-account-login-modal__form-title{ margin: 0 0 4px; font-size: 20px; line-height: 1.25; font-weight: 700; letter-spacing: -.015em; color: var(--wcad-ink); } .wcad-account-login-modal .wcad-account-login-modal__form-subtitle{ margin: 0 0 20px; font-size: 14px; line-height: 1.5; color: var(--wcad-muted); } .wcad-account-login-modal .wcad-account-login-modal__form{ display: flex; flex-direction: column; margin: 0; } /* CAIXA DO CAMPO * * POR QUE CADA CAMPO PRECISOU DE UMA CAIXA. * A etiqueta passou a ser desenhada POR CIMA do campo e a borda que acende no * foco e um pseudo-elemento; os dois precisam de um pai posicionado. Antes, * quatro dos cinco campos eram filhos diretos do

(que e flex column) e * nao havia onde ancorar nada. O campo da senha do login ja tinha caixa * propria - o JS acha o input do olho com closest(...__password-wrap) - e por * isso ela GANHOU a classe __field em vez de virar uma segunda caixa aninhada: * a arvore que o JS conhece continua igual. * * O ESPACO DE 16px MUDOU DE DONO: era margem do input, agora e da caixa. Se * tivesse ficado no input, a caixa mediria 66px e a borda ativa, que e * desenhada nos limites da caixa, sobraria 16px abaixo do campo. */ .wcad-account-login-modal .wcad-account-login-modal__field{ position: relative; display: block; margin: 0 0 16px; } /* A BORDA ATIVA. * Em repouso o campo mostra a borda de 1px do proprio input. Esta e a borda de * 2px da marca: nasce em scaleX(0) e CRESCE ate scaleX(1) no foco. E o gesto da * referencia - a borda nao troca de cor, ela cresce. Ela ocupa a mesma caixa e * o mesmo raio do input, com 2px sobre 1px, entao cobre a borda de repouso por * inteiro e nao aparece linha dupla. * pointer-events: none porque ela cobre o campo todo e engoliria o clique. * transform-origin: center e o limite desta versao. Na referencia a origem e o * X do clique, o que exige ler o evento em JS, e assets/js/account-dropdown.js * esta com outra equipe. Do centro o crescimento e simetrico, nao depende de * evento nenhum e por isso tambem sobrevive ao autopreenchimento. */ .wcad-account-login-modal .wcad-account-login-modal__field::after{ content: ''; position: absolute; inset: 0; border: 2px solid var(--wcad-amber-deep); border-radius: var(--wcad-r-field); pointer-events: none; transform: scaleX(0); transform-origin: center; transition: transform .2s var(--wcad-ease); } /* :focus-within e nao :focus porque quem recebe o foco e o input e a borda mora na caixa. */ .wcad-account-login-modal .wcad-account-login-modal__field:focus-within::after{ transform: scaleX(1); } /* A ETIQUETA FLUTUANTE. * Em repouso ela fica DENTRO do campo, no tamanho do texto (16px), no lugar * exato onde o texto vai nascer: left 11px mais 4px de padding = 15px, que e a * borda de 1px mais os 14px de padding do input. * Quando sobe, o centro dela pousa em cima da borda (top: 0 com o * translateY(-50%) que ja a centraliza) e o fundo opaco var(--wcad-surface) * corta a linha por baixo dela. Dai o z-index: 1 - sem ele a borda ativa, que * vem depois na arvore, passaria por cima do texto. * pointer-events: none para o clique atravessar e cair no input com o cursor no * ponto clicado; o continua ligando os dois no leitor de tela. */ .wcad-account-login-modal .wcad-account-login-modal__label{ position: absolute; z-index: 1; top: 50%; left: 11px; transform: translateY(-50%); max-width: calc(100% - 22px); margin: 0; padding: 0 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background: var(--wcad-surface); font-size: 16px; font-weight: 400; line-height: 1; color: var(--wcad-muted); pointer-events: none; transition: top .15s var(--wcad-ease), font-size .15s var(--wcad-ease), color .15s var(--wcad-ease); } /* No campo da senha do login a etiqueta nao pode correr por baixo do botao do olho: 52px do botao mais os 11px da esquerda. */ .wcad-account-login-modal .wcad-account-login-modal__password-wrap .wcad-account-login-modal__label{ max-width: calc(100% - 63px); } /* QUANDO A ETIQUETA SOBE - quatro regras SEPARADAS, de proposito. * Lista de seletores em CSS nao perdoa: um seletor que o navegador nao entende * derruba a REGRA INTEIRA, nao apenas aquele ramo. :autofill nao existe em * navegador antigo e :-webkit-autofill nao existe no Firefox; juntar os dois na * mesma lista faria a etiqueta parar de subir em um dos dois. Separadas, cada * uma cai sozinha. * Os dois seletores de autopreenchimento sao obrigatorios: o navegador preenche * SEM disparar evento de digitacao, e :not(:placeholder-shown) sozinho deixaria * a etiqueta em cima do texto preenchido - e o defeito classico desta animacao. * :not(:placeholder-shown) depende de o campo TER placeholder. Os cinco tem, e * o PHP poe um espaco quando o ajuste do Elementor vem vazio. Placeholder aqui * e infraestrutura, nao enfeite: apagar um quebra a etiqueta do campo. */ .wcad-account-login-modal .wcad-account-login-modal__input:not(:placeholder-shown) + .wcad-account-login-modal__label{ top: 0; font-size: 12px; color: var(--wcad-text); } .wcad-account-login-modal .wcad-account-login-modal__input:-webkit-autofill + .wcad-account-login-modal__label{ top: 0; font-size: 12px; color: var(--wcad-text); } .wcad-account-login-modal .wcad-account-login-modal__input:autofill + .wcad-account-login-modal__label{ top: 0; font-size: 12px; color: var(--wcad-text); } /* Com foco a etiqueta ESCURECE em vez de pegar a cor da marca. #B5820A sobre branco da 3.62:1 e reprova o minimo de 4.5:1 para texto pequeno - e a etiqueta subida tem 12px. A marca aparece na borda, que nao e texto e nao responde por esse minimo. Esta regra vem DEPOIS das tres acima porque tem a mesma especificidade e precisa ganhar por ordem quando o campo esta preenchido E com foco. */ .wcad-account-login-modal .wcad-account-login-modal__input:focus + .wcad-account-login-modal__label{ top: 0; font-size: 12px; color: var(--wcad-ink); } .wcad-account-login-modal .wcad-account-login-modal__input{ display: block; width: 100%; height: 50px; margin: 0; padding: 0 14px; font-size: 16px; line-height: 1.2; color: var(--wcad-ink); background: var(--wcad-surface); border: 1px solid var(--wcad-field-line); border-radius: var(--wcad-r-field); -webkit-appearance: none; appearance: none; transition: border-color .18s ease, box-shadow .18s ease; } .wcad-account-login-modal .wcad-account-login-modal__input::placeholder{ color: transparent; } /* O placeholder segue invisivel TAMBEM no foco. Antes ele reaparecia ao focar e o cliente via DOIS textos ao mesmo tempo: o rotulo flutuando na borda e o placeholder dentro do campo, dizendo quase a mesma coisa (rotulo "E-mail" contra placeholder "Nome de usuario ou e-mail *"). O dono apontou isso como redundancia. O atributo placeholder CONTINUA no HTML de proposito: e ele que faz :placeholder-shown existir, e e assim que o rotulo sabe se o campo esta vazio. Se um dia alguem quiser dica de formato no foco, primeiro mude o TEXTO do placeholder para algo que o rotulo NAO diga (ex.: nome@exemplo.com) e so entao reative isto. */ .wcad-account-login-modal .wcad-account-login-modal__input:focus::placeholder{ color: transparent; } .wcad-account-login-modal .wcad-account-login-modal__input:hover{ border-color: #52525B; } /* A cor de foco saiu daqui: quem pinta a borda no foco agora e a borda ativa do __field, que CRESCE. Se a borda de 1px do input tambem virasse ambar, as pontas ja estariam acesas antes de o crescimento chegar nelas e o gesto se perderia. Aqui fica so o halo. */ .wcad-account-login-modal .wcad-account-login-modal__input:focus{ /* CONFERENCIA INDEPENDENTE: tirar a cor ambar daqui estava certo, mas tirar a declaracao INTEIRA entregou a borda de foco ao TEMA. O reset.css do tema tem input[type="email"]:focus e input[type="password"]:focus com border-color:#333, que e especificidade (0,2,1) e ganha da regra base do plugin, que e (0,2,0) - antes quem segurava era este :focus, (0,3,0). Medido no navegador, campo de senha do login: a borda ia de #8A8A93 para #333 no instante do foco. Ou seja, a borda de repouso PISCAVA escura exatamente enquanto a borda ambar crescia por cima dela - o mesmo efeito que se quis evitar, so que em cinza. Reafirmando a cor neutra a regra volta a (0,3,0), ganha do tema, e no foco o unico que se move e a borda ativa. */ border-color: var(--wcad-field-line); /* Os 22% saem da cor da marca em vez de uma rgba amarela fixa. A primeira declaracao e o mesmo amarelo de antes e so vale em navegador sem color-mix; a segunda vence em todos os atuais. */ box-shadow: 0 0 0 4px rgba(255, 167, 26, .22); box-shadow: 0 0 0 4px color-mix(in srgb, var(--wcad-amber) 22%, transparent); } /* __password-wrap NAO declara mais position: relative. Ele passou a carregar tambem a classe __field, que ja declara position, e duas declaracoes da mesma propriedade no mesmo elemento e exatamente o tipo de sobra que a consolidacao deste arquivo removeu. A classe continua no HTML porque o JS a procura com closest() para achar o input da senha. Precisa vir DEPOIS do padding do campo acima: mesma especificidade, ganha por ordem, e e o que abre espaco para o botao do olho. */ .wcad-account-login-modal__password-wrap .wcad-account-login-modal__input{ padding-right: 52px; } .wcad-account-login-modal .wcad-account-login-modal__password-toggle{ position: absolute; right: 1px; /* Era 16px porque a caixa incluia a margem do input. A margem mudou de dono (foi para o __field) e a caixa agora mede exatamente os 50px do campo. */ bottom: 0; width: 48px; height: 50px; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: transparent; border: 0; border-radius: var(--wcad-r-field); color: var(--wcad-muted); cursor: pointer; } .wcad-account-login-modal .wcad-account-login-modal__password-toggle:hover{ color: var(--wcad-ink); } .wcad-account-login-modal .wcad-account-login-modal__password-toggle svg{ width: 20px; height: 20px; display: block; } /* Estado de repouso: mostra o olho cortado, esconde o olho aberto. Antes as duas classes eram zeradas juntas e o olho cortado era reaceso na linha seguinte; agora cada uma diz o seu valor final uma unica vez. */ .wcad-account-login-modal .wcad-account-login-modal__password-toggle .wcad-eye-on{ display: none; } .wcad-account-login-modal .wcad-account-login-modal__password-toggle .wcad-eye-off{ display: block; } .wcad-account-login-modal .wcad-account-login-modal__password-toggle.is-visible .wcad-eye-off{ display: none; } .wcad-account-login-modal .wcad-account-login-modal__password-toggle.is-visible .wcad-eye-on{ display: block; } .wcad-account-login-modal .wcad-account-login-modal__remember{ display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0 0 4px; font-size: 14px; color: var(--wcad-text); cursor: pointer; -webkit-user-select: none; user-select: none; } .wcad-account-login-modal .wcad-account-login-modal__remember input{ flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--wcad-amber-deep); cursor: pointer; } .wcad-account-login-modal .wcad-account-login-modal__message{ margin: 0; font-size: 13.5px; line-height: 1.5; } .wcad-account-login-modal .wcad-account-login-modal__message:empty{ display: none; margin: 0; padding: 0; border: 0; } .wcad-account-login-modal .wcad-account-login-modal__message:not(:empty){ margin: 0 0 16px; padding: 10px 12px; border-radius: var(--wcad-r-field); border: 1px solid #FCA5A5; background: #FEF2F2; color: var(--wcad-danger); } .wcad-account-login-modal .wcad-account-login-modal__message.is-success:not(:empty){ border-color: #A7C4A0; background: #F2F8F1; color: #14532D; } /* ESTADO DE ERRO DO CAMPO * * O plugin ja tem UM lugar que sabe que deu errado: a mensagem do formulario, * que o JS preenche com texto e marca com is-success quando deu certo. Logo, * mensagem com texto e SEM is-success significa erro. O :has() leva essa * informacao do fim do formulario de volta para os campos, sem classe nova e * sem encostar no JS, que esta com outra equipe. * A borda de erro fica acesa (scaleX 1) mesmo sem foco: erro que so aparece * quando o campo esta em foco nao e aviso, e esconderijo. * Onde :has() nao existir, nada disso se aplica e a caixa de mensagem continua * dizendo o que houve - o campo perde o reforco, nao a informacao. */ .wcad-account-login-modal .wcad-account-login-modal__form:has(.wcad-account-login-modal__message:not(:empty):not(.is-success)) .wcad-account-login-modal__input{ border-color: var(--wcad-danger); } .wcad-account-login-modal .wcad-account-login-modal__form:has(.wcad-account-login-modal__message:not(:empty):not(.is-success)) .wcad-account-login-modal__field::after{ border-color: var(--wcad-danger); transform: scaleX(1); } .wcad-account-login-modal .wcad-account-login-modal__form:has(.wcad-account-login-modal__message:not(:empty):not(.is-success)) .wcad-account-login-modal__label{ color: var(--wcad-danger); } /* ========================================================================= * e) ACOES: botao Acessar e links * ========================================================================= */ .wcad-account-login-modal .wcad-account-login-modal__actions{ display: flex; flex-direction: column; gap: 12px; margin-top: 4px; } .wcad-account-login-modal .wcad-account-login-modal__links{ display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; } /* Os tres links compartilham a mesma cor. O bloco antigo pintava o __register de var(--wcad-ink) numa regra separada, mas o grupo vinha depois com a mesma especificidade e apagava aquilo: na tela os tres sao #4B5563. Sobrou do __register so o peso da fonte, que ninguem sobrescrevia. */ .wcad-account-login-modal .wcad-account-login-modal__forgot,.wcad-account-login-modal .wcad-account-login-modal__register,.wcad-account-login-modal .wcad-account-login-modal__back{ display: inline-flex; align-items: center; min-height: 44px; padding: 0; margin: 0; background: transparent; border: 0; font-size: 14px; color: #4B5563; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: pointer; } .wcad-account-login-modal .wcad-account-login-modal__register{ font-weight: 600; } .wcad-account-login-modal .wcad-account-login-modal__forgot:hover,.wcad-account-login-modal .wcad-account-login-modal__register:hover,.wcad-account-login-modal .wcad-account-login-modal__back:hover{ color: var(--wcad-ink); text-decoration-thickness: 2px; } /* Texto quase-preto sobre o ambar: branco sobre ambar da razao 1,95 e reprova. */ .wcad-account-login-modal .wcad-account-login-modal__submit{ display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; padding: 0 24px; margin: 0; font-size: 15px; font-weight: 700; letter-spacing: .01em; /* tinta por loja: o Elementor escreve --wcad-modal-button-color quando o lojista escolhe; vazio mantem o valor de hoje. Este arquivo e o MESMO nas duas lojas. */ color: var(--wcad-modal-button-color, var(--wcad-ink)); background: var(--wcad-modal-button-bg, var(--wcad-amber)); border: 1px solid var(--wcad-modal-button-bg, var(--wcad-amber)); border-radius: var(--wcad-r-field); cursor: pointer; transition: background-color .18s ease, border-color .18s ease; } .wcad-account-login-modal .wcad-account-login-modal__submit:hover{ background: var(--wcad-amber-press); border-color: var(--wcad-amber-press); } .wcad-account-login-modal .wcad-account-login-modal__submit:active{ background: var(--wcad-amber-active); border-color: var(--wcad-amber-active); } .wcad-account-login-modal .wcad-account-login-modal__submit[disabled]{ opacity: .55; cursor: default; } .wcad-account-login-modal .wcad-account-login-modal__flow-actions{ display: flex; flex-direction: column; gap: 12px; margin-top: 4px; } /* O seletor daqui pedia a classe raiz DUAS vezes na cadeia de ancestrais (.wcad-account-login-modal .wcad-account-login-modal button). Nenhum descendente do modal carrega a classe raiz - medido na tela: 0 nos casavam, e a regra era inerte. Quem pintava o foco era o NAVEGADOR, com outline:auto na cor de destaque do sistema operacional: nesta maquina rgb(229,151,0), um ambar. Era cor de fora do site aparecendo no lugar da cor da marca. Com uma classe so a regra passa a valer. Os campos de texto ficam de FORA de proposito: eles ja tem indicador de foco proprio e desenhado - a borda de 2px que cresce (__field::after) mais o halo de 4px do :focus do input. Somar um terceiro anel neles so engrossaria. */ .wcad-account-login-modal button:focus-visible,.wcad-account-login-modal a:focus-visible,.wcad-account-login-modal label:focus-visible,.wcad-account-login-modal input[type=checkbox]:focus-visible{ outline: 2px solid var(--wcad-amber-deep); outline-offset: 2px; } .wcad-account-login-modal .wcad-account-login-modal__input:focus-visible{ outline: none; } /* ========================================================================= * f) BOTAO FECHAR * * POR QUE ELE TEM z-index. * O fechar e position:absolute e vem ANTES do __layout no HTML; a faixa do * logo e position:relative e vem DEPOIS. Entre dois elementos posicionados sem * z-index, quem vem depois no HTML pinta por cima - a faixa cobria o botao e * ele sumia do clique. O z-index tira o empate, e vale para os dois tamanhos * porque o mesmo empilhamento existe no desktop. * * POR QUE ELE E OPACO. * Translucido dependia do que estava atras, e o que esta atras muda quando o * painel escuro desliza para a direita em criar-conta. * * As medidas (44x44), o fundo claro e o vermelho valem em TODAS as larguras. * O desktop so reposiciona (secao g) e o celular so troca a paleta para o * vermelho suave sobre a faixa branca (secao h). * ========================================================================= */ .wcad-account-login-modal .wcad-account-login-modal__close{ position: absolute; top: 14px; right: 14px; z-index: 5; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; margin: 0; cursor: pointer; border-radius: 12px; background: #F4F4F5; border: 1px solid #E4E4E7; color: #B42318; transition: background-color var(--wcad-slide) var(--wcad-ease), border-color var(--wcad-slide) var(--wcad-ease), color var(--wcad-slide) var(--wcad-ease); } .wcad-account-login-modal .wcad-account-login-modal__close svg{ width: 20px; height: 20px; display: block; stroke: #B42318; } .wcad-account-login-modal .wcad-account-login-modal__close:hover{ background: #B42318; border-color: #B42318; color: #FFFFFF; } .wcad-account-login-modal .wcad-account-login-modal__close:hover svg{ stroke: #FFFFFF; } .wcad-account-login-modal .wcad-account-login-modal__close:focus-visible{ outline: 2px solid var(--wcad-amber); outline-offset: 2px; } /* ========================================================================= * g) DESKTOP (min-width: 768px) * * 768px espelha o MOBILE_QUERY (max-width:767px) do plugin. * Dois paineis lado a lado: o escuro da marca fica no fluxo, define a altura e * ocupa a metade esquerda; os TRES formularios sao absolutos na outra metade e * se revezam. Em criar-conta a marca vai para a direita e o bloco de * formularios para a esquerda. * * O DESLIZE, e por que o transform e uma soma de duas variaveis: * --wcad-base de que lado do cartao mora o bloco de formularios * (100% = direita, o normal; 0% = esquerda, em criar-conta) * --wcad-desloca a distancia deste painel ate o painel ativo, na ordem * login(0) lost(1) register(2) * Somar as duas deixa os dois movimentos coexistirem sem que uma regra anule a * outra. O __layout recorta quem sai da pista - ver a nota logo abaixo. * * POR QUE A PISTA USA overflow:clip E NAO overflow:hidden. * Isto conserta um defeito real, reproduzido e medido; nao e preferencia. * As duas palavras recortam igual, mas hidden cria um CONTEINER DE ROLAGEM e * clip nao cria. Enquanto foi hidden, os paineis inativos estacionados a * direita davam ao __layout uma area rolavel bem maior que a visivel (na vista * login: 1637px de scrollWidth contra 818px de clientWidth, porque lost para * em +100% e register em +200%). Bastava entao o navegador querer trazer para * a vista um elemento que ainda nao chegou no lugar - e e exatamente o que ele * faz quando o JS poe o foco no primeiro campo de Recuperar senha, no mesmo * instante em que aquele painel ainda esta viajando os .45s do deslize - para * ele ROLAR a pista. Medido: scrollLeft chegava a 409px. * E rolagem nao e transform: ela arrasta TODO o conteudo da caixa junto, * inclusive o painel escuro da marca, que ficava com transform ZERO e mesmo * assim aparecia 408px fora do cartao pela esquerda. O dono via uma tira * estreita de painel escuro com as palavras cortadas no meio. Como o valor da * rolagem dependia do instante em que ela assentava, a tira mudava de largura * a cada abertura - dai a queixa de que a animacao estava estranha. * Com clip nao existe conteiner de rolagem: scrollLeft nao pode sair de zero, * e nenhum foco, scrollIntoView, ancora ou leitor de tela consegue mexer na * pista. NAO troque de volta para hidden. * * O arquivo antigo tinha TRES blocos min-width:768px empilhados. Aqui eles sao * um so. Onde havia duas declaracoes para o mesmo par, ficou a que estava * valendo na tela; onde a declaracao do desktop era anulada por um bloco sem * media query mais abaixo no arquivo, ela foi removida (era codigo morto) - * ver as notas em __close e __panel-logo. * ========================================================================= */ @media (min-width: 768px) { .wcad-account-login-modal.wcad-account-login-modal{ padding: 32px 24px; } /* 900px deixava a linha de leitura longa demais para um formulario de dois campos; 820 aperta sem espremer. */ .wcad-account-login-modal .wcad-account-login-modal__card{ max-width: 820px; } .wcad-account-login-modal .wcad-account-login-modal__layout{ position: relative; display: block; overflow: clip; } .wcad-account-login-modal .wcad-account-login-modal__panel{ position: relative; z-index: 1; width: 50%; min-height: 560px; gap: 16px; padding: 48px 44px; justify-content: center; transform: translateX(0); transition: transform var(--wcad-slide) var(--wcad-ease); } /* __panel-logo NAO tem regra aqui de proposito. O bloco antigo pedia height:34px e max-width:210px, mas a regra sem media query da secao c vinha depois no arquivo e mandava height:auto/max-width:190px. Medido na tela: 190px de largura e altura automatica. As duas linhas eram codigo morto. */ /* Do bloco antigo do logo-wrap so o margin-bottom sobrevivia: o padding 14px 18px era apagado pelo padding:0 da secao c, que vinha depois. */ .wcad-account-login-modal .wcad-account-login-modal__panel-logo-wrap{ margin-bottom: 6px; } .wcad-account-login-modal .wcad-account-login-modal__title{ font-size: 27px; } /* Os tres formularios ficam montados; quem esconde e opacity/pointer-events logo abaixo, para que o deslize tenha de onde sair e para onde ir. */ .wcad-account-login-modal[data-wcad-view] .wcad-account-login-modal__form-panel[data-wcad-login-view],.wcad-account-login-modal[data-wcad-view] .wcad-account-login-modal__form-panel[hidden]{ display: flex; } /* Ancorado no topo: o formulario tem ~290px dentro de um painel de 560px e, centralizado, jogava ~135px de vazio em cima e embaixo. */ .wcad-account-login-modal .wcad-account-login-modal__form-panel{ display: flex; position: absolute; top: 0; left: 0; width: 50%; height: 100%; padding: 56px 52px; justify-content: flex-start; overflow-y: auto; opacity: 0; pointer-events: none; --wcad-base: 100%; --wcad-desloca: 0%; transform: translateX(calc(var(--wcad-base) + var(--wcad-desloca))); transition: transform var(--wcad-slide) var(--wcad-ease), opacity .3s ease; } .wcad-account-login-modal:not([data-wcad-view]) .wcad-account-login-modal__form-panel[data-wcad-login-view=login],.wcad-account-login-modal[data-wcad-view=login] .wcad-account-login-modal__form-panel[data-wcad-login-view=login],.wcad-account-login-modal[data-wcad-view=lost] .wcad-account-login-modal__form-panel[data-wcad-login-view=lost],.wcad-account-login-modal[data-wcad-view=register] .wcad-account-login-modal__form-panel[data-wcad-login-view=register]{ z-index: 2; opacity: 1; pointer-events: auto; } .wcad-account-login-modal[data-wcad-view=register] .wcad-account-login-modal__panel{ transform: translateX(100%); } /* Em criar-conta o bloco inteiro de formularios muda de lado. As duas linhas convivem: o transform daqui tem especificidade maior que o calc acima e vence (medido: os tres paineis ficam em translateX(0) nesta vista), e o --wcad-base fica valendo para quando a vista sair de register. */ .wcad-account-login-modal[data-wcad-view=register] .wcad-account-login-modal__form-panel{ transform: translateX(0); --wcad-base: 0%; } /* Distancia de cada painel ate o ativo. */ .wcad-account-login-modal[data-wcad-view=login] [data-wcad-login-view=lost]{ --wcad-desloca: 100%; } .wcad-account-login-modal[data-wcad-view=login] [data-wcad-login-view=register]{ --wcad-desloca: 200%; } .wcad-account-login-modal[data-wcad-view=lost] [data-wcad-login-view=login]{ --wcad-desloca: -100%; } .wcad-account-login-modal[data-wcad-view=lost] [data-wcad-login-view=register]{ --wcad-desloca: 100%; } .wcad-account-login-modal[data-wcad-view=register] [data-wcad-login-view=login]{ --wcad-desloca: -200%; } .wcad-account-login-modal[data-wcad-view=register] [data-wcad-login-view=lost]{ --wcad-desloca: -100%; } /* O painel ativo sempre em zero, seja qual for o estado. */ .wcad-account-login-modal[data-wcad-view=login] [data-wcad-login-view=login],.wcad-account-login-modal[data-wcad-view=lost] [data-wcad-login-view=lost],.wcad-account-login-modal[data-wcad-view=register] [data-wcad-login-view=register]{ --wcad-desloca: 0%; } .wcad-account-login-modal .wcad-account-login-modal__form-title{ font-size: 22px; } .wcad-account-login-modal .wcad-account-login-modal__form-subtitle{ margin-bottom: 22px; } /* Botao Acessar ocupando a largura e os links ABAIXO dele: column-reverse porque no HTML os links vem antes do botao. */ .wcad-account-login-modal .wcad-account-login-modal__actions{ flex-direction: column-reverse; align-items: stretch; justify-content: space-between; gap: 14px; margin-top: 8px; } .wcad-account-login-modal .wcad-account-login-modal__links{ display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 12px; } .wcad-account-login-modal .wcad-account-login-modal__forgot,.wcad-account-login-modal .wcad-account-login-modal__register,.wcad-account-login-modal .wcad-account-login-modal__back{ min-height: 32px; } .wcad-account-login-modal .wcad-account-login-modal__submit{ width: 100%; min-width: 168px; min-height: 52px; } .wcad-account-login-modal .wcad-account-login-modal__flow-actions{ flex-direction: row; align-items: center; justify-content: space-between; gap: 20px; margin-top: 8px; } /* Do bloco antigo do fechar so a posicao sobrevivia. Tamanho, fundo, borda e cor eram apagados pela regra sem media query da secao f, que vinha depois no arquivo. Medido na tela em 1280px: 44x44, fundo #F4F4F5, borda #E4E4E7 e texto #B42318 - ou seja, os valores da secao f, nao os que estavam aqui. */ .wcad-account-login-modal .wcad-account-login-modal__close{ top: 18px; right: 18px; } /* Idem no hover: fundo e borda vinham da secao f; so a cor sobrevivia aqui. */ .wcad-account-login-modal .wcad-account-login-modal__close:hover{ color: var(--wcad-ink); } /* Em criar-conta o fechar fica sobre o painel escuro, que deslizou para a direita. Estas tres tem especificidade maior e por isso vencem a secao f. */ .wcad-account-login-modal[data-wcad-view=register] .wcad-account-login-modal__close{ background: var(--wcad-chip-dark); border-color: var(--wcad-chip-dark-line); color: var(--wcad-sunken); } .wcad-account-login-modal[data-wcad-view=register] .wcad-account-login-modal__close:hover{ background: #3F3F46; border-color: #71717A; color: #FFFFFF; } .wcad-account-login-modal[data-wcad-view=register] .wcad-account-login-modal__close:focus-visible{ outline-color: var(--wcad-amber); } } /* ========================================================================= * h) CELULAR (max-width: 767px) * * Faixa branca no topo so com o logo, formulario no meio, beneficios no rodape. * * POR QUE O PAINEL VIRA display:contents. * Os beneficios moram DENTRO do painel escuro no HTML, e order() so reordena * IRMAOS. Enquanto o painel fosse uma caixa, os beneficios estavam presos * dentro dela e nao tinham como descer para depois do formulario. Com * display:contents a caixa do painel se dissolve - ela para de gerar quadro, * mas os filhos continuam existindo e sobem um nivel, virando irmaos dos * formularios dentro do __layout. So entao order:1 (faixa do logo), order:2 * (formulario) e order:3 (beneficios) funcionam. * Efeito colateral proposital: o fundo escuro do painel some junto com a caixa, * e por isso a faixa do logo assume o papel de cabecalho e pinta o proprio * fundo. Aqui ele e branco - o preto nao acrescentava nada com o logo sozinho. * * O eyebrow, o titulo e o subtitulo saem: repetiam palavra por palavra o que o * formulario logo abaixo ja dizia. * * O arquivo antigo tinha DOIS blocos max-width:767px empilhados, o segundo * desfazendo o primeiro (faixa preta virou branca, fechar branco virou * vermelho). Aqui ficou so o resultado final, que e o que esta na tela. * ========================================================================= */ @media (max-width: 767px) { .wcad-account-login-modal .wcad-account-login-modal__layout{ display: flex; flex-direction: column; } /* A caixa se dissolve; os filhos sobem um nivel e viram ordenaveis. */ .wcad-account-login-modal .wcad-account-login-modal__panel{ display: contents; } /* A faixa do logo herda o papel de cabecalho. */ .wcad-account-login-modal .wcad-account-login-modal__panel-logo-wrap{ order: 1; display: flex; align-items: center; min-height: 64px; padding: 12px 60px 12px 20px; background: var(--wcad-surface); border-bottom: 1px solid var(--wcad-line); } /* Fundo claro: a logo volta a ser ela mesma, sem o filtro que a branqueia no painel escuro do desktop. Logo branca em fundo branco sumiria. */ .wcad-account-login-modal .wcad-account-login-modal__panel-logo{ filter: none; max-width: 150px; max-height: 36px; } /* Redundancia: o formulario logo abaixo ja diz Entrar e Acesse sua conta com seguranca. Estes tres repetiam a mesma coisa. */ .wcad-account-login-modal .wcad-account-login-modal__eyebrow,.wcad-account-login-modal .wcad-account-login-modal__title,.wcad-account-login-modal .wcad-account-login-modal__subtitle{ display: none; } .wcad-account-login-modal .wcad-account-login-modal__form-panel{ order: 2; } /* Os beneficios descem para o rodape. Como sairam do fundo escuro, a cor do texto muda junto: o cinza claro sobre branco reprovaria contraste. */ .wcad-account-login-modal .wcad-account-login-modal__benefits{ order: 3; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 16px 20px 20px; border-top: 1px solid var(--wcad-line); background: var(--e-global-color-accent, #F7F7F8); } .wcad-account-login-modal .wcad-account-login-modal__benefit{ margin: 0; color: var(--wcad-text); font-size: 13px; line-height: 1.45; } .wcad-account-login-modal .wcad-account-login-modal__benefit strong{ color: var(--wcad-ink); } /* Sobre a faixa branca o fechar e vermelho suave, com alvo de toque de 44px. O z-index que o mantem acima da faixa esta na secao f e vale aqui tambem. */ .wcad-account-login-modal .wcad-account-login-modal__close{ top: 10px; right: 12px; width: 44px; height: 44px; background: #FBE9E7; border: 1px solid #F3D3CF; color: #B42318; } .wcad-account-login-modal .wcad-account-login-modal__close svg{ stroke: #B42318; } } /* ========================================================================= * i) PREFERS-REDUCED-MOTION * * Precisa ficar por ULTIMO: as duas regras abaixo tem a mesma especificidade * do transition declarado na secao g, entao so ganham por ordem. Quem pediu * menos movimento no sistema recebe a troca instantanea. * ========================================================================= */ @media (prefers-reduced-motion: reduce) { /* Os tres ultimos ramos estavam escritos com ESPACO entre as duas classes raiz, o que os transformava em descendente: nao existe elemento com a classe raiz dentro da raiz, entao eles casavam com ZERO elementos e a regra so alcancava a propria raiz do modal. Colados, viram o degrau de especificidade que o resto do arquivo usa, e ai sim a regra cobre input, etiqueta, botao e os pseudo-elementos - inclusive a borda ativa que este trabalho criou. */ .wcad-account-login-modal.wcad-account-login-modal,.wcad-account-login-modal.wcad-account-login-modal *,.wcad-account-login-modal.wcad-account-login-modal *::before,.wcad-account-login-modal.wcad-account-login-modal *::after{ transition-duration: .01ms; animation-duration: .01ms; } .wcad-account-login-modal .wcad-account-login-modal__form-panel,.wcad-account-login-modal .wcad-account-login-modal__panel{ transition-duration: .01ms; } }