/* ========================================================================== Minha Conta — modal de login/cadastro Mobile = folha em tela cheia (sobe de baixo) · Desktop = card centralizado. ========================================================================== */ /* Banner de cookies (z-index 99990, do loja-core) ficava POR CIMA de qualquer painel: cobria o rodapé do modal de conta ("Já tem conta? Entrar" + Google) e também drawer/sidecart/quick-add. Enquanto um painel está aberto (o tema marca `drawer-travado` no body em todos eles), o banner sai de cena e volta ao fechar — nada se perde, ele é persistente até a pessoa responder. ⚠️ Candidato a ir pra base junto com o loja-core. */ body.drawer-travado .loja-consent { opacity: 0 !important; visibility: hidden; pointer-events: none; } .conta-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, .5); opacity: 0; transition: opacity var(--t); } .conta-overlay.is-aberto { opacity: 1; } .conta-modal { position: fixed; z-index: 1001; background: var(--marca-clara); display: flex; flex-direction: column; color: var(--cor-texto); } .conta-modal[hidden] { display: none; } /* ---- MOBILE: tela cheia, sobe de baixo ---- */ .conta-modal { left: 0; right: 0; bottom: 0; top: 0; transform: translateY(100%); transition: transform var(--dur-media) var(--ease-assenta); /* ⚠️ quem rola é o CORPO, não o modal: com o scroll aqui, o botão de fechar (absolute) subia junto com o conteúdo e saía da tela. Aqui hidden também garante que o conteúdo respeite os cantos arredondados no desktop. */ overflow: hidden; } .conta-modal.is-aberto { transform: translateY(0); } .conta-modal__fechar { position: absolute; top: var(--sp-3); right: var(--sp-3); width: 42px; height: 42px; display: grid; place-items: center; border: 0; background: none; color: var(--cinza-500); cursor: pointer; border-radius: var(--raio-sm); transition: background var(--t-rapida), color var(--t-rapida); } .conta-modal__fechar:hover { background: var(--cinza-100); color: var(--marca-secundaria); } .conta-modal__fechar svg { width: 22px; height: 22px; } .conta-modal__corpo { width: 100%; max-width: 380px; margin: 0 auto; padding: clamp(3.5rem, 9vw, 4rem) var(--gutter) var(--sp-8); display: flex; flex-direction: column; flex: 1; overflow-y: auto; /* `safe center`: centraliza quando cabe e volta ao topo quando NÃO cabe — `center` puro cortaria o início do formulário em tela baixa. */ justify-content: center; justify-content: safe center; /* Se precisar rolar (tela baixa), barra fina na cor da borda, sem trilho — a padrão do navegador, grossa e cinza, cortava o card. Mesma do formulário do controlado. */ overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--cinza-300) transparent; } .conta-modal__corpo::-webkit-scrollbar { width: 10px; } .conta-modal__corpo::-webkit-scrollbar-track { background: transparent; } .conta-modal__corpo::-webkit-scrollbar-thumb { background: var(--cinza-300); border-radius: 10px; border: 3px solid var(--marca-clara); } /* Troca login <-> cadastro: só crossfade. No desktop o conta.js iguala a altura das duas views (min-height = a mais alta) → a caixa NÃO muda de tamanho na troca. Animar a altura foi tentado antes e ficou estranho: o card redimensionando puxava o olho mais que o conteúdo trocando. Caixa estável > caixa animada. */ .conta-view { transition: opacity var(--t-rapida), transform var(--t-rapida); } .conta-view.is-trocando { opacity: 0; transform: translateY(8px); } .conta-titulo { font-size: clamp(1.375rem, 4vw, 1.625rem); text-transform: uppercase; line-height: 1.1; letter-spacing: -0.01em; } .conta-sub { margin-top: 4px; color: var(--cor-texto-suave); font-size: var(--fs-sm); line-height: 1.45; } .conta-form { margin-top: var(--sp-4); display: flex; flex-direction: column; gap: 14px; } .conta-campo { display: flex; flex-direction: column; gap: 6px; } /* :not(.conta-senha) — o wrapper do olho também é filho direto; sem a exceção ele ficava bold e o input herdava o peso via `font: inherit` (senha saía mais gorda que o e-mail). Só o RÓTULO deve ser bold. */ /* Rótulo na gramática da loja: CAPS pequenas com tracking (mesma régua da esteira de benefícios, dos grupos do mega e do rodapé) — em bold caixa normal a tela lia como formulário genérico. */ .conta-campo > span:not(.conta-senha) { font-size: var(--fs-xs); font-weight: var(--peso-semibold); text-transform: uppercase; letter-spacing: .08em; } .conta-campo input { height: 46px; padding: 0 var(--sp-4); /* casa com a altura do .conta-olho */ border: 1px solid var(--cinza-300); border-radius: var(--raio); font: inherit; font-size: var(--fs-base); background: var(--marca-clara); color: var(--cor-texto); transition: border-color var(--t-rapida), box-shadow var(--t-rapida); } /* Foco: borda na PRIMÁRIA + halo SÁLVIA. Sobre fundo claro a loja acentua com o verde-escuro (o sálvia é o acento das bandas escuras) — então o sálvia entra como halo, que dá cor de marca sem perder contraste da borda. O anel neutro preto de antes era padrão de navegador, não da loja. */ .conta-campo input:focus { outline: none; border-color: var(--marca-primaria); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca-acento) 38%, transparent); } .conta-dica { color: var(--cinza-500); font-size: var(--fs-xs); } /* Campo de senha com botão de mostrar/ocultar (olho) */ .conta-senha { position: relative; display: block; } .conta-senha input { width: 100%; padding-right: 46px; } /* Edge desenha o próprio botão de revelar senha (::-ms-reveal), duplicando o nosso olho. */ .conta-senha input::-ms-reveal, .conta-senha input::-ms-clear { display: none; } .conta-olho { position: absolute; top: 0; right: 4px; width: 40px; height: 46px; display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer; color: var(--cinza-500); border-radius: var(--raio-sm); transition: color var(--t-rapida); } .conta-olho:hover { color: var(--marca-secundaria); } .conta-olho:focus-visible { outline: 2px solid var(--marca-secundaria); outline-offset: 2px; } .conta-olho svg { width: 20px; height: 20px; } .conta-olho__off { display: none; } .conta-olho.is-visivel .conta-olho__on { display: none; } .conta-olho.is-visivel .conta-olho__off { display: block; } .conta-linha { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; } .conta-check { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--cor-texto-suave); cursor: pointer; } .conta-check input { width: 16px; height: 16px; accent-color: var(--marca-secundaria); } .conta-esqueci { font-size: var(--fs-sm); font-weight: var(--peso-bold); text-decoration: underline; text-underline-offset: 2px; } .conta-esqueci:hover { color: var(--marca-secundaria); } .conta-btn { height: 48px; margin-top: var(--sp-2); border: 0; border-radius: var(--raio); cursor: pointer; background: var(--marca-primaria); color: var(--marca-sobre-primaria); font: inherit; font-weight: var(--peso-heavy); font-size: var(--fs-base); text-transform: uppercase; letter-spacing: .02em; transition: background var(--t-rapida), opacity var(--t-rapida); } .conta-btn:hover { background: var(--marca-primaria-escura); } .conta-btn.is-carregando { opacity: .7; cursor: progress; } .conta-erro { padding: var(--sp-3) var(--sp-4); border-radius: var(--raio); background: rgba(220, 38, 38, .08); border: 1px solid rgba(220, 38, 38, .25); color: #b91c1c; font-size: var(--fs-sm); font-weight: var(--peso-medio); } .conta-erro[hidden] { display: none; } /* divisória "ou" + botão social (Google) */ .conta-sep { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-4) 0 var(--sp-3); color: var(--cinza-400); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; } .conta-sep::before, .conta-sep::after { content: ""; flex: 1; height: 1px; background: var(--cor-borda); } .conta-social { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 46px; padding: 0 var(--sp-4); border: 1px solid var(--cinza-300); border-radius: var(--raio); background: var(--marca-clara); color: var(--cor-texto); cursor: pointer; font: inherit; font-weight: var(--peso-bold); font-size: var(--fs-base); white-space: nowrap; transition: background var(--t-rapida), border-color var(--t-rapida); } .conta-social:hover { background: var(--cinza-50); border-color: var(--cinza-400); } .conta-social__g { width: 20px; height: 20px; flex: none; } /* placeholder (sem plugin ativo ainda): parece pronto, mas avisa que é "em breve" */ .conta-social[data-google-soon] { cursor: default; } .conta-aviso { margin-top: var(--sp-2); text-align: center; font-size: var(--fs-xs); color: var(--cinza-500); } .conta-aviso[hidden] { display: none; } .conta-alt { margin-top: var(--sp-4); text-align: center; font-size: var(--fs-sm); color: var(--cor-texto-suave); } .conta-link { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; font-weight: var(--peso-heavy); color: var(--marca-secundaria); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--marca-primaria); } /* mantém o sublinhado AMARELO no hover (não escurece) */ .conta-link:hover { text-decoration-color: var(--marca-primaria); } /* ---- DESKTOP: card centralizado ---- */ @media (min-width: 600px) { .conta-modal { inset: auto; top: 50%; left: 50%; width: min(480px, calc(100vw - 2rem)); /* 92vh sobrava margem demais em notebook (viewport ~630 → teto 577 < conteúdo) e o card abria rolando. 24px de folga já separa das bordas. */ max-height: min(calc(100vh - 24px), 720px); border-radius: var(--raio); box-shadow: 0 30px 70px rgba(0, 0, 0, .28); transform: translate(-50%, -50%) scale(.96); opacity: 0; transition: transform var(--t), opacity var(--t-rapida); } .conta-modal.is-aberto { transform: translate(-50%, -50%) scale(1); opacity: 1; } /* max-width: none → o conteúdo acompanha a largura do card (o cap de 380px é do mobile). Laterais em --sp-7 p/ o form respirar mais na largura nova. */ /* Respiro menor no desktop: com sp-8/sp-7 a view de CADASTRO (a mais alta) passava do teto em notebook e o card abria já com barra de rolagem. */ .conta-modal__corpo { padding: var(--sp-6) var(--sp-7); justify-content: flex-start; max-width: none; } } @media (prefers-reduced-motion: reduce) { .conta-overlay, .conta-modal { transition: opacity .12s ease; } .conta-modal { transform: none !important; } .conta-view { transition: none; } .conta-view.is-trocando { opacity: 1; transform: none; } } /* Opt-in da Lista Baly no cadastro (modal). Caixa nativa, discreta: aqui o foco é criar a conta — o consentimento é secundário e não deve competir com o CTA. */ .conta-optin { display: flex; align-items: flex-start; gap: .55rem; margin: -.2rem 0 1rem; font-size: .8125rem; line-height: 1.45; color: var(--cor-texto-suave, #666); cursor: pointer; } .conta-optin input { flex: none; width: 16px; height: 16px; margin-top: 1px; accent-color: var(--marca-primaria); } /* ---- Esqueci a senha: agora é