/* O visual da landing page da KIVA. A paleta e a mesma do painel (docs/design-do-painel.md): verde `mata` para dinheiro e acao, neutro esverdeado `tinta` para todo o resto. O site herda isso de proposito - quem clica em "Entrar" cai numa tela que parece a mesma casa. O que este arquivo NAO faz, e por que: nada de fundo com degrade roxo/azul, nada de vidro fosco, nada de bolha colorida flutuando, nada de emoji como icone. Sao os sinais de site gerado por maquina, e o produto pede o contrario - ele mexe com o dinheiro do lojista. */ /* ---------------------------------------------------------------- fonte */ /* Inter auto-hospedada. O mesmo par de arquivos que o painel usa, copiado para `fontes/`. Nao existe para o Google: a VPS que serve este site nao tem saida para a internet, entao uma fonte remota nao cairia para o plano B - ela simplesmente nunca chegaria. Sao arquivos variaveis, um eixo de peso de 400 a 700. */ @font-face { font-family: 'Inter'; src: url('fontes/inter-latin.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; src: url('fontes/inter-latin-ext.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ---------------------------------------------------------------- tokens */ :root { --mata-50: #f0f9f4; --mata-200: #b9e1cc; --mata-300: #8acaac; --mata-500: #338f6b; --mata-600: #237255; --mata-700: #1d5b46; --tinta-50: #f6f7f6; --tinta-100: #e9ebe9; --tinta-200: #d3d7d4; --tinta-300: #adb4af; --tinta-400: #808b84; --tinta-500: #5f6b64; --tinta-700: #3d4541; --tinta-900: #2c322f; /* Vermelho, so para erro de formulario. O site nao tinha nenhum ate existir o contato - e continua sem usar vermelho em mais nada. */ --alerta-500: #dc4f43; --alerta-700: #a5342c; --tinta-950: #161a18; --papel: #fcfcfb; /* Tres raios em progressao, a mesma escala do painel. Um numero unico aplicado a um botao de 40px e a um cartao de 600px deixa o botao mole e o cartao quadrado: o raio e lido em relacao ao tamanho do objeto. */ --raio: 12px; --raio-campo: 14px; --raio-bloco: 20px; /* Duas sombras sobrepostas, nunca uma so esticada: a curta desenha o contato do objeto com a superficie, a longa e a luz do ambiente contornando ele. Uma sombra unica e grande nao produz nenhuma das duas - produz cinza. */ --sombra-carta: 0 1px 2px rgba(22, 26, 24, 0.06), 0 8px 24px -12px rgba(22, 26, 24, 0.12); --sombra-aparelho: 0 2px 6px rgba(22, 26, 24, 0.1), 0 40px 70px -28px rgba(22, 26, 24, 0.38); --largura: 1140px; } /* ---------------------------------------------------------------- base */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; /* A ancora nao pode parar debaixo do cabecalho fixo. */ scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--papel); color: var(--tinta-700); font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 1rem; line-height: 1.65; -webkit-font-smoothing: antialiased; /* As molduras em perspectiva projetam sombra para fora da caixa. `clip` corta o excesso horizontal sem transformar o num container de rolagem, que e o que `hidden` faria - e ai `position: sticky` no cabecalho pararia de funcionar. */ overflow-x: clip; } h1, h2, h3 { color: var(--tinta-950); font-weight: 600; letter-spacing: -0.021em; line-height: 1.15; margin: 0; text-wrap: balance; } h1 { font-size: clamp(2rem, 1.5rem + 1.9vw, 2.85rem); letter-spacing: -0.028em; line-height: 1.12; } h2 { font-size: clamp(1.65rem, 1.2rem + 1.8vw, 2.4rem); } h3 { font-size: 1.0625rem; letter-spacing: -0.012em; } p { margin: 0; text-wrap: pretty; } a { color: var(--mata-600); text-decoration-thickness: 1px; text-underline-offset: 3px; } img { display: block; max-width: 100%; height: auto; } strong { font-weight: 600; color: var(--tinta-950); } /* O foco tem de aparecer em cima de fundo claro E de fundo escuro. */ :focus-visible { outline: 2px solid var(--mata-500); outline-offset: 3px; border-radius: 4px; } .secao-escura :focus-visible { outline-color: var(--mata-300); } .faixa { width: 100%; max-width: var(--largura); margin-inline: auto; padding-inline: 20px; } .sobrancelha { color: var(--mata-600); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; } /* Atalho de teclado: some da tela, volta ao receber foco. */ .pular { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--tinta-950); color: #fff; padding: 10px 16px; border-radius: var(--raio); font-size: 0.875rem; text-decoration: none; transition: top 0.15s ease; } .pular:focus { top: 12px; } /* ---------------------------------------------------------------- botoes */ .botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; /* Capsula, e nao retangulo arredondado: e a forma que diz "isto voce aperta" numa pagina onde todo o resto e cartao e campo. */ border-radius: 999px; padding: 12px 22px; font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.006em; text-decoration: none; white-space: nowrap; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .botao-principal { background: var(--mata-600); color: #fff; } .botao-principal:hover { background: var(--mata-700); } .botao-discreto { border-color: var(--tinta-200); background: #fff; color: var(--tinta-900); } .botao-discreto:hover { border-color: var(--tinta-300); background: var(--tinta-50); } .botao-p { padding: 8px 15px; font-size: 0.875rem; } .botao-g { padding: 14px 28px; font-size: 1rem; } /* ---------------------------------------------------------------- topo */ .cabecalho { position: sticky; top: 0; z-index: 40; background: rgba(252, 252, 251, 0.92); border-bottom: 1px solid var(--tinta-100); /* Um desfoque de fundo aqui e leitura, nao decoracao: o texto da pagina passa por baixo da barra. Nao e "glassmorphism" - a barra e opaca a 92% e nao tem borda brilhante nem fundo colorido. */ backdrop-filter: saturate(140%) blur(8px); } .cabecalho .faixa { display: flex; align-items: center; gap: 24px; min-height: 64px; } .marca { display: inline-flex; align-items: center; gap: 9px; color: var(--mata-600); text-decoration: none; } .marca-glifo { width: 28px; height: 28px; flex: none; } .marca-nome { color: var(--tinta-950); font-size: 1.0625rem; font-weight: 600; letter-spacing: 0.02em; } .navegacao { display: flex; gap: 26px; margin-inline: auto; } .navegacao a { color: var(--tinta-500); font-size: 0.9375rem; text-decoration: none; } .navegacao a:hover { color: var(--tinta-950); } .canto { display: flex; align-items: center; gap: 14px; margin-inline-start: auto; } .navegacao + .canto { margin-inline-start: 0; } .idiomas { display: flex; gap: 4px; } /* A bandeira sozinha nao e rotulo: quem usa leitor de tela ouviria "botao". Por isso cada uma carrega `aria-label` escrito, o SVG e `aria-hidden`, e o idioma em uso vai em `aria-pressed` - que e o que diz "este esta ligado". O anel verde repete esse estado para quem enxerga, porque estado nao pode ser so diferenca de opacidade. */ .bandeira { display: grid; place-items: center; width: 34px; height: 28px; padding: 0; border: 1px solid var(--tinta-200); border-radius: 5px; background: #fff; cursor: pointer; overflow: hidden; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .bandeira svg { width: 100%; height: 100%; opacity: 0.45; transition: opacity 0.15s ease; } .bandeira:hover svg { opacity: 0.8; } .bandeira[aria-pressed='true'] { border-color: var(--mata-500); box-shadow: 0 0 0 2px var(--mata-200); } .bandeira[aria-pressed='true'] svg { opacity: 1; } /* ---------------------------------------------------------------- hero */ .abertura { padding-block: clamp(48px, 5vw, 88px) clamp(56px, 6vw, 104px); /* Uma unica queda de luz muito discreta, do verde da marca para o papel. Nao e um degrade decorativo: ela existe para separar a abertura do resto da pagina sem precisar de uma linha. */ background: linear-gradient(180deg, var(--mata-50) 0%, var(--papel) 62%); border-bottom: 1px solid var(--tinta-100); } .abertura-grade { display: grid; grid-template-columns: minmax(0, 0.98fr) minmax(0, 1.02fr); gap: clamp(32px, 4vw, 56px); align-items: center; } .abertura-texto h1 { margin-top: 14px; } .destaque { margin-top: 20px; max-width: 34em; font-size: 1.0625rem; color: var(--tinta-700); } .acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .fatos { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; border-top: 1px solid var(--tinta-200); padding-top: 20px; font-size: 0.9375rem; color: var(--tinta-500); } .fatos li { position: relative; padding-inline-start: 22px; } /* Um tracinho verde no lugar de um emoji ou de um icone generico de "check". */ .fatos li::before { content: ''; position: absolute; inset-inline-start: 0; top: 0.72em; width: 12px; height: 2px; background: var(--mata-500); border-radius: 2px; } /* ------------------------------------------------------------- aparelhos */ /* Os aparelhos em perspectiva. A moldura e desenhada em CSS e o conteudo dentro dela e o print de verdade, tirado do painel rodando. Nao ha ilustracao de aparelho em lugar nenhum: desenhar um telefone bonito com uma tela inventada seria justamente o tipo de mentira que o resto do site evita. */ .palco { position: relative; perspective: 1800px; perspective-origin: 62% 46%; } .aparelho { margin: 0; transform-style: preserve-3d; } .vidro { position: relative; overflow: hidden; background: var(--tinta-950); } /* O reflexo: uma faixa clara atravessando o vidro na diagonal. Fica em 5% de opacidade porque a funcao dela e dizer "isto e uma superficie", nao brilhar. */ .vidro::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( 103deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 22%, rgba(255, 255, 255, 0) 46% ); } /* --- computador --- */ .computador { position: relative; transform: rotateY(-15deg) rotateX(7deg) rotateZ(0.6deg); transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1); } .computador .vidro { border: 10px solid #23282a; border-bottom-width: 14px; border-radius: 14px; box-shadow: var(--sombra-aparelho); } /* A base: o trapezio que sai por baixo da tela e ancora o aparelho no chao. */ .pe-computador { position: relative; width: 74%; height: 12px; margin: 0 auto; background: linear-gradient(180deg, #2b3133 0%, #1a1e20 100%); border-radius: 0 0 12px 12px; box-shadow: 0 16px 24px -14px rgba(22, 26, 24, 0.5); } .pe-computador::before { content: ''; position: absolute; left: 50%; top: 0; width: 58px; height: 4px; transform: translateX(-50%); background: #3c4345; border-radius: 0 0 4px 4px; } /* --- celular --- */ .celular { position: absolute; left: -2%; bottom: -9%; width: 26%; transform: rotateY(-15deg) rotateX(7deg) translateZ(72px); transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1); } .celular .vidro { border: 7px solid #23282a; border-radius: 26px; box-shadow: 0 2px 4px rgba(22, 26, 24, 0.12), 0 28px 44px -18px rgba(22, 26, 24, 0.45); } /* O recorte da camera. Dois pixels de detalhe que fazem a moldura ler como telefone sem precisar desenhar botao lateral nenhum. */ .celular .vidro::before { content: ''; position: absolute; z-index: 2; left: 50%; top: 6px; width: 30%; height: 8px; transform: translateX(-50%); background: #23282a; border-radius: 0 0 8px 8px; } /* Ao passar o mouse, o conjunto se endireita um pouco: mostra que aquilo e uma tela de verdade e nao uma figura. */ .palco:hover .computador { transform: rotateY(-9deg) rotateX(4deg) rotateZ(0.3deg); } .palco:hover .celular { transform: rotateY(-9deg) rotateX(4deg) translateZ(78px); } /* ---------------------------------------------------------------- secoes */ .secao { padding-block: clamp(56px, 6vw, 104px); } .secao-clara { background: var(--tinta-50); border-block: 1px solid var(--tinta-100); } .titulo-secao { max-width: 44ch; } .titulo-secao p { margin-top: 16px; color: var(--tinta-500); font-size: 1.0625rem; } /* --- passos --- */ .passos { list-style: none; margin: clamp(36px, 4vw, 56px) 0 0; padding: 0; border-top: 1px solid var(--tinta-200); } .passos > li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 0 24px; padding-block: 26px; border-bottom: 1px solid var(--tinta-100); } .passo-n { color: var(--mata-600); font-size: 0.875rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.06em; padding-top: 2px; } .passos p { margin-top: 8px; max-width: 62ch; color: var(--tinta-500); } /* --- limites --- */ .secao-escura { background: var(--tinta-950); color: var(--tinta-300); } .secao-escura h2, .secao-escura dt { color: #fff; } .secao-escura .titulo-secao p { color: var(--tinta-300); } .secao-escura strong { color: #fff; } .limites-grade { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 72px); align-items: start; } .limites-grade .titulo-secao { position: sticky; top: 104px; } .limites { margin: 0; display: grid; gap: 28px; } .limites > div { border-inline-start: 2px solid rgba(255, 255, 255, 0.12); padding-inline-start: 20px; } .limites dt { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.012em; line-height: 1.3; } .limites dd { margin: 8px 0 0; max-width: 58ch; font-size: 0.9375rem; } /* --- mostra do painel --- */ .mostra { display: grid; gap: clamp(64px, 8vw, 112px); margin-top: clamp(48px, 6vw, 88px); perspective: 2200px; } .computador-solto { max-width: 880px; } .inclina-direita { margin-inline-end: auto; transform: rotateY(-11deg) rotateX(5deg); } .inclina-esquerda { margin-inline-start: auto; transform: rotateY(11deg) rotateX(5deg); } .inclina-direita:hover, .inclina-esquerda:hover { transform: rotateY(0deg) rotateX(2deg); } .mostra figcaption { margin-top: 22px; color: var(--tinta-500); font-size: 0.9375rem; max-width: 46ch; } .inclina-esquerda figcaption { margin-inline-start: auto; text-align: end; } .mostra-celular { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: center; max-width: 880px; margin-top: clamp(64px, 8vw, 104px); padding-top: clamp(48px, 5vw, 72px); border-top: 1px solid var(--tinta-100); perspective: 1400px; } .celular-solto { position: static; width: 100%; transform: rotateY(-13deg) rotateX(5deg); transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1); } .celular-solto:hover { transform: rotateY(-5deg) rotateX(2deg); } .mostra-celular-texto p { margin-top: 12px; max-width: 48ch; color: var(--tinta-500); } /* --- requisitos --- */ .requisitos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; margin-top: clamp(36px, 4vw, 56px); background: var(--tinta-200); border: 1px solid var(--tinta-200); border-radius: var(--raio); overflow: hidden; } .requisitos > div { background: #fff; padding: clamp(22px, 2.4vw, 32px); } .requisitos p { margin-top: 10px; color: var(--tinta-500); font-size: 0.9375rem; } /* --- fechamento --- */ .fechamento { padding-block: clamp(64px, 7vw, 112px); text-align: center; border-top: 1px solid var(--tinta-100); } .fechamento p { margin-inline: auto; margin-top: 16px; max-width: 48ch; color: var(--tinta-500); } .fechamento .acoes { justify-content: center; margin-top: 32px; } /* ---------------------------------------------------------------- rodape */ .rodape { background: var(--tinta-50); border-top: 1px solid var(--tinta-100); padding-block: clamp(40px, 4vw, 56px) 24px; font-size: 0.875rem; } .rodape-grade { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.7fr) minmax(0, 1.4fr); gap: clamp(28px, 4vw, 56px); align-items: start; } .marca-rodape .marca-glifo { width: 24px; height: 24px; } .rodape-titulo { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-500); } .rodape-linha { margin-top: 10px; color: var(--tinta-500); line-height: 1.6; } .rodape-fim { margin-top: clamp(32px, 4vw, 48px); padding-top: 20px; border-top: 1px solid var(--tinta-200); color: var(--tinta-400); font-size: 0.8125rem; } /* ------------------------------------------------------------ responsivo */ @media (max-width: 1000px) { .navegacao { display: none; } .abertura-grade, .limites-grade { grid-template-columns: minmax(0, 1fr); } .limites-grade .titulo-secao { position: static; } .palco { margin-top: 12px; perspective-origin: 55% 50%; } .rodape-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { html { scroll-padding-top: 76px; } .faixa { padding-inline: 16px; } /* Abaixo de 760px a perspectiva quase some. Com a tela estreita, um `rotateY` de 15 graus rouba largura util do print e ainda empurra a sombra para fora da pagina - vira barra de rolagem horizontal. */ .computador, .inclina-direita, .inclina-esquerda, .palco:hover .computador, .inclina-direita:hover, .inclina-esquerda:hover { transform: rotateX(4deg); } .celular, .palco:hover .celular { width: 33%; left: -6px; bottom: -9%; transform: rotateX(4deg) translateZ(40px); } .celular-solto, .celular-solto:hover { transform: rotateX(3deg); } .passos > li { grid-template-columns: minmax(0, 1fr); gap: 6px; padding-block: 22px; } .passo-n { padding-top: 0; } .requisitos { grid-template-columns: minmax(0, 1fr); } .mostra-celular { grid-template-columns: minmax(0, 1fr); justify-items: start; } .celular-solto { max-width: 200px; } .inclina-esquerda figcaption { margin-inline-start: 0; text-align: start; } .rodape-grade { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 420px) { .cabecalho .faixa { gap: 12px; } .marca-nome { font-size: 1rem; } .acoes .botao { flex: 1 1 100%; } .celular, .palco:hover .celular { width: 34%; } } /* Quem pediu menos movimento no sistema nao ganha rolagem suave nem os aparelhos se endireitando ao passar o mouse. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* ── Formulario de contato ────────────────────────────────────────────────── Ele existe porque o dominio nao recebe e-mail: sem isto, quem ainda nao e cliente nao tem como escrever. */ .faixa-estreita { max-width: 34rem; } .formulario { margin-top: 2rem; display: grid; gap: 1.5rem; text-align: left; } /* ── O campo, com o rotulo por dentro ────────────────────────────────────── O mesmo desenho do painel, e pelo mesmo motivo: com o rotulo em cima, cada campo ocupa duas linhas e a coluna vira uma escada de textinhos. Com ele dentro, cada campo e um objeto so. E o rotulo nao some quando a pessoa escreve - encolhe e sobe. E a diferenca entre isto e usar `placeholder` como rotulo: o placeholder some no primeiro caractere, e quem voltou para conferir nao sabe mais o que era cada caixa. O gatilho e `:has()` com `:placeholder-shown`, sem uma linha de JavaScript. Por isso todo campo carrega `placeholder=" "` no HTML: sem o atributo, `:placeholder-shown` nunca casa e o rotulo fica preso em cima. */ .campo { position: relative; } /* O estado NORMAL do rotulo e o de cima; o de baixo e a excecao, logo abaixo. */ .campo label { position: absolute; top: 0.5rem; left: 1rem; z-index: 1; font-size: 0.6875rem; font-weight: 500; line-height: 1; letter-spacing: 0.01em; color: var(--tinta-500); pointer-events: none; transform-origin: left top; /* `transform` e nao `top`/`font-size`: os dois ultimos remontam a caixa a cada quadro da animacao. */ transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1), color 180ms cubic-bezier(0.16, 1, 0.3, 1); } /* A excecao: campo vazio e sem foco. O rotulo desce e cresce ate o tamanho do texto que vai ser digitado ali - 0.9375rem / 0.6875rem = 1.3636. */ .campo:has(input:placeholder-shown:not(:focus)) label { transform: translateY(0.6875rem) scale(1.3636); color: var(--tinta-400); } /* A caixa de texto longo e alta: ali o repouso e no alto, nao no meio. */ .campo:has(textarea:placeholder-shown:not(:focus)) label { transform: translateY(0.75rem) scale(1.3636); color: var(--tinta-400); } .campo:has(:is(input, textarea):focus) label { color: var(--mata-700); } .campo:has([aria-invalid='true']) label { color: var(--alerta-700); } .campo input, .campo textarea { width: 100%; /* O espaco de cima e maior para caber o rotulo encolhido. A altura total e a mesma que teria com o respiro dividido em partes iguais. */ padding: 1.5rem 1rem 0.5rem; font: inherit; font-size: 0.9375rem; color: var(--tinta-900); background: #fff; border: 1px solid var(--tinta-200); border-radius: var(--raio-campo); transition: border-color 180ms ease, box-shadow 180ms ease; } .campo input:hover:not(:focus), .campo textarea:hover:not(:focus) { border-color: var(--tinta-300); } .campo textarea { resize: vertical; min-height: 8rem; padding-top: 1.75rem; padding-bottom: 0.875rem; } /* O placeholder so aparece com o campo em foco. Sem isto ele e desenhado embaixo do rotulo em repouso e os dois textos se sobrepoem. */ .campo input::placeholder, .campo textarea::placeholder { opacity: 0; transition: opacity 180ms ease; } .campo input:focus::placeholder, .campo textarea:focus::placeholder { opacity: 1; } .campo input:focus, .campo textarea:focus { outline: none; border-color: var(--mata-500); box-shadow: 0 0 0 4px rgba(51, 143, 107, 0.16); } .campo input[aria-invalid='true'], .campo textarea[aria-invalid='true'] { border-color: var(--alerta-500); } .campo input[aria-invalid='true']:focus, .campo textarea[aria-invalid='true']:focus { box-shadow: 0 0 0 4px rgba(220, 79, 67, 0.16); } /* Alinhadas com o TEXTO do campo, e nao com a borda dele: a dica que comeca 4px a esquerda do valor le como desalinho, nao como hierarquia. */ .campo-dica, .campo-contagem { margin: 0.4rem 0 0; padding: 0 1rem; font-size: 0.75rem; color: var(--tinta-400); } .campo-contagem { text-align: right; font-variant-numeric: tabular-nums; } .campo-erro { margin: 0.4rem 0 0; padding: 0 1rem; font-size: 0.75rem; font-weight: 500; color: var(--alerta-700); } /* A isca. Fora da tela e fora do fluxo, sem `display: none` - alguns robos pulam campo escondido por display e preenchem os demais. */ .isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-resultado { margin: 0.25rem 0 0; font-size: 0.875rem; font-weight: 500; min-height: 1.25rem; } .form-resultado[data-tipo='ok'] { color: var(--mata-700); } .form-resultado[data-tipo='erro'] { color: var(--alerta-700); } @media (max-width: 40rem) { /* No celular o alvo cresce: 0.7rem de respiro da 40px de altura, e o dedo precisa de 44. */ .campo input, .campo textarea { /* 16px impede o iOS de dar zoom ao focar um campo - abaixo disso ele aproxima a pagina e o visitante perde o enquadramento. O respiro ja vem do espaco reservado ao rotulo, entao so a fonte muda aqui. */ font-size: 1rem; } /* A fonte do campo cresceu de 0.9375rem para 1rem; a escala do rotulo em repouso tem de acompanhar, senao ele para de casar com o texto que substitui. 1 / 0.6875 = 1.4545. */ .campo:has(input:placeholder-shown:not(:focus)) label { transform: translateY(0.6875rem) scale(1.4545); } .campo:has(textarea:placeholder-shown:not(:focus)) label { transform: translateY(0.75rem) scale(1.4545); } }