/* ============================================================================================= edubase.um2mkt — TELA DE CADASTRO (onboarding em duas colunas) Enfileirado por templates/yootheme/html/com_easysocial/registration/steps/default.php. Vive em media/ => sobrevive a um update do EasySocial. ESCOPO. Duas ancoras, de proposito diferentes: - `body.edubase-cadastro` -> suprime o cromo do site (cabecalho, rodape, #tm-main). A classe e posta no servidor pelo plg_system_edubasecadastro (onAfterRender), NAO por :has() — o :has() herda a especificidade do argumento mais especifico e brigaria com o UIkit, e a classe no ainda evita depender de `.view-registration`, que a tela de escolha de perfil tambem usaria se um dia um 2o perfil virar registravel. - `#es .esreg-split` -> tudo o que e desta tela por dentro. ⚠️ Prefixo `#es` obrigatorio no que disputa com elemento cru: o tema estiliza `#es a`, `#es img`, `#es label`, `#es i` em (1,0,1), que vence seletor de classe sozinho (0,1,0). NAO ha piscada: a folha entra no (o addStyleSheet funciona nesta tela) e e aplicada antes da pintura. ============================================================================================= */ /* --------------------------------------------------------------------------------------------- 1. Bandeiras ⚠️ Windows/Chrome nao tem glifo de bandeira e mostraria o codigo ("BR"). A fonte Twemoji ja existe no site, mas o @font-face dela (assets/css/style.css do ConverseKit) esta escopado em #ck e nao vale fora do chat — por isso e REDECLARADO aqui, apontando para o mesmo woff2. O unicode-range limita a fonte as bandeiras: nenhum outro glifo do site e afetado. --------------------------------------------------------------------------------------------- */ @font-face { font-family: 'Twemoji Country Flags'; src: url('/plugins/system/conversekit/assets/fonts/TwemojiCountryFlags.woff2') format('woff2'); unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F; font-display: swap; } /* --------------------------------------------------------------------------------------------- 2. Cromo do site O cabecalho e o rodape do YOOtheme vem de modulos VIRTUAIS injetados em onAfterCleanModuleList a partir da config do template — nao ha linha em #__modules para desatribuir, entao o unico caminho e CSS. (Para um visitante deslogado nao ha nenhum modulo Joomla renderizando nesta pagina: todos os publicados sao access=Registered.) --------------------------------------------------------------------------------------------- */ body.edubase-cadastro .tm-header, body.edubase-cadastro .tm-header-mobile, body.edubase-cadastro .tm-toolbar, body.edubase-cadastro > .tm-page > footer, body.edubase-cadastro .uk-sticky-placeholder { display: none; } /* O #tm-main tem uk-height-viewport="expand: true" (config "Secao Principal > Altura = Viewport"), que escreve min-height INLINE por JS — dai o !important, mesmo motivo do override de login. */ body.edubase-cadastro #tm-main { min-height: 0 !important; padding: 0 !important; margin: 0 !important; background: none !important; } body.edubase-cadastro #tm-main > .uk-container { max-width: none; width: 100%; padding: 0; margin: 0; } body.edubase-cadastro .tm-page { padding: 0; margin: 0; } /* O #es do tema herda tamanho de fonte pequeno; a tela nova define o seu. */ body.edubase-cadastro #es { font-size: 15px; } /* --------------------------------------------------------------------------------------------- 3. A divisao --------------------------------------------------------------------------------------------- */ #es .esreg-split { --esreg-brand: #2b47bd; --esreg-brand-dark: #1f3596; --esreg-aside: #1746c8; --esreg-ink: #1f2544; --esreg-ink-soft: #5a6178; --esreg-muted: #858ca3; --esreg-line: #e1e6f0; --esreg-field: #fbfcfe; --esreg-radius: 10px; display: flex; align-items: stretch; width: 100%; min-height: 100vh; min-height: 100dvh; background: #fff; } /* Coluna da esquerda: rola por dentro, para a coluna azul nunca sair da tela no desktop. */ #es .esreg-split__form { flex: 1 1 54%; min-width: 0; display: flex; justify-content: center; overflow-y: auto; padding: 26px 32px 40px; } #es .esreg-split__inner { width: 100%; max-width: 520px; display: flex; flex-direction: column; } /* ⚠️ Anula os 500px fixos de `#es .es-container .es-content` (themes/momyclub02/structure/custom.css.php:358) — aqui a largura e do .esreg-split__inner. */ #es .esreg-split .es-content.esreg-content { display: block; width: 100%; max-width: none; margin: 0; flex: 1 1 auto; } /* Coluna da direita. O AZUL e daqui, nao do modulo: apagar o modulo deixa a coluna azul e vazia, nunca branca e quebrada. */ #es .esreg-split__aside { flex: 1 1 46%; min-width: 0; background: var(--esreg-aside); color: #fff; display: flex; align-items: center; justify-content: center; padding: 48px; overflow: hidden; } #es .esreg-split__aside-inner { width: 100%; max-width: 560px; } #es .esreg-split__aside, #es .esreg-split__aside a, #es .esreg-split__aside h1, #es .esreg-split__aside h2, #es .esreg-split__aside h3, #es .esreg-split__aside p { color: #fff; } /* --------------------------------------------------------------------------------------------- 4. Barra do topo (logo + voltar) --------------------------------------------------------------------------------------------- */ #es .esreg-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 34px; min-height: 34px; } #es .esreg-topbar__logo { display: inline-flex; align-items: center; line-height: 0; } /* ⚠️ `height` EXPLICITO, nao so `max-height`. O logo e um SVG sem width/height intrinsecos (so viewBox); com `width:auto` + apenas `max-height` o navegador resolve a caixa para 0x0 e o logo simplesmente nao aparece — foi exatamente o que aconteceu na primeira versao. */ #es .esreg-topbar__logo img { height: 34px; width: auto; max-width: 210px; display: block; } #es a.esreg-topbar__back { font-size: 13.5px; font-weight: 600; color: var(--esreg-ink-soft); text-decoration: none; white-space: nowrap; } #es a.esreg-topbar__back:hover, #es a.esreg-topbar__back:focus { color: var(--esreg-brand); text-decoration: underline; } /* --------------------------------------------------------------------------------------------- 5. Cabecalho do formulario --------------------------------------------------------------------------------------------- */ #es .esreg-head { margin-bottom: 24px; } #es .esreg-head__title { margin: 0 0 6px; font-size: 28px; line-height: 1.25; font-weight: 800; color: var(--esreg-brand); letter-spacing: -0.4px; } #es .esreg-head__sub { margin: 0; font-size: 14px; color: var(--esreg-muted); } /* --------------------------------------------------------------------------------------------- 6. O formulario Sem cartao e sem grade de colunas: sao 5 campos numa coluna so. --------------------------------------------------------------------------------------------- */ #es .esreg-split .es-forms { background: none; border: 0; box-shadow: none; margin: 0; } #es .esreg-split .es-forms__group, #es .esreg-split .es-forms__content { padding: 0; margin: 0; background: none; border: 0; } #es .esreg-split .o-form-horizontal { display: block; } #es .esreg-split [data-field-item] { margin-bottom: 16px; } /* Rotulo ACIMA do controle. ⚠️ O `.o-form-horizontal` no seletor NAO e decorativo: o tema traz `#es .o-form-horizontal .o-form-group{display:flex}` (style.min.css) em (1,2,0) — EMPATE com `#es .esreg-split .o-form-group`, e no empate vence a folha carregada depois, que e a do tema. Com o terceiro nivel isto vai a (1,3,0) e ganha. Sem isso o rotulo e o input viram itens de flex lado a lado e cada campo comeca num recuo diferente. */ #es .esreg-split .o-form-horizontal .o-form-group { display: block; margin: 0; position: relative; } #es .esreg-split label.o-control-label, #es .esreg-split .o-control-label { display: block; float: none; width: auto; text-align: left; padding: 0 0 6px; margin: 0; font-size: 13.5px; font-weight: 600; color: var(--esreg-ink); line-height: 1.35; } #es .esreg-split .o-control-label > span { color: #e0475f; } #es .esreg-split .o-control-input { display: block; width: 100%; margin: 0; } #es .esreg-split .o-form-control { display: block; width: 100%; height: 46px; padding: 0 14px; font-size: 14.5px; color: var(--esreg-ink); background: var(--esreg-field); border: 1px solid var(--esreg-line); border-radius: var(--esreg-radius); box-shadow: none; transition: border-color .15s ease, box-shadow .15s ease; } #es .esreg-split .o-form-control:focus { background: #fff; border-color: var(--esreg-brand); box-shadow: 0 0 0 3px rgba(43, 71, 189, .14); outline: 0; } /* Controles empilhados (senha + confirmar senha sao dois inputs no MESMO campo). */ #es .esreg-split .o-control-input .o-form-control + .o-form-control { margin-top: 10px; } /* ⚠️ O ES monta o "input + botao" como display:table, que nao encolhe e invadia a coluna. */ #es .esreg-split .o-input-group { display: flex; width: 100%; } #es .esreg-split .o-input-group > .o-form-control, #es .esreg-split .o-input-group__input { flex: 1 1 auto; min-width: 0; } #es .esreg-split .o-input-group__btn { flex: 0 0 auto; width: auto; } #es .esreg-split .o-input-group__btn .btn { height: 46px; border-radius: 0 var(--esreg-radius) var(--esreg-radius) 0; margin-left: -1px; } #es .esreg-split .o-input-group > .o-form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } /* Medidor de forca da senha */ #es .esreg-split [data-password-strength] { display: block; margin-top: 6px; font-size: 12.5px; color: var(--esreg-muted); } /* Dicas de campo: FORA (decisao do usuario). Os rotulos e os placeholders ja dizem o que cada campo quer; as descricoes deixavam a tela comprida e ruidosa. Elas continuam existindo em #__social_fields e aparecem normalmente na tela de EDITAR PERFIL — some so aqui. ⚠️ Mirar `.o-help-block`, NUNCA `.help-block` sozinho: o segundo tambem carrega a resposta do botao "Verificar" do nome de usuario ("Otimo, o nome de usuario esta disponivel", `.help-block.t-text--success` dentro de `[data-username-available]`). E o medidor de forca da senha e `.help-inline`, tambem intocado. */ #es .esreg-split .o-help-block { display: none; } #es .esreg-split .help-block { margin: 6px 0 0; font-size: 12.5px; } #es .esreg-split .help-block.t-text--success { color: #2f9e6b; } #es .esreg-split .es-fields-error-note, #es .esreg-split .controls-error { display: block; margin-top: 6px; font-size: 12.5px; color: #e0475f; } #es .esreg-split .has-error .o-form-control { border-color: #e0475f; background: #fff7f8; } #es .esreg-split .t-text--success { color: #2f9e6b; } /* Rodape de acoes */ #es .esreg-split .es-forms__actions { background: none; border: 0; padding: 6px 0 0; margin: 0; } #es .esreg-split .o-form-actions { display: flex; gap: 12px; background: none; border: 0; padding: 0; margin: 0; } #es .esreg-split .o-form-actions .pull-left { float: none; margin-right: auto; } #es .esreg-split .o-form-actions .pull-right { float: none; flex: 1 1 auto; } #es .esreg-split #btn-register-submit { width: 100%; height: 50px; font-size: 15.5px; font-weight: 700; border-radius: var(--esreg-radius); background: var(--esreg-brand); border-color: var(--esreg-brand); color: #fff; box-shadow: 0 4px 14px rgba(43, 71, 189, .26); } #es .esreg-split #btn-register-submit:hover, #es .esreg-split #btn-register-submit:focus { background: var(--esreg-brand-dark); border-color: var(--esreg-brand-dark); } /* --------------------------------------------------------------------------------------------- 7. Seletor de DDI (bandeira + codigo) montado por js/cadastro.js sobre o textbox do telefone --------------------------------------------------------------------------------------------- */ #es .esreg-phone { display: flex; width: 100%; position: relative; } #es .esreg-phone__toggle { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 46px; padding: 0 10px; font-size: 14px; color: var(--esreg-ink); background: var(--esreg-field); border: 1px solid var(--esreg-line); border-right: 0; border-radius: var(--esreg-radius) 0 0 var(--esreg-radius); cursor: pointer; white-space: nowrap; } #es .esreg-phone__toggle:hover { background: #f3f6fd; } /* A pilha de fontes precisa comecar pela Twemoji, senao o navegador usa a do sistema (que no Windows nao tem bandeira) antes de chegar nela. */ #es .esreg-flag { font-family: 'Twemoji Country Flags', 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; font-size: 17px; line-height: 1; } #es .esreg-phone__caret { border: solid var(--esreg-muted); border-width: 0 2px 2px 0; padding: 2.5px; transform: rotate(45deg); margin-top: -3px; } #es .esreg-phone .o-form-control { border-radius: 0 var(--esreg-radius) var(--esreg-radius) 0; } /* O painel. z-index alto porque o cartao do formulario rola por dentro da coluna. */ #es .esreg-phone__panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; width: 320px; max-width: 100%; background: #fff; border: 1px solid var(--esreg-line); border-radius: var(--esreg-radius); box-shadow: 0 12px 32px rgba(31, 37, 68, .16); overflow: hidden; } #es .esreg-phone__panel[hidden] { display: none; } #es .esreg-phone__search { display: block; width: 100%; height: 40px; padding: 0 12px; border: 0; border-bottom: 1px solid var(--esreg-line); font-size: 14px; color: var(--esreg-ink); background: #fff; } #es .esreg-phone__search:focus { outline: 0; } #es ul.esreg-phone__list { list-style: none; margin: 0; padding: 4px 0; max-height: 260px; overflow-y: auto; } #es .esreg-phone__list li { margin: 0; padding: 0; } #es button.esreg-phone__opt { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 12px; background: none; border: 0; font-size: 14px; color: var(--esreg-ink); text-align: left; cursor: pointer; } #es button.esreg-phone__opt:hover, #es button.esreg-phone__opt:focus, #es button.esreg-phone__opt.is-active { background: rgba(43, 71, 189, .09); outline: 0; } #es .esreg-phone__opt-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #es .esreg-phone__opt-ddi { flex: 0 0 auto; color: var(--esreg-muted); font-variant-numeric: tabular-nums; } #es .esreg-phone__empty { padding: 14px 12px; font-size: 13.5px; color: var(--esreg-muted); } /* --------------------------------------------------------------------------------------------- 8. "Ja tem conta" + termos --------------------------------------------------------------------------------------------- */ #es .esreg-signin { margin-top: 18px; text-align: center; font-size: 14px; color: var(--esreg-ink-soft); } #es a.esreg-signin__link, #es .esreg-signin a { font-weight: 700; color: var(--esreg-brand); text-decoration: none; } #es .esreg-signin a:hover { text-decoration: underline; } #es .esreg-terms { margin: 26px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--esreg-muted); } #es .esreg-terms a { color: var(--esreg-ink-soft); text-decoration: underline; } /* --------------------------------------------------------------------------------------------- 9. Responsivo ⚠️ Media query, nunca `#es.is-mobile`: aquela classe e deteccao de User-Agent no SERVIDOR, entao nao acompanha o redimensionamento da janela nem um tablet em paisagem. --------------------------------------------------------------------------------------------- */ @media (max-width: 900px) { #es .esreg-split { flex-direction: column; min-height: 0; } #es .esreg-split__form { flex: 1 1 auto; overflow: visible; padding: 22px 20px 32px; } /* A coluna azul vai para BAIXO do formulario: no celular o que importa e o campo, e o conteudo institucional vira complemento. */ #es .esreg-split__aside { flex: 0 0 auto; padding: 34px 22px; order: 2; } #es .esreg-head__title { font-size: 24px; } } @media (max-width: 480px) { #es .esreg-split__form { padding: 18px 16px 28px; } #es .esreg-topbar { margin-bottom: 26px; } #es .esreg-phone__panel { width: 280px; } } /* ------------------------------------------------------------------------- ERRO VISIVEL NO CAMPO DE CHECKBOX (aceite de idade) ------------------------------------------------------------------------- ☠️ O app `checkbox` NAO desenha mensagem de erro. Ao contrario dos demais, o template dele nao emite `.es-fields-error-note`, e o `[data-check-notice]` que ele tem fica dentro de um `.controls-error.t-hidden` que o controller nunca revela nem preenche. Resultado medido em 20/08/2026 com o formulario TODO valido e so' a caixa desmarcada: o envio e' bloqueado, o modal generico "Existem erros no formulario" abre, e NADA aponta para a caixa — a pessoa fica presa sem saber o que falta. O que o controller faz e' pendurar `has-error` no `.o-form-group`. Entao a mensagem sai daqui, por CSS, lendo o texto do proprio atributo `data-error-empty` que o app ja renderiza traduzido pelo servidor (`content: attr(...)` — nao ha' string de idioma no CSS). Generico de proposito: vale para qualquer campo de checkbox obrigatorio. ------------------------------------------------------------------------- */ #es .o-form-group.has-error [data-field-checkbox][data-error-empty]::after { content: attr(data-error-empty); display: block; margin-top: 6px; color: #f43f5e; font-size: 12.5px; line-height: 1.4; } #es .o-form-group.has-error [data-field-checkbox] input[type="checkbox"] { outline: 2px solid #f43f5e; outline-offset: 2px; } /* Assim que a pessoa marca, o aviso sai — o controller do app mantem o `has-error` no grupo ate' o proximo envio, e uma mensagem vermelha embaixo de uma caixa JA' marcada faz parecer que ainda esta' errado. */ #es .o-form-group.has-error [data-field-checkbox][data-error-empty]:has(input:checked)::after { content: none; } #es .o-form-group.has-error [data-field-checkbox]:has(input:checked) input[type="checkbox"] { outline: none; }