: aqui o cartão manda */ .ik-cadloja section.ik-cadloja__secao { margin: 0 0 1rem; } .ik-cadloja__secao { background: var(--ik-surface); border: 1px solid var(--ik-border); border-radius: var(--ik-radius-lg); padding: 1.5rem; margin-bottom: 1rem; } .ik-cadloja__secao-titulo { font-size: 1.125rem; font-weight: 700; margin: 0 0 1rem; color: var(--ik-text); text-transform: none; } .ik-cadloja__linha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; } .ik-cadloja__linha--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ik-cadloja__campo { margin-bottom: 1rem; min-width: 0; } .ik-cadloja__linha > .ik-cadloja__campo { margin-bottom: 0; } .ik-cadloja__campo label, .ik-cadloja__rotulo { display: block; margin-bottom: 0.375rem; font-size: 0.9375rem; font-weight: 500; color: var(--ik-text); text-transform: none; } .ik-cadloja input:not([type=radio]):not([type=checkbox]):not([type=file]):not(.iti__search-input), .ik-cadloja textarea, .ik-cadloja select:not([multiple]) { width: 100%; min-height: 3rem; padding: 0.625rem 0.875rem; border: 1px solid var(--ik-border-strong); border-radius: var(--ik-radius); background: var(--ik-surface); color: var(--ik-text); font-size: 1rem; box-shadow: none; } .ik-cadloja textarea { min-height: 4.5rem; resize: vertical; } .ik-cadloja input::placeholder, .ik-cadloja textarea::placeholder { color: var(--ik-text-muted); opacity: 1; } .ik-cadloja input:focus-visible, .ik-cadloja textarea:focus-visible, .ik-cadloja select:focus-visible, .ik-cadloja button:focus-visible, .ik-cadloja a:focus-visible { outline: 2px solid var(--ik-accent); outline-offset: 2px; } .ik-cadloja input:focus, .ik-cadloja textarea:focus, .ik-cadloja select:focus { border-color: var(--ik-accent); } /* culinária (select2): o campo de busca dele tira o contorno — o anel vai na caixa inteira (revisão de 13/10/2026; MASTER: nunca sem foco) */ .ik-cadloja .select2-container--focus .select2-selection { border-color: var(--ik-accent); box-shadow: 0 0 0 2px var(--ik-surface), 0 0 0 4px var(--ik-accent); } /* (o select2.min.css zera o outline com !important — por isso o anel é box-shadow, no mesmo desenho do foco dos outros campos) */ /* sem JavaScript o envio (fetch) e a verificação não funcionam — o aviso aparece só nesse caso */ .ik-cadloja__sem-js { margin: 0 auto 1rem; max-width: 72rem; padding: .875rem 1rem; border-radius: var(--ik-radius); background: var(--ik-accent-soft); color: var(--ik-text); font-weight: 600; } /* rascunho recuperado: aviso no topo do formulário com "Começar do zero" */ .ik-cadloja__rascunho { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin: 0 0 1rem; padding: .75rem 1rem; border-radius: var(--ik-radius); background: var(--ik-accent-soft); color: var(--ik-text); font-size: .9375rem; } .ik-cadloja__rascunho-limpar { min-height: 40px; padding: 0 .875rem; border: 1px solid var(--ik-accent); border-radius: var(--ik-radius); background: var(--ik-surface); color: var(--ik-accent-em-soft); font-weight: 600; cursor: pointer; } /* a prévia da capa na mesma proporção do recorte do editor (3,4375:1, a da tela da loja) — era 3:1 */ .ik-cadloja__foto .upload-file__wrapper.ratio-3-1 { aspect-ratio: 3.4375 / 1 !important; } .ik-cadloja [aria-invalid="true"] { border-color: var(--ik-erro-texto) !important; } .ik-cadloja__ajuda { margin: 0.375rem 0 0; font-size: 0.8125rem; line-height: 1.45; color: var(--ik-text-muted); } .ik-cadloja__ajuda--secao { margin: -0.5rem 0 1rem; } .ik-cadloja__erro { margin: 0.375rem 0 0; font-size: 0.8125rem; font-weight: 500; color: var(--ik-erro-texto); } .ik-cadloja__idiomas { display: flex; gap: 0.25rem; margin-bottom: 1rem; border-bottom: 1px solid var(--ik-border); } .ik-cadloja__idiomas button { border: 0; background: none; padding: 0.5rem 0.75rem; font-size: 0.875rem; color: var(--ik-text-muted); border-bottom: 2px solid transparent; } .ik-cadloja__idiomas button.is-ativa { color: var(--ik-text); border-bottom-color: var(--ik-accent); font-weight: 600; } .ik-cadloja__tempo { display: grid; grid-template-columns: 1fr auto 1fr 7.5rem; gap: 0.5rem; align-items: center; color: var(--ik-text-muted); max-width: 30rem; } .ik-cadloja__mapa { position: relative; border: 1px solid var(--ik-border-strong); border-radius: var(--ik-radius); overflow: hidden; } .ik-cadloja__mapa[aria-invalid="true"] { border-color: var(--ik-erro-texto); } .ik-cadloja #map { height: 18rem; } .ik-cadloja .ik-cadloja__busca-mapa { position: absolute; z-index: 2; top: 0.625rem; left: 0.625rem; width: calc(100% - 4rem) !important; min-height: 2.5rem !important; box-shadow: 0 2px 8px rgba(24, 24, 27, 0.15) !important; } .ik-cadloja__fora { position: absolute; z-index: 2; left: 0.625rem; right: 0.625rem; bottom: 0.625rem; padding: 0.5rem 0.75rem; border-radius: var(--ik-radius); background: var(--ik-text); color: #fff; font-size: 0.8125rem; display: none; } .ik-cadloja__coordenadas { display: none !important; } .ik-cadloja__foto .upload-file { margin-top: 0.75rem; } /* a legenda do uploader do template ("JPG, PNG, GIF Ou WebP. Tamanho Máximo…") repete a ajuda do campo, em Title Case */ .ik-cadloja__foto > p.fs-10 { display: none; } .ik-cadloja__foto .upload-file__wrapper.ratio-3-1 { width: 100%; max-width: 22rem; } .ik-cadloja__foto .upload-file-textbox h6 { color: var(--ik-accent-fill) !important; font-size: 0.8125rem !important; text-transform: none; } .ik-cadloja__foto[aria-invalid="true"] .upload-file__wrapper { border-color: var(--ik-erro-texto); } .ik-cadloja__arquivo { display: block; width: 100%; padding: 0.625rem; border: 1px dashed var(--ik-border-strong); border-radius: var(--ik-radius); background: var(--ik-surface-2); font-size: 0.875rem; } .ik-cadloja__senha { position: relative; } .ik-cadloja__senha input { padding-right: 3rem !important; } .ik-cadloja__mostrar { position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%); width: 2.5rem; height: 2.5rem; border: 0; border-radius: var(--ik-radius); background: transparent; color: var(--ik-text-muted); display: inline-flex; align-items: center; justify-content: center; } .ik-cadloja__mostrar:hover { background: var(--ik-surface-2); color: var(--ik-text); } .ik-cadloja__mostrar > span { width: 1.25rem; height: 1.25rem; background: currentColor; -webkit-mask: var(--ik-icone-olho) center / contain no-repeat; mask: var(--ik-icone-olho) center / contain no-repeat; } .ik-cadloja__mostrar[aria-pressed="true"] > span { -webkit-mask-image: var(--ik-icone-olho-fechado); mask-image: var(--ik-icone-olho-fechado); } /* o CAPTCHA de imagem dos cadastros é o componente do site (landing-ikero/_captcha-imagem, .ikh-captcha) desde 13/10/2026 */ .ik-cadloja__acoes { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 1.5rem; } .ik-cadloja__primario, .ik-cadloja__secundario { min-height: 3rem; padding: 0 1.75rem; border-radius: var(--ik-radius); font-size: 1rem; font-weight: 600; border: 1px solid transparent; } .ik-cadloja__primario { background: var(--ik-accent-fill); color: #fff; } .ik-cadloja__primario:hover { background: var(--ik-accent-hover); } .ik-cadloja__primario[disabled], .ik-cadloja__primario[aria-busy="true"] { opacity: 0.7; cursor: progress; } .ik-cadloja__secundario { background: var(--ik-surface); border-color: var(--ik-border-strong); color: var(--ik-text); } .ik-cadloja__opcoes, .ik-cadloja__pacotes { border: 0; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.75rem; } .ik-cadloja__pacotes legend { font-size: 0.9375rem; font-weight: 600; margin-bottom: 0.5rem; } .ik-cadloja__opcao { display: flex; gap: 0.75rem; align-items: flex-start; padding: 1rem; border: 1px solid var(--ik-border-strong); border-radius: var(--ik-radius); cursor: pointer; } .ik-cadloja__opcao:has(input:checked) { border-color: var(--ik-accent); background: var(--ik-accent-soft); } .ik-cadloja__opcao input { margin-top: 0.25rem; accent-color: var(--ik-accent-fill); width: 1.125rem; height: 1.125rem; } .ik-cadloja__opcao strong { display: block; } /* o select2 da culinária no tom dos campos */ .ik-cadloja .select2-container--default .select2-selection--multiple { min-height: 3rem; border: 1px solid var(--ik-border-strong); border-radius: var(--ik-radius); padding: 0.25rem 0.5rem; } .ik-cadloja .select2-container--default.select2-container--focus .select2-selection--multiple { border-color: var(--ik-accent); outline: 2px solid var(--ik-accent); outline-offset: 2px; } .ik-cadloja .iti { width: 100%; } /* a bandeira do seletor de país fica dentro do campo: o recuo é o do intl-tel-input, não o dos outros campos */ .ik-cadloja .iti input[type=tel] { padding-left: 3.25rem !important; } .ik-cadloja__resumo, .ik-cadloja__campo, .ik-cadloja__secao { scroll-margin-top: 7rem; } /* ---- correção do cadastro negado (10/10/2026, MASTER §5.190.1) ---------------------------------------------------------- O aviso no topo e as partes marcadas pelo admin em ÂMBAR (aviso, §1.1): nunca o laranja da marca, que não comunica status. */ .ik-cadloja__correcao { margin: 0 0 1rem; padding: 1.25rem 1.5rem; border: 1px solid var(--ik-aviso-texto); border-radius: var(--ik-radius-lg); background: var(--ik-aviso-fundo); color: var(--ik-aviso-texto); } .ik-cadloja__correcao-titulo { margin: 0 0 0.5rem; font-size: 1.125rem; font-weight: 700; color: var(--ik-aviso-texto); } .ik-cadloja__correcao-motivo { margin: 0 0 0.75rem; font-size: 0.9375rem; line-height: 1.5; overflow-wrap: anywhere; } .ik-cadloja__correcao-partes-titulo { margin: 0 0 0.25rem; font-size: 0.9375rem; font-weight: 600; } .ik-cadloja__correcao-partes { margin: 0 0 0.75rem; padding-left: 1.25rem; font-size: 0.9375rem; line-height: 1.6; } .ik-cadloja__correcao-nota { margin: 0; font-size: 0.875rem; } .ik-cadloja .is-corrigir { border-color: var(--ik-aviso-texto); box-shadow: inset 4px 0 0 var(--ik-aviso-texto); } .ik-cadloja .ik-cadloja__foto.is-corrigir { padding-left: 0.75rem; border-radius: var(--ik-radius); } .ik-cadloja__selo-corrigir { display: inline-flex; align-items: center; margin-left: 0.5rem; padding: 0.125rem 0.5rem; border-radius: 999px; background: var(--ik-aviso-fundo); color: var(--ik-aviso-texto); font-size: 0.75rem; font-weight: 600; vertical-align: middle; } .ik-cadloja__ja-enviado { margin: 0.375rem 0 0; font-size: 0.875rem; color: var(--ik-sucesso-texto); } a.ik-cadloja__primario { display: inline-flex; align-items: center; text-decoration: none; } a.ik-cadloja__primario:hover, a.ik-cadloja__primario:focus { color: #fff; } @media (max-width: 991.98px) { .ik-cadloja { padding-top: 6rem; } } @media (max-width: 767.98px) { .ik-cadloja__linha, .ik-cadloja__linha--3 { grid-template-columns: 1fr; } .ik-cadloja__secao { padding: 1.25rem 1rem; } .ik-cadloja__titulo { font-size: 1.625rem; } .ik-cadloja__tempo { grid-template-columns: 1fr auto 1fr; } .ik-cadloja__tempo select { grid-column: 1 / -1; } .ik-cadloja__acoes { flex-direction: column-reverse; } .ik-cadloja__primario, .ik-cadloja__secundario { width: 100%; } .ik-cadloja__passos li { font-size: 0.8125rem; } } /* plano, pagamento e conclusão */ .ik-cadloja__estreito { max-width: 46rem; margin-inline: auto; } .ik-cadloja__link-botao { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } .ik-cadloja__link-botao:hover { text-decoration: none; } .ik-cadloja a.ik-cadloja__primario, .ik-cadloja a.ik-cadloja__primario:hover { color: #fff; } .ik-cadloja a.ik-cadloja__secundario { color: var(--ik-text); } .ik-cadloja__acoes--centro { justify-content: center; } .ik-cadloja__fim { text-align: center; padding: 2.5rem 1.5rem; } .ik-cadloja__fim-disco { display: inline-flex; width: 4rem; height: 4rem; border-radius: 50%; margin-bottom: 1rem; background: var(--ik-sucesso-fundo); position: relative; } .ik-cadloja__fim-disco::after { content: ""; position: absolute; inset: 1rem; background: var(--ik-sucesso-texto); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; } /* Lucide check */ .ik-cadloja__fim-disco.is-falha { background: var(--ik-erro-fundo); } .ik-cadloja__fim-disco.is-falha::after { background: var(--ik-erro-texto); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E"); } /* Lucide x */ .ik-cadloja__proximos { text-align: left; max-width: 30rem; margin: 1.5rem auto 0; padding-left: 1.25rem; color: var(--ik-text-menu); line-height: 1.6; } .ik-cadloja__proximos li + li { margin-top: 0.5rem; } /* o editor de imagem (modal do painel, Bootstrap 4) no site: acima do cabeçalho fixo, botões no tom do painel, rótulo só para leitor de tela (o `sr-only` do Bootstrap 4 não existe no 5) */ /* o style.css do template põe `.modal-open .modal { z-index: 1060 !important }` — só outro !important, com o id, passa o fundo */ .modal-open #ikEditorImagemModal { z-index: 2000 !important; } #ikEditorImagemModal { font-family: "Inter", system-ui, sans-serif; color: var(--ik-text); } .modal-backdrop { z-index: 1990; } #ikEditorImagemModal .modal-title { font-size: 1.125rem; font-weight: 700; } #ikEditorImagemModal .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } #ikEditorImagemModal .modal-footer { gap: 0.75rem; } #ikEditorImagemModal .ik-editor-aplicar, #ikEditorImagemModal .ik-editor-cancelar { min-height: 2.75rem; padding: 0 1.5rem; border-radius: var(--ik-radius); font-weight: 600; } #ikEditorImagemModal .ik-editor-aplicar { background: var(--ik-accent-fill); border: 1px solid var(--ik-accent-fill); color: #fff; } #ikEditorImagemModal .ik-editor-aplicar:hover { background: var(--ik-accent-hover); } #ikEditorImagemModal .ik-editor-cancelar { background: var(--ik-surface); border: 1px solid var(--ik-border-strong); color: var(--ik-text); } #ikEditorImagemModal .ik-editor__zoom-botao { border: 1px solid var(--ik-border-strong); border-radius: var(--ik-radius); background: var(--ik-surface); color: var(--ik-text); } #ikEditorImagemModal button:focus-visible { outline: 2px solid var(--ik-accent); outline-offset: 2px; } /* o endereço em partes (10/10/2026), na largura toda do cartão: CEP · rua · número / complemento · bairro · cidade · UF */ .ik-cadloja__endereco { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 1rem; } /* 13/10/2026 (proprietário: "muito embolado"): CEP | Rua, Número | Complemento, Bairro | Cidade | UF — cada campo do tamanho do que cabe nele (eram 4 por linha no cartão de 650 px: Número, Bairro e CEP com ~150 px) */ .ik-cadloja__campo--cep { grid-column: span 4; } .ik-cadloja__campo--rua { grid-column: span 8; } .ik-cadloja__campo--numero { grid-column: span 4; } .ik-cadloja__campo--complemento { grid-column: span 8; } .ik-cadloja__campo--bairro { grid-column: span 5; } .ik-cadloja__campo--cidade { grid-column: span 5; } .ik-cadloja__campo--uf { grid-column: span 2; } /* a ajuda do CEP em uma linha abaixo da grade não quebraria o alinhamento: aqui ela atravessa as colunas do lado */ .ik-cadloja__campo--cep .ik-cadloja__ajuda { width: max-content; max-width: min(36rem, 80vw); } /* zona (estreita) e o mapa (largo) numa linha própria */ .ik-cadloja__local { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 1rem 1.25rem; padding-top: 1rem; margin-top: 0.25rem; border-top: 1px solid var(--ik-border); } .ik-cadloja__local > .ik-cadloja__campo { margin-bottom: 0; } /* o envio: verificação à esquerda, botão à direita, no mesmo cartão */ .ik-cadloja__envio { display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; flex-wrap: wrap; } .ik-cadloja__envio .ik-cadloja__verificacao { flex: 1 1 18rem; max-width: 26rem; min-height: 65px; } .ik-cadloja__envio .ik-cadloja__verificacao:empty { display: none; } .ik-cadloja__envio .ik-cadloja__acoes { margin-top: 0; margin-left: auto; } .ik-cadloja__envio .ik-cadloja__primario { min-width: 12rem; } /* o comprovante: o botão do seletor de arquivo no tom da página */ .ik-cadloja__arquivo::file-selector-button { margin-right: 0.75rem; padding: 0.5rem 1rem; border: 1px solid var(--ik-border-strong); border-radius: var(--ik-radius); background: var(--ik-surface); color: var(--ik-text); font-weight: 600; cursor: pointer; } .ik-cadloja__arquivo::file-selector-button:hover { background: var(--ik-surface-2); } .ik-cadloja__secao-titulo { margin-bottom: 1.125rem; } @media (max-width: 991.98px) { .ik-cadloja__local { grid-template-columns: 1fr; } } @media (max-width: 767.98px) { .ik-cadloja__campo--cep, .ik-cadloja__campo--numero, .ik-cadloja__campo--uf { grid-column: span 4; } .ik-cadloja__campo--rua { grid-column: span 8; } .ik-cadloja__campo--complemento, .ik-cadloja__campo--bairro { grid-column: span 6; } .ik-cadloja__campo--cidade { grid-column: span 8; } } @media (max-width: 575.98px) { .ik-cadloja__endereco > .ik-cadloja__campo { grid-column: span 12; } .ik-cadloja__endereco > .ik-cadloja__campo--cidade { grid-column: span 8; } .ik-cadloja__endereco > .ik-cadloja__campo--uf { grid-column: span 4; } .ik-cadloja__campo--cep .ik-cadloja__ajuda { width: auto; } .ik-cadloja__envio { flex-direction: column; align-items: stretch; } .ik-cadloja__envio .ik-cadloja__verificacao { max-width: none; } .ik-cadloja__envio .ik-cadloja__acoes { margin-left: 0; } } /* a culinária: o campo de busca do select2 tinha borda própria dentro da borda do seletor (caixa dentro de caixa) */ .ik-cadloja .select2-container--default .select2-selection--multiple .select2-search__field, .ik-cadloja .select2-container--default .select2-search--inline .select2-search__field { border: 0 !important; box-shadow: none !important; min-height: 0 !important; height: 2.25rem; padding: 0 0.25rem !important; margin: 0; } .ik-cadloja .select2-container--default .select2-selection--multiple { display: flex; align-items: center; } /* a busca do mapa (PlaceAutocompleteElement do Google, montada por map-functionality.js em `.ik-mapa__busca-lugar`): no painel o ikero-theme.css a deixa branca e estreita; no site, sem o tema, ela saía no esquema escuro do navegador e larga demais */ .ik-cadloja .ik-mapa__busca-lugar { margin-top: 10px; width: min(18rem, calc(100% - 7rem)); } .ik-cadloja .ik-mapa__busca-lugar gmp-place-autocomplete { display: block; width: 100%; height: 2.5rem; color-scheme: light; background-color: var(--ik-surface); border: 1px solid var(--ik-border-strong); border-radius: var(--ik-radius); box-shadow: 0 1px 4px rgba(24, 24, 27, 0.18); font-size: 0.875rem; } /* cadastro de entregador (10/10/2026, §5.191): os turnos em cartões compactos */ .ik-cadloja__turnos { border: 0; padding: 1rem 0 0; margin: 1rem 0 0; border-top: 1px solid var(--ik-border); min-width: 0; } .ik-cadloja__turnos-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.75rem; } .ik-cadloja__opcao--compacta { padding: 0.75rem 1rem; } .ik-cadloja__opcao input[type=checkbox] { margin-top: 0.25rem; accent-color: var(--ik-accent-fill); width: 1.125rem; height: 1.125rem; } .ik-cadloja__opcao { font-size: 0.9375rem; font-weight: 400; line-height: 1.45; color: var(--ik-text-menu); text-transform: none; } .ik-cadloja__opcao strong { font-weight: 600; color: var(--ik-text); } /* ========================================================================== Site novo (13/10/2026): as páginas do cadastro saíram do layout antigo do template e usam o da home (layouts.landing-ikero — cabeçalho flutuante, rodapé laranja). Aqui o formulário ganha o visual da home: fundo creme, cartões com o raio e a sombra dos cartões de lá, campos e botão como os da newsletter, títulos na cor de título do site. Os tokens --ikh-* vêm do ikero-home.css (mesma página); os valores depois da vírgula são o mesmo valor, para o caso de faltar. Contraste (MASTER §6): #37322c sobre o branco 12,7:1; #5c5650 (texto de apoio) sobre o branco 7,24:1 e sobre o creme #fff4ec 6,69:1. ========================================================================== */ .ik-cadloja { --ik-text: var(--ikh-titulo, #37322c); --ik-text-menu: var(--ikh-texto, #4b5d68); --ik-text-muted: #5c5650; --ik-border: #f1e2d8; --ik-border-strong: #8c857d; /* a borda do campo da newsletter: 3,64:1 no branco (contorno de componente pede 3:1) */ --ik-radius: 12px; --ik-radius-lg: var(--ikh-raio-cartao, 20px); background: linear-gradient(180deg, var(--ikh-fundo-alt, #fff4ec) 0%, var(--ikh-fundo, #fcfcfc) 70%); padding: clamp(24px, 3vw, 40px) 0 clamp(48px, 6vw, 80px); } .ik-cadloja__titulo { font-size: clamp(32px, 3.6vw, 48px); line-height: 1.08; letter-spacing: -.025em; text-wrap: balance; } .ik-cadloja__subtitulo { font-size: clamp(16px, 1.3vw, 18px); line-height: 1.55; text-wrap: pretty; } .ik-cadloja__secao { border-color: var(--ikh-borda-quente); box-shadow: var(--ikh-sombra-cartao, 0 1px 2px rgba(55, 50, 44, .04), 0 8px 24px rgba(55, 50, 44, .06)); } .ik-cadloja__secao { padding: clamp(20px, 2.4vw, 28px); } .ik-cadloja__secao-titulo { font-size: 1.25rem; letter-spacing: -.01em; } .ik-cadloja input:not([type=radio]):not([type=checkbox]):not([type=file]):not(.iti__search-input), .ik-cadloja textarea, .ik-cadloja select:not([multiple]) { min-height: 3.25rem; transition: border-color .2s ease, box-shadow .2s ease; } .ik-cadloja input:focus, .ik-cadloja textarea:focus, .ik-cadloja select:focus { border-color: var(--ik-accent-fill); box-shadow: 0 0 0 3px rgba(209, 54, 5, .12); } .ik-cadloja .select2-container--default .select2-selection--multiple { min-height: 3.25rem; } .ik-cadloja__primario, .ik-cadloja__secundario { min-height: 3.25rem; border-radius: 12px; transition: background .2s ease, transform .2s ease, box-shadow .2s ease; } .ik-cadloja__primario:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(209, 54, 5, .28); color: #fff; } .ik-cadloja__primario[disabled]:hover, .ik-cadloja__primario[aria-busy="true"]:hover { transform: none; box-shadow: none; } /* a última seção (o botão de envio) sem o peso de cartão: o botão fecha o formulário */ .ik-cadloja__acoes { margin-top: 1.5rem; } @media (max-width: 991.98px) { .ik-cadloja { padding-top: clamp(20px, 3vw, 32px); } } @media (prefers-reduced-motion: reduce) { .ik-cadloja__primario:hover { transform: none; } } /* ========================================================================== Fase 1 da auditoria do cadastro (13/10/2026): container da home, "Como funciona" recolhível, zona calculada pelo mapa, um visual só para os três envios de arquivo, dica do celular abaixo da linha, verificação embaixo do botão. Ícone de envio: Lucide "upload" (MASTER — ícone novo é Lucide), por máscara. ========================================================================== */ .ik-cadloja { --ik-icone-envio: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m17 8-5-5-5 5'/%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3C/svg%3E"); } .ik-cadloja__obrigatorio { text-align: center; margin-top: .75rem; } /* a zona é calculada pelo mapa: aparência de campo preenchido pelo sistema, sem seta */ .ik-cadloja select.ik-cadloja__calculado { pointer-events: none; background: #f6f2ee; color: var(--ik-text); -webkit-appearance: none; appearance: none; } /* zona em cima, o mapa na largura toda do cartão */ .ik-cadloja__local { grid-template-columns: 1fr; } .ik-cadloja #map { height: 20rem; } /* os três envios (logo, capa, comprovante) com o mesmo visual: largura da coluna, 120 px, borda tracejada, ícone e texto */ .ik-cadloja__foto .upload-file { display: block; width: 100%; } .ik-cadloja__foto .upload-file__wrapper, .ik-upload { position: relative; display: flex; align-items: center; justify-content: center; width: 100% !important; max-width: none !important; height: 120px !important; aspect-ratio: auto !important; margin: 0 !important; border: 1.5px dashed var(--ik-border-strong) !important; border-radius: 12px !important; background: #fffaf6 !important; overflow: hidden; cursor: pointer; transition: border-color .2s ease, background .2s ease; } .ik-cadloja__foto .upload-file__wrapper:hover, .ik-upload:hover, .ik-cadloja__foto .upload-file.is-arrastando .upload-file__wrapper, .ik-upload.is-arrastando { border-color: var(--ik-accent-fill) !important; background: var(--ik-accent-soft) !important; } .ik-cadloja__foto .upload-file-textbox, .ik-upload__vazio { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 12px; text-align: center; pointer-events: none; } .ik-cadloja__foto .upload-file-textbox > img { display: none; } /* o ícone PNG do template; o Lucide entra no ::before */ .ik-cadloja__foto .upload-file-textbox::before, .ik-upload__vazio::before { content: ""; width: 24px; height: 24px; background: var(--ik-accent-fill); -webkit-mask: var(--ik-icone-envio) center / contain no-repeat; mask: var(--ik-icone-envio) center / contain no-repeat; } .ik-cadloja__foto .upload-file-textbox h6, .ik-upload__vazio { margin: 0; color: var(--ik-text) !important; font-size: .875rem !important; font-weight: 600; line-height: 1.4; } /* 14/10/2026: o h6 do template traz mt-1 e lh-base (com !important) e descia o texto 3 px em relação à caixa vizinha (.ik-upload) */ .ik-cadloja__foto .upload-file-textbox h6 { margin: 0 !important; line-height: 1.4 !important; } /* a pré-visualização sem moldura quebrada: sem src, a imagem não aparece; com ela, inteira dentro da caixa */ .ik-cadloja__foto .upload-file-img { object-fit: contain !important; background: #fff; } .ik-cadloja__foto .upload-file-img:not([src]), .ik-cadloja__foto .upload-file-img[src=""] { display: none !important; } /* editar / remover da foto escolhida: sempre visíveis no canto (o template só mostrava ao passar o mouse) */ .ik-cadloja__foto .upload-file .overlay { opacity: 1; inset: auto 8px 8px auto; width: auto; height: auto; pointer-events: none; } .ik-cadloja__foto .upload-file .overlay > div { gap: 6px !important; } .ik-cadloja__foto .upload-file .overlay .icon-btn { pointer-events: auto; width: 32px; height: 32px; font-size: 14px; border-radius: 8px; justify-content: center; align-items: center; border: 1px solid var(--ik-border-strong); background: #fff; color: var(--ik-text); } .ik-cadloja__foto .upload-file:not(:has(.upload-file-img[style*="block"])) .overlay { display: none; } .ik-cadloja__foto .upload-file .remove_btn { opacity: 1; } .ik-cadloja__foto .ik-cadloja__ajuda { margin-top: .5rem; } /* comprovante: o cobre a caixa inteira (clique e arrastar do próprio navegador) */ .ik-upload { min-height: 120px; } .ik-upload__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .ik-upload:focus-within { outline: 2px solid var(--ik-accent); outline-offset: 2px; } .ik-upload__escolhido { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 0 16px; max-width: 100%; } .ik-upload__escolhido[hidden], .ik-upload__vazio[hidden] { display: none; } .ik-upload__nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9375rem; font-weight: 600; color: var(--ik-text); } .ik-upload__remover { flex: none; min-height: 36px; padding: 0 12px; border: 1px solid var(--ik-border-strong); border-radius: 8px; background: #fff; color: var(--ik-text); font-size: .875rem; font-weight: 600; cursor: pointer; } .ik-upload__remover:hover { border-color: var(--ik-erro-texto); color: var(--ik-erro-texto); } .ik-upload.is-escolhido { cursor: default; } .ik-upload.is-escolhido .ik-upload__input { pointer-events: none; } /* a dica do celular embaixo da linha Nome / Sobrenome / Celular */ .ik-cadloja__ajuda--linha { margin-top: .5rem; } /* culinária (select2): seta de lista e os escolhidos como etiquetas removíveis */ .ik-cadloja .select2-container--default .select2-selection--multiple { padding-right: 2.5rem; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235c5650' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; cursor: pointer; } .ik-cadloja .select2-container--default .select2-selection--multiple .select2-selection__choice { display: inline-flex; align-items: center; gap: 4px; margin: 6px 6px 0 0; padding: 2px 10px 2px 8px; border: 0; border-radius: 999px; background: var(--ik-accent-soft); color: var(--ik-text); font-size: .875rem; font-weight: 600; } .ik-cadloja .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { position: static; border: 0; color: var(--ik-accent-em-soft); font-weight: 700; } .ik-cadloja .select2-container .select2-search--inline .select2-search__field { min-height: 0; margin-top: 10px; font-size: 1rem; } /* o envio: o botão; embaixo, alinhada à esquerda, a verificação (só aparece quando a Cloudflare pede interação) */ .ik-cadloja__envio { flex-direction: column; align-items: stretch; } .ik-cadloja__envio .ik-cadloja__acoes { margin-left: 0; justify-content: flex-end; } .ik-cadloja__envio .ik-cadloja__verificacao { flex: none; max-width: none; min-height: 0; } .ik-cadloja__verificacao-rotulo { margin: 0 0 8px; font-size: .875rem; font-weight: 600; color: var(--ik-text); } @media (max-width: 767.98px) { /* revisão de 13/10/2026: a ordem da tela é a do HTML (o Tab ia CEP → Rua → Número, com o Número em cima): CEP numa linha, Rua na outra, Número + Complemento lado a lado — o Número largo o bastante para o exemplo ("Ex.: 89 ou s/n") */ .ik-cadloja__endereco > .ik-cadloja__campo--cep, .ik-cadloja__endereco > .ik-cadloja__campo--rua { grid-column: 1 / -1; } .ik-cadloja__endereco > .ik-cadloja__campo--numero { grid-column: span 6; } .ik-cadloja__endereco > .ik-cadloja__campo--complemento { grid-column: span 6; } .ik-cadloja__endereco > .ik-cadloja__campo--bairro { grid-column: 1 / -1; } .ik-cadloja__envio .ik-cadloja__acoes { justify-content: stretch; } } /* os botões do envio (13/10/2026) */ .ik-cadloja__envio .ik-cadloja__acoes { gap: .75rem; } /* ========================================================================== Cadastro no molde da referência do proprietário (13/10/2026; MASTER §5.190): hero com a foto sangrando no canto de cima à direita e os passos em linha; formulário numa página só — cartão principal com as seções separadas por linha e a coluna lateral (documento, aviso de privacidade, envio) fixa na rolagem. Parcial: landing-ikero/_hero-do-cadastro. Contraste (MASTER §6): marca #d13605 sobre o creme #fff4ec 4,58:1 (título grande pede 3:1); selo, números e ícones #c73104 sobre #fff1ec 4,92:1 / no branco 5,43:1; texto de apoio #5c5650 no creme 6,69:1 e no branco 7,24:1; botão branco sobre #d13605 4,95:1. ========================================================================== */ .ik-cadloja { overflow-x: clip; } .ik-cadloja:has(> .ik-cadhero:first-child) { padding-top: 0; } /* ---- hero ---- */ .ik-cadhero { position: relative; padding: clamp(16px, 2.5vw, 32px) 0 clamp(28px, 3.5vw, 44px); } .ik-cadhero__texto, .ik-cadhero__passos { position: relative; z-index: 1; } /* 13/10/2026: mesmo modelo do "Fale com a gente" (.ikh-sobretitulo do site): caixa alta, espaçado, traço laranja antes, sem pílula */ .ik-cadhero__selo { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; color: var(--ikh-sobre-tenue, #c73104); font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; line-height: 1.4; } .ik-cadhero__selo::before { content: ""; width: 34px; height: 4px; border-radius: 2px; background: var(--ikh-assinatura, #fa5420); flex: none; } .ik-cadhero .ik-cadloja__titulo { text-align: left; margin: 0 0 14px; font-size: clamp(34px, 4.4vw, 60px); line-height: 1.02; letter-spacing: -.03em; } /* o nome no laranja OFICIAL da marca (proprietário, 13/10/2026), na mesma fonte e peso do título: #fa5420 sobre o creme 3,05:1 — só porque o título é texto grande (≥ 34px, 800), que pede 3:1; nunca usar este tom em texto pequeno */ .ik-cadhero__marca { color: var(--ikh-assinatura, #fa5420); font: inherit; } .ik-cadhero .ik-cadloja__subtitulo { text-align: left; margin: 0; max-width: 36rem; } .ik-cadhero__foto { margin: 20px 0 0; border-radius: var(--ikh-raio-grande, 28px); overflow: hidden; aspect-ratio: 16 / 9; background: var(--ikh-pessego); } .ik-cadhero__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 70% 38%; } /* no celular a foto do topo mais baixa (13/10/2026: o primeiro campo começava a ~840 px) */ @media (max-width: 575.98px) { .ik-cadhero__foto { aspect-ratio: 21 / 9; } } .ik-cadhero__passos { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 18px; } .ik-cadhero__passo { display: flex; align-items: center; gap: 12px; } .ik-cadhero__numero { flex: none; width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 1.5px solid #f0c9b6; color: var(--ikh-sobre-tenue, #c73104); font-size: .875rem; font-weight: 700; display: flex; align-items: center; justify-content: center; } .ik-cadhero__icone { flex: none; width: 60px; height: 60px; border-radius: 50%; background: var(--ikh-tenue, #fff1ec); color: var(--ikh-sobre-tenue, #c73104); display: flex; align-items: center; justify-content: center; } .ik-cadhero__icone .ikh-icone { width: 26px; height: 26px; } .ik-cadhero__passo-texto { display: flex; flex-direction: column; gap: 3px; font-size: .875rem; line-height: 1.5; color: var(--ik-text-muted); text-wrap: pretty; } .ik-cadhero__passo-texto strong { font-size: 1rem; font-weight: 700; color: var(--ik-text); } .ik-cadhero__passo-texto a { color: var(--ik-accent-fill); text-decoration: underline; text-underline-offset: 2px; } @media (min-width: 992px) { .ik-cadhero { --ik-cadhero-respiro: clamp(28px, 3vw, 48px); padding: var(--ik-cadhero-respiro) 0 44px; } /* a foto acompanha o bloco do título (.ik-cadhero__topo): sai do fluxo, vai do topo da página (atrás do cabeçalho flutuante) até a borda direita da janela, com a curva grande embaixo à esquerda; os passos ficam na faixa de baixo, sem texto sobre a foto */ .ik-cadhero__topo { position: relative; min-height: 250px; } .ik-cadhero__texto { max-width: min(700px, 60%); } .ik-cadhero__foto { position: absolute; z-index: 0; margin: 0; top: calc(-1 * (var(--ikh-topo-sobra, 78px) + var(--ik-cadhero-respiro))); right: calc(50% - 50vw); width: min(42vw, 760px); height: calc(100% + var(--ikh-topo-sobra, 78px) + var(--ik-cadhero-respiro) + 12px); aspect-ratio: auto; border-radius: 0; border-bottom-left-radius: 70% 85%; background: none; } .ik-cadhero__foto img { object-position: 60% 16%; } .ik-cadhero__foto::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(255, 244, 236, .55) 0%, rgba(255, 244, 236, 0) 30%); } /* a forma pêssego atrás da foto, mais larga e mais baixa (a segunda curva da referência) */ .ik-cadhero__topo::before { content: ""; position: absolute; z-index: 0; top: calc(-1 * (var(--ikh-topo-sobra, 78px) + var(--ik-cadhero-respiro))); right: calc(50% - 50vw); width: calc(min(42vw, 760px) + 120px); height: calc(100% + var(--ikh-topo-sobra, 78px) + var(--ik-cadhero-respiro) + 70px); border-bottom-left-radius: 70% 85%; background: linear-gradient(175deg, var(--ikh-pessego) 0%, rgba(255, 230, 216, .5) 65%, rgba(255, 230, 216, 0) 100%); } .ik-cadhero__passos { margin-top: 36px; display: flex; gap: 16px; max-width: calc(100% - 60px); } .ik-cadhero__passo { flex: 1 1 0; min-width: 0; } /* o traço que liga um passo ao seguinte */ .ik-cadhero__passo:not(:last-child)::after { content: ""; flex: 0 0 32px; height: 1px; background: #ecd2c4; margin-left: 4px; } } /* ---- formulário: cartão principal + coluna lateral ---- */ .ik-cadloja__corpo { position: relative; z-index: 1; } .ik-cadloja__corpo .ik-cadloja__obrigatorio { text-align: left; margin: 0 0 12px; } .ik-cadloja__corpo .ik-cadloja__passos { justify-content: flex-start; margin: 0 0 1rem; } .ik-cadloja__layout { display: grid; gap: 20px; } .ik-cadloja__principal, .ik-cadloja__lateral { background: var(--ik-surface, #fff); border: 1px solid var(--ikh-borda-quente); border-radius: var(--ikh-raio-cartao, 20px); box-shadow: var(--ikh-sombra-cartao, 0 1px 2px rgba(55, 50, 44, .04), 0 8px 24px rgba(55, 50, 44, .06)); padding: clamp(20px, 2.4vw, 32px); min-width: 0; } /* dentro dos dois cartões as seções perdem o próprio cartão e ganham a linha que as separa */ .ik-cadloja__layout section.ik-cadloja__secao { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; margin: 0; } .ik-cadloja__principal > section.ik-cadloja__secao + section.ik-cadloja__secao, .ik-cadloja__principal > section.ik-cadloja__secao + [data-corrigir="extras"] { border-top: 1px solid var(--ik-border); padding-top: 28px; margin-top: 28px; } .ik-cadloja__layout section.ik-cadloja__secao.is-corrigir { padding-left: 16px; } .ik-cadloja__principal [data-corrigir="extras"] .card { border: 0; box-shadow: none; padding: 0; background: none; } .ik-cadloja__principal > section.ik-cadloja__secao + [data-corrigir="extras"] { border-top: 1px solid var(--ik-border); } .ik-cadloja__secao-cabeca { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; } .ik-cadloja .ik-cadloja__secao-cabeca h2.ik-cadloja__secao-titulo { margin: 0; line-height: 1.3; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .ik-cadloja__secao-sub { margin: 2px 0 0; font-size: .875rem; line-height: 1.5; color: var(--ik-text-muted); } .ik-cadloja__secao-icone { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--ikh-tenue, #fff1ec); color: var(--ikh-sobre-tenue, #c73104); display: inline-flex; align-items: center; justify-content: center; } .ik-cadloja__secao-icone .ikh-icone { width: 22px; height: 22px; } /* coluna lateral: os campos um embaixo do outro */ .ik-cadloja__pilha { display: grid; gap: 1rem; } .ik-cadloja__pilha > .ik-cadloja__campo { margin-bottom: 0; } /* o gap já separa (13/10/2026: o espaço dobrava) */ .ik-cadloja__seguro { display: flex; gap: 12px; align-items: flex-start; margin: 24px 0 0; padding: 16px; border-radius: 14px; background: var(--ikh-fundo-alt, #fff4ec); } .ik-cadloja__seguro .ik-cadloja__secao-icone { width: 36px; height: 36px; border-radius: 50%; background: #fff; } .ik-cadloja__seguro .ik-cadloja__secao-icone .ikh-icone { width: 18px; height: 18px; } .ik-cadloja__seguro p { margin: 0; font-size: .875rem; line-height: 1.5; color: var(--ik-text-muted); } .ik-cadloja__seguro strong { display: block; margin-bottom: 2px; color: var(--ik-text); font-size: .9375rem; } .ik-cadloja__seguro a { color: var(--ik-accent-fill); text-decoration: underline; text-underline-offset: 2px; } .ik-cadloja__lateral .ik-cadloja__envio { margin-top: 20px; } .ik-cadloja__lateral .ik-cadloja__acoes { margin: 0; } .ik-cadloja__lateral .ik-cadloja__primario { width: 100%; justify-content: center; } .ik-cadloja__primario .ikh-icone { width: 18px; height: 18px; margin-left: 10px; } .ik-cadloja__primario:has(.ikh-icone) { display: inline-flex; align-items: center; justify-content: center; } @media (min-width: 992px) { .ik-cadloja__layout { grid-template-columns: minmax(0, 1fr) clamp(320px, 28vw, 380px); gap: 24px; align-items: start; } .ik-cadloja__lateral { position: sticky; top: calc(var(--ikh-topo-sobra, 78px) + 16px); } } /* o aviso de privacidade e o botão com respiro entre si (a regra das seções no layout zera a margem) */ .ik-cadloja__layout .ik-cadloja__lateral section.ik-cadloja__envio { margin-top: 20px; } /* 13/10/2026 (referência do proprietário): o FORMATO da foto — borda esquerda em onda, um corte diagonal abaixo do subtítulo e o recorte embaixo à esquerda onde ficam os passos; a foto desce até o formulário (que passa por cima) com um brilho laranja no canto de baixo. Máscara SVG (preserveAspectRatio=none) sobre uma caixa nos 44% da direita do CONTEÚDO (dentro do padding lateral do container — nunca passa da margem), do topo da página até o formulário. Medido em 1440 e 2000 px: a onda passa à direita do título e os passos (82% do conteúdo) terminam antes do recorte. A forma pêssego atrás é a mesma onda, 70px mais larga. */ @media (min-width: 992px) { .ik-cadhero__conteudo { position: relative; --ik-cadhero-caixa: calc((100% - 2 * var(--ikh-lateral, 40px)) * .44); } .ik-cadhero__topo { position: static; } .ik-cadhero__foto, .ik-cadhero__topo::before { left: auto; right: var(--ikh-lateral, 40px); width: var(--ik-cadhero-caixa); height: auto; top: calc(-1 * (var(--ikh-topo-sobra, 78px) + var(--ik-cadhero-respiro))); bottom: -110px; border-radius: 0; } .ik-cadhero__foto { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M14,0 H100 V100 H78 C75,100 74,90 73,80 C72,70 70,64 62,62 C45,58 20,56 8,46 C2,40 4,20 14,0 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M14,0 H100 V100 H78 C75,100 74,90 73,80 C72,70 70,64 62,62 C45,58 20,56 8,46 C2,40 4,20 14,0 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; } .ik-cadhero__foto img { object-position: 62% 12%; } .ik-cadhero__foto::after { background: radial-gradient(110% 60% at 100% 100%, rgba(209, 54, 5, .6) 0%, rgba(250, 84, 32, .2) 40%, rgba(250, 84, 32, 0) 65%); } .ik-cadhero__topo::before { width: calc(var(--ik-cadhero-caixa) + 70px); background: linear-gradient(170deg, var(--ikh-pessego) 0%, rgba(255, 230, 216, .6) 70%, rgba(255, 230, 216, .25) 100%); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M10,0 H100 V100 H72 C69,100 68,90 67,80 C66,70 63,64 55,62 C38,58 14,56 4,46 C-1,40 1,20 10,0 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M10,0 H100 V100 H72 C69,100 68,90 67,80 C66,70 63,64 55,62 C38,58 14,56 4,46 C-1,40 1,20 10,0 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; } /* os passos param antes do recorte da foto; número, disco e traço um pouco menores para o texto caber em duas linhas */ .ik-cadhero__passos { max-width: 82%; gap: 12px; } .ik-cadhero__numero { width: 28px; height: 28px; font-size: .8125rem; } .ik-cadhero__icone { width: 52px; height: 52px; } .ik-cadhero__icone .ikh-icone { width: 24px; height: 24px; } .ik-cadhero__passo { gap: 10px; } .ik-cadhero__passo:not(:last-child)::after { flex-basis: 20px; } } /* 13/10/2026 (referência do proprietário): o ícone dos envios é a NUVEM — Lucide "cloud-upload" —, maior e na cor do texto (#37322c, 12,7:1 no branco). Vale para todas as caixas de envio (logo, capa, comprovante, foto e documento do entregador). */ .ik-cadloja { --ik-icone-envio: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 13v8'/%3E%3Cpath d='M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242'/%3E%3Cpath d='m8 17 4-4 4 4'/%3E%3C/svg%3E"); } .ik-cadloja__foto .upload-file-textbox::before, .ik-upload__vazio::before { width: 32px; height: 32px; background: var(--ik-text); } /* 13/10/2026: a página da loja carrega o style.css do site antigo (estiloDoSite), que põe `h1, h2, h3 { font-family: "Montserrat"; letter-spacing: .2px }` — o título "Venda mais com o iKero", os títulos das seções e até o rodapé saíam em outra fonte que a do entregador. Aqui os títulos voltam a herdar a fonte do site (Inter); classes com fonte própria continuam valendo. */ h1, h2, h3 { font-family: inherit; letter-spacing: normal; } /* várias fotos (13/10/2026, data-acumular): a lista das escolhidas, cada uma com "Remover", e o contador "N de 5" */ .ik-upload__lista { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .375rem; } .ik-upload__lista li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .5rem .75rem; border: 1px solid var(--ik-border); border-radius: var(--ik-radius); background: var(--ik-surface); font-size: .9375rem; } .ik-upload__lista-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ik-upload__lista .ik-upload__contador { border: 0; background: none; padding: 0 .25rem; color: var(--ik-text-muted); font-size: .875rem; } /* 13/10/2026: a linha que continua a anterior (Celular embaixo de Nome | Sobrenome; Senha | Confirme embaixo do e-mail) — o respiro entre linhas da mesma seção */ .ik-cadloja__linha + .ik-cadloja__linha--seguinte, .ik-cadloja__campo + .ik-cadloja__linha--seguinte { margin-top: 1rem; } /* ========================================================================== 13/10/2026 (proprietário: "unificar o documento, tudo organizado num formulário"): o cadastro de loja numa coluna só — o Documento entra no fluxo (depois do responsável) e o fechamento (aviso de privacidade, botão e verificação) fica no fim do mesmo cartão. Largura limitada para a leitura (duas colunas de ~430 px por linha) — limite retirado no mesmo dia, ver abaixo. ========================================================================== */ @media (min-width: 992px) { /* 13/10/2026 (proprietário: "do tamanho da página"): sem o limite de 60rem — o cartão ocupa a largura do conteúdo, alinhado ao topo */ .ik-cadloja__layout.ik-cadloja__layout--unico { grid-template-columns: minmax(0, 1fr); } } .ik-cadloja__fechamento { display: grid; gap: 20px; border-top: 1px solid var(--ik-border); padding-top: 28px; margin-top: 28px; } .ik-cadloja__fechamento .ik-cadloja__envio { margin: 0; } /* 14/10/2026: o aviso de privacidade abre o fechamento — sem a margem própria (24 px) somada aos 28 px do separador, o mesmo ritmo das seções */ .ik-cadloja__fechamento .ik-cadloja__seguro { margin-top: 0; } .ik-cadloja__fechamento .ik-cadloja__acoes { margin: 0; justify-content: flex-start; } @media (min-width: 576px) { .ik-cadloja__fechamento .ik-cadloja__primario { min-width: 16rem; } } @media (max-width: 575.98px) { .ik-cadloja__fechamento .ik-cadloja__primario { width: 100%; justify-content: center; } } /* 13/10/2026: com o formulário na largura da página, a verificação (imagem + campo de 5 letras) não estica — fica do tamanho do botão e do aviso */ @media (min-width: 576px) { .ik-cadloja__fechamento .ik-cadloja__verificacao { max-width: 28rem; } } /* 13/10/2026 (proprietário): o "Enviar cadastro" no lado direito do formulário (no celular continua na largura toda) */ .ik-cadloja__fechamento .ik-cadloja__acoes { justify-content: flex-end; } /* ========================================================================== 13/10/2026 (proprietário, imagem de referência) — a confirmação do cadastro enviado (`landing-ikero/_confirmacao-do-cadastro`), a mesma na loja e no entregador: