/* ===================================================================== * marketplace/assets/entrada.css — TELA DE ENTRADA da vitrine (06/09/2026) * --------------------------------------------------------------------- * Pedido do dono: "os modais de login e cadastro estão horríveis de feio, * quero minimalista acompanhando o restante da identidade visual". * * O partial é o mesmo do /go (client/partials/auth-screen.php) e os IDs * também — auth-lite.js e forgot-password.js não mudam nada. Só a roupa * muda, e só aqui: o /go continua com auth.css + auth-screen.css; a * vitrine carrega ESTE arquivo no lugar dos dois. É standalone: traz a * base do modal (abrir/fechar, views, wizard, lista de cidade) e não * herda regra nenhuma — por isso não precisa de !important. * * O desenho é o das outras telas da vitrine: cabeçalho fino com voltar e * logo (.tela-hdr), campos com borda (.fld .in), botão amarelo redondo * (.btn-block), secundário de contorno (.btn-outline), títulos de aba com * um traço amarelo embaixo. Sem hero amarelo, sem gradiente, sem sombra, * sem caixinha de segmented. Tokens --rd-* do ridee-ds.css, com fallback. * ===================================================================== */ #loginModalClient { --e-paper: var(--rd-paper, #F6F7F9); --e-surface: var(--rd-surface, #FFFFFF); --e-ink: var(--rd-ink, #0B0F19); --e-ink-2: var(--rd-ink-2, rgba(11, 15, 25, .58)); /* mesmo motivo do vitrine.css: o tom de apoio da marca da' 2.5:1 sobre branco. Aqui ele so' pinta enfeite; texto de apoio usa --e-ink-2. */ --e-ink-3: rgba(11, 15, 25, .38); --e-line: var(--rd-line, rgba(11, 15, 25, .08)); /* borda de campo e de botão de contorno: um tom acima da linha divisória, para o campo existir sobre o branco sem precisar de fundo cinza */ --e-borda: rgba(11, 15, 25, .16); --e-brand: var(--rd-brand, #F9D515); --e-danger: var(--rd-danger, #E5484D); } /* ── 1. A TELA: fixa, inteira, entra pela direita como as folhas ─────── */ #loginModalClient { position: fixed; inset: 0; z-index: 99999; display: none; /* auth-lite.js liga display:flex + .is-open */ align-items: stretch; justify-content: center; margin: 0; padding: 0; background: var(--e-surface); opacity: 0; pointer-events: none; transition: opacity .18s ease; } #loginModalClient.is-open, #loginModalClient[style*="display: flex"], #loginModalClient[style*="display:flex"] { opacity: 1; pointer-events: auto; } #loginModalClient.is-closing { opacity: 0 !important; pointer-events: none !important; transition: opacity .22s ease; } body.modal-open { overflow: hidden; } #loginModalClient .modal-auth-v2 { width: 100%; max-width: 480px; height: 100%; margin: 0 auto; display: flex; flex-direction: column; background: var(--e-surface); transform: translateX(100%); transition: transform .26s cubic-bezier(.22, 1, .36, 1); will-change: transform; overflow: hidden; } #loginModalClient.is-open .modal-auth-v2, #loginModalClient[style*="display: flex"] .modal-auth-v2, #loginModalClient[style*="display:flex"] .modal-auth-v2 { transform: none; } #loginModalClient.is-closing .modal-auth-v2 { transform: translateX(100%) !important; transition: transform .22s cubic-bezier(.4, 0, .6, 1); } /* tela larga: a coluna de 480px da vitrine, sobre o papel, com as laterais marcadas */ @media (min-width: 560px) { #loginModalClient { background: var(--e-paper); } #loginModalClient .modal-auth-v2 { border-left: 1px solid var(--e-line); border-right: 1px solid var(--e-line); } } /* ── 2. CABEÇALHO fino: fechar à esquerda, logo à direita (= .tela-hdr) ── */ #loginModalClient .authHero { position: relative; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: calc(22px + env(safe-area-inset-top, 0px)) 56px 20px; background: var(--e-surface); border-bottom: 1px solid var(--e-line); text-align: center; } #loginModalClient .authHero .iconBtn { position: absolute; left: 12px; top: calc(14px + env(safe-area-inset-top, 0px)); width: 36px; height: 36px; padding: 0; border: 0; border-radius: 11px; background: var(--e-paper); color: var(--e-ink); display: grid; place-items: center; cursor: pointer; } #loginModalClient .authHero .iconBtn svg { width: 20px; height: 20px; } /* A MARCA no centro, em tamanho de gente. Antes era um selo de 18px no canto e a tela nao parecia da Ridee — foi o que o dono apontou. O arquivo e' o SVG (4 KB), nitido em qualquer tela. */ #loginModalClient .authLogo { margin: 0; padding: 0; display: block; } #loginModalClient .authLogo img { display: block; height: 30px; width: auto; max-width: 160px; } #loginModalClient .authHero-sub { display: block; font-size: 12.5px; font-weight: 600; color: var(--e-ink-2); } /* teclado aberto no celular: a marca encolhe para o campo nao sumir */ body.kb-open #loginModalClient .authHero { padding-top: calc(12px + env(safe-area-inset-top, 0px)); padding-bottom: 10px; gap: 4px; } body.kb-open #loginModalClient .authLogo img { height: 22px; } body.kb-open #loginModalClient .authHero-sub { display: none; } /* nas telas de "esqueci a senha" o voltar da própria tela já leva ao login; dois botões de sair no mesmo canto confundem */ #loginModalClient.is-forgot .authHero .iconBtn { display: none; } /* ── 3. ÁREA que rola ────────────────────────────────────────────────── */ #loginModalClient .authSheet { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 0 0 calc(24px + env(safe-area-inset-bottom, 0px)); } /* ── 4. "Entrar / Criar conta" como títulos com traço, não como pílula ── */ #loginModalClient .authHeader { padding: 18px 16px 0; } #loginModalClient .authTabs { display: flex; gap: 24px; border-bottom: 1px solid var(--e-line); } #loginModalClient .authTab { position: relative; min-height: 44px; padding: 6px 0 12px; border: 0; background: transparent; cursor: pointer; font-family: inherit; font-size: 17px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; color: var(--e-ink-2); } #loginModalClient .authTab.on { color: var(--e-ink); } #loginModalClient .authTab.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--e-brand); } #loginModalClient.is-forgot .authHeader { display: none; } /* ── 5. CAMPOS (= .fld / .in da vitrine) ─────────────────────────────── */ #loginModalClient .authView { opacity: 0; transform: translateY(6px); transition: opacity .18s ease, transform .22s ease; } #loginModalClient.is-open .authView { opacity: 1; transform: none; } #loginModalClient .authPad { padding: 6px 16px 0; } #loginModalClient .authField { margin-top: 14px; } #loginModalClient .authLabel { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 800; color: var(--e-ink-2); } #loginModalClient .authInput { display: block; width: 100%; height: 48px; padding: 0 15px; border: 1px solid var(--e-borda); border-radius: 13px; background: var(--e-surface); color: var(--e-ink); font-family: inherit; font-size: 15px; font-weight: 600; outline: none; -webkit-appearance: none; appearance: none; } /* medido em 06/09: com --e-ink-3 o placeholder saia em 2.5:1, ilegivel ao sol e reprovado pela regra de contraste. --e-ink-2 da' 4.6:1 e continua discreto. */ #loginModalClient .authInput::placeholder { color: var(--e-ink-2); font-weight: 500; } #loginModalClient .authInput:focus { outline: 2px solid var(--e-brand); outline-offset: 0; } #loginModalClient .authInput:disabled { background: var(--e-paper); color: var(--e-ink-2); } #loginModalClient .authInputWrap { position: relative; } #loginModalClient .authInputWrap .authInput { padding-right: 52px; } #loginModalClient .authEye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 40px; height: 36px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--e-ink-2); display: grid; place-items: center; cursor: pointer; } #loginModalClient .authFieldErr { min-height: 0; margin-top: 6px; font-size: 12.5px; font-weight: 700; color: var(--e-danger); } #loginModalClient .authFieldErr:empty { display: none; } /* ── 6. Lembrar / esqueci ────────────────────────────────────────────── */ #loginModalClient .authRowV2 { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0 12px; } #loginModalClient .authCheck { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 13px; color: var(--e-ink-2); cursor: pointer; user-select: none; } #loginModalClient .authCheck input { width: 18px; height: 18px; margin: 0; accent-color: var(--e-brand); } #loginModalClient .authLink { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; border: 0; background: none; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 800; color: var(--e-ink); text-decoration: underline; text-underline-offset: 3px; } /* ── 7. BOTÕES (= .btn-block / .btn-outline) ─────────────────────────── */ /* ALTURA QUE CRESCE, PADDING DE VERDADE. Com `height: 50px` e o padding padrao do navegador (1px 6px), rotulo comprido — "Criar conta e continuar", "Cadastrar endereco depois" — encostava na borda e, em tela estreita, era cortado. min-height + padding proprio resolve os dois: o botao cresce em vez de espremer o texto. */ #loginModalClient .authBtnPrimary { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 50px; margin-top: 4px; padding: 13px 20px; border: 0; border-radius: 999px; background: var(--e-brand); color: var(--e-ink); font-family: inherit; font-size: 15px; font-weight: 900; line-height: 1.25; text-align: center; cursor: pointer; } /* no cadastro o botao vem colado no ultimo campo; no login ja' ha' a linha do "lembrar senha" antes dele */ #loginModalClient .authField + .authBtnPrimary { margin-top: 18px; } #loginModalClient .authBtnPrimary:active { filter: brightness(.96); } #loginModalClient .authBtnPrimary:disabled, #loginModalClient .authBtnPrimary.is-busy { opacity: .7; cursor: progress; } #loginModalClient .authBtnPrimary.is-busy::after { content: ''; display: inline-block; vertical-align: -2px; margin-left: 8px; width: 14px; height: 14px; border-radius: 50%; border: 2.5px solid rgba(11, 15, 25, .25); border-top-color: var(--e-ink); animation: entradaGira .7s linear infinite; } @keyframes entradaGira { to { transform: rotate(360deg); } } #loginModalClient .authBtnGhost { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; padding: 12px 18px; border: 1.5px solid var(--e-borda); border-radius: 999px; background: transparent; color: var(--e-ink); font-family: inherit; font-size: 14px; font-weight: 800; line-height: 1.25; cursor: pointer; } /* ── 8. Social como secundário de contorno, um por linha ─────────────── */ #loginModalClient .authDivider { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin: 18px 0 4px; font-size: 12px; font-weight: 700; color: var(--e-ink-2); } #loginModalClient .authDivider::before, #loginModalClient .authDivider::after { content: ''; height: 1px; background: var(--e-line); } #loginModalClient .d-flex { display: flex; flex-direction: column; } #loginModalClient .authBtnSocial { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 48px; margin-top: 10px; padding: 12px 18px; border: 1.5px solid var(--e-borda); border-radius: 999px; background: transparent; color: var(--e-ink); font-family: inherit; font-size: 14px; font-weight: 800; line-height: 1.25; cursor: pointer; } #loginModalClient .authBtnSocial:active { background: var(--e-paper); } #loginModalClient .authBtnSocial svg { width: 18px; height: 18px; flex: 0 0 auto; } /* ── 9. Rodapés de texto ─────────────────────────────────────────────── */ #loginModalClient .authBottomHint { margin-top: 18px; font-size: 13.5px; line-height: 1.5; color: var(--e-ink-2); text-align: center; } /* "Ainda nao tem uma conta? Criar conta" no fim do login (e o inverso no cadastro) e' o MESMO caminho da aba que esta' no alto da tela. Duas vezes a mesma acao e' o que o dono apontou nos cartoes de loja; aqui vale igual. Fica so' o aviso de privacidade, que nao e' repeticao de nada. Regra da vitrine apenas — o partial e o /go seguem intactos. */ #loginModalClient #viewLogin .authBottomHint, #loginModalClient #viewRegisterLite .authBottomHint:not(.authConsentHint) { display: none; } #loginModalClient .authConsentHint { margin-top: 14px; font-size: 12px; } #loginModalClient .authLinkInline { display: inline; padding: 14px 4px; margin: -14px -4px; /* 44px de alvo sem mexer no texto */ border: 0; background: none; cursor: pointer; font-family: inherit; font-size: inherit; font-weight: 800; color: var(--e-ink); text-decoration: underline; text-underline-offset: 3px; } /* ── 10. "Esqueci a senha" e o wizard antigo (só social-completion) ──── */ #loginModalClient .authBack { position: relative; width: 36px; height: 36px; margin: 14px 0 12px; padding: 0; border: 0; border-radius: 11px; background: var(--e-paper); color: var(--e-ink); display: grid; place-items: center; cursor: pointer; } #loginModalClient .authScreenTitle { font-size: 21px; font-weight: 800; letter-spacing: -.01em; color: var(--e-ink); } #loginModalClient .authScreenSub { margin-top: 6px; font-size: 13.5px; line-height: 1.45; color: var(--e-ink-2); } #loginModalClient .wizardTop { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0; } #loginModalClient .wizardTitle { font-size: 17px; font-weight: 800; color: var(--e-ink); } #loginModalClient .wizardSteps { display: flex; gap: 8px; align-items: center; } #loginModalClient .step { width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: var(--e-ink-2); border: 1px solid var(--e-borda); background: transparent; } #loginModalClient .step.on { background: var(--e-brand); border-color: var(--e-brand); color: var(--e-ink); } #loginModalClient .grid1 { display: grid; grid-template-columns: 1fr; gap: 12px; } #loginModalClient .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } @media (max-width: 420px) { #loginModalClient .grid2 { grid-template-columns: 1fr; } } #loginModalClient .wizardFooter { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; } #loginModalClient .miniHint { margin-top: 6px; font-size: 11.5px; color: var(--e-ink-2); } #loginModalClient .selectSearch { position: relative; } #loginModalClient .selectList { position: absolute; left: 0; right: 0; top: 52px; z-index: 10; max-height: 240px; overflow-y: auto; border: 1px solid var(--e-borda); border-radius: 13px; background: var(--e-surface); box-shadow: 0 12px 32px rgba(11, 15, 25, .12); } #loginModalClient .selectItem { display: block; width: 100%; padding: 12px 14px; text-align: left; border: 0; background: transparent; cursor: pointer; font-family: inherit; font-size: 13.5px; font-weight: 700; color: var(--e-ink); } #loginModalClient .selectItem:hover { background: var(--e-paper); } #loginModalClient .authConsent { display: flex; align-items: flex-start; gap: 9px; margin: 10px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--e-ink-2); cursor: pointer; } #loginModalClient .authConsent input[type="checkbox"] { width: 18px; height: 18px; margin-top: 1px; flex: 0 0 auto; accent-color: var(--e-brand); } #loginModalClient .authConsent a { color: var(--e-ink); font-weight: 800; text-decoration: underline; text-underline-offset: 2px; } /* ── 11. ALVO DE TOQUE 44px nos botões pequenos, FOCO visível no teclado ── */ #loginModalClient .authHero .iconBtn::after, #loginModalClient .authEye::after, #loginModalClient .authBack::after { content: ''; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } #loginModalClient button:focus-visible, #loginModalClient a:focus-visible { outline: 2px solid var(--e-brand); outline-offset: 2px; } #loginModalClient .authBtnPrimary:focus-visible, #loginModalClient .step:focus-visible { outline-color: var(--e-ink); } @media (prefers-reduced-motion: reduce) { #loginModalClient, #loginModalClient .modal-auth-v2, #loginModalClient .authView, #loginModalClient .authBtnPrimary.is-busy::after { transition: none; animation: none; } } /* ------------------------------------------------------------------------- CADASTRO EM PASSOS (marketplace/assets/entrada.js) — 06/09/2026 Quatro telas curtas no lugar de um formulario longo. A barra em cima diz onde a pessoa esta' e quanto falta; sem ela, "Continuar" parece nao ter fim. ------------------------------------------------------------------------- */ #loginModalClient .cad-topo { display: flex; align-items: center; gap: 10px; min-height: 36px; margin-top: 12px; } #loginModalClient .cad-voltar { position: relative; width: 36px; height: 36px; margin-left: -6px; padding: 0; border: 0; border-radius: 11px; background: var(--e-paper); color: var(--e-ink); display: grid; place-items: center; cursor: pointer; } #loginModalClient .cad-voltar::after { content: ''; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } #loginModalClient .cad-conta { font-size: 12px; font-weight: 800; color: var(--e-ink-2); } #loginModalClient .cad-barra { display: flex; gap: 5px; margin: 10px 0 18px; } #loginModalClient .cad-barra span { flex: 1 1 0; height: 4px; border-radius: 999px; background: var(--e-line); transition: background .18s ease; } #loginModalClient .cad-barra span.on { background: var(--e-brand); } #loginModalClient .cad-tit { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.015em; line-height: 1.2; color: var(--e-ink); } #loginModalClient .cad-sub { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--e-ink-2); } #loginModalClient .cad-sub b { color: var(--e-ink); font-weight: 800; } #loginModalClient .cad-tela .authBtnSocial:first-of-type { margin-top: 18px; } #loginModalClient .cad-tela .authDivider { margin: 18px 0 2px; } #loginModalClient .cad-tela .authBtnPrimary { margin-top: 20px; } /* "(opcional)" saia em 2.5:1 com --e-ink-3 (medido) — texto pequeno precisa de 4.5:1, e este e' exatamente o aviso que dispensa preencher o campo. */ #loginModalClient .cad-opc { font-size: 11.5px; font-weight: 700; color: var(--e-ink-2); } #loginModalClient .cad-pular { display: block; width: 100%; min-height: 44px; margin-top: 6px; padding: 12px 16px; border: 0; background: none; cursor: pointer; font-family: inherit; font-size: 13.5px; font-weight: 800; color: var(--e-ink-2); text-decoration: underline; text-underline-offset: 3px; } /* conta criada: as abas Entrar/Criar conta nao levam mais a lugar nenhum */ #loginModalClient.is-criada .authHeader { display: none; } /* O passo do endereco e' o formulario da vitrine (.fld/.in/.btn-block), que nasce com margem lateral de 16px para a tela cheia. Aqui ele ja' esta' dentro do .authPad, que tem os mesmos 16px — sem zerar, o campo entrava 32px para dentro. */ #loginModalClient .cad-end { margin-top: 16px; } /* O que precisa sumir aqui e' a MARGEM lateral de 16px (a tela cheia ja' a tem no .authPad), nunca o padding do botao. A primeira versao desta regra zerou os dois e deixou "Estou no local agora" com o texto na borda — exatamente o alerta do dono sobre botao sem padding. */ #loginModalClient .cad-end .fld, #loginModalClient .cad-end .fld2, #loginModalClient .cad-end .btn-block, #loginModalClient .cad-end .btn-outline, #loginModalClient .cad-end .na-mapa, #loginModalClient .cad-end .banner-warn, #loginModalClient .cad-end .refund-card { margin-left: 0 !important; margin-right: 0 !important; } /* so' o campo do "ponto de referencia" traz padding lateral em style inline */ #loginModalClient .cad-end .fld { padding-left: 0 !important; padding-right: 0 !important; } /* .btn-block e .btn-outline aqui sao