/* ========================================================================== VALTE | Landing institucional Tokens > base > componentes > seções > responsivo > movimento ========================================================================== RELAÇÃO COM A LANDING DO HIGHCLIN O bloco de TEMA abaixo (tokens, escuro e claro) é o mesmo de `landing-highclin/assets/styles.css`, deliberadamente. As duas páginas são da mesma casa e precisam parecer da mesma casa: mesmo roxo, mesmos degraus de superfície, mesma régua de contraste já medida. O que NÃO veio junto: o mock de produto, o palco 3D, a grade de planos e a tabela de comparação. A VALTE não vende um produto de prateleira, e copiar a estrutura do HighClin faria as duas páginas parecerem o mesmo template com o texto trocado — que é exatamente o que uma empresa de consultoria não pode transmitir. Quando um token mudar aqui e lá, mudar nos dois. São duas páginas estáticas servidas de pastas diferentes; não existe build para compartilhar arquivo, e inventar um só para isso custaria mais do que a duplicação. ========================================================================== */ /* ========================================================================== TEMA ========================================================================== O CLARO É O PADRÃO, e isso é uma decisão, não um detalhe. Três motivos, na ordem de importância: 1. QUEM LÊ. Dono de empresa em Boa Vista, no celular, muitas vezes na rua. Sob sol forte, fundo escuro é objetivamente mais difícil de ler. A página não pode pedir esforço de quem ainda não decidiu ficar nela. 2. O QUE A COMBINAÇÃO PASSOU A SIGNIFICAR. Preto com roxo saturado, brilho radial e grade de fundo virou a assinatura visual de página gerada por IA. Não é o escuro sozinho: é a receita. Quem vê, reconhece, e a credibilidade cai antes da primeira frase ser lida. 3. O MEIO DIZ O QUE A EMPRESA VENDE. A VALTE vende clareza e ordem. Escuro com neon comunica ferramenta de programador. Claro, calmo e tipográfico comunica gente que organiza as coisas. O roxo continua: ele é a marca. Mas saiu da ATMOSFERA e virou ACENTO. Está no símbolo, num botão e nos links, nunca no fundo. O escuro segue existindo, no botão de alternar, para quem preferir. POR QUE O CLARO É `:root` E NÃO UM `[data-theme]` Se o claro fosse a exceção aplicada por atributo, a página nasceria escura e dependeria do script do para virar. Sem JavaScript, ou antes dele, o visitante veria o tema errado. O padrão de verdade tem que viver no CSS. As cores que se desdobram em duas variáveis (--lavender/--accent-text) existem porque o lilás pastel foi feito para brilhar sobre fundo escuro: como enfeite funciona nos dois temas, como cor de LETRA sobre branco reprova no contraste mínimo. Por isso todo uso de texto passa pela variável "-text", medida em cada tema. ========================================================================== */ :root{ /* Marca. O mesmo roxo do logo, nos dois temas. */ --brand: #4B04F6; --brand-hover: #5C1FFF; --brand-soft: #7B47FF; --lavender: #BA9DF7; /* Superfícies. O fundo não é branco puro: é branco com um toque de lavanda (#FBFAFE), o mesmo recurso de Stripe e Linear para o claro não parecer documento de editor de texto. */ --bg: #FBFAFE; --bg-2: #F4F2FA; --surface: #FFFFFF; --surface-2: #F4F2FA; /* Texto */ --text: #17152B; --text-muted: #55516E; /* 7.3:1 sobre --bg */ --text-faint: #67627D; /* 5.58:1 sobre --bg (medido). Não clarear: 4.5 é o piso */ /* Roxo mais fechado que --lavender: aqui ele precisa carregar texto. */ --accent-text: #6B2FE0; --ok-text: #0F6340; /* O âmbar do rótulo de vazamento no mapa. O #F5B544 sobre branco dá 1,75:1 (medido no navegador): some. Amarelo é a cor que mais perde contraste ao clarear o fundo, então aqui ele vira âmbar queimado, 5,9:1. */ --warn-text: #8A5A00; /* Linhas */ --line: rgba(23,17,50,.09); --line-strong: rgba(23,17,50,.15); /* Tinta neutra: o "preto 3,5%/6%" de botão fantasma e chip sem cor própria. */ --tint-1: rgba(23,17,50,.035); --tint-2: rgba(23,17,50,.06); --header-bg: rgba(251,250,254,.75); --header-bg-stuck: rgba(251,250,254,.92); /* Texto sobre um fundo que é SEMPRE --brand: branco nos dois temas, porque --brand nunca clareia. */ --on-brand: #fff; --err: #C4293B; --ok: #3DD68C; --warn: #F5B544; --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px; --radius:12px; --radius-lg:20px; --shell:1200px; --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --ease:cubic-bezier(.22,.61,.36,1); } /* ---------- Reset / base ---------- */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } } body{ margin:0; background:var(--bg); color:var(--text); font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; /* A transição de cor saiu junto com o botão de tema: ela existia só para suavizar a troca. Sem nada para trocar, ela virava um atraso invisível em toda repintura. */ } h1,h2,h3,h4{ margin:0; line-height:1.14; letter-spacing:-.022em; font-weight:600; text-wrap:balance; } p{ margin:0; } ul,ol{ margin:0; padding:0; list-style:none; } img,svg{ max-width:100%; } a{ color:inherit; } :focus-visible{ outline:2px solid var(--lavender); outline-offset:3px; border-radius:4px; } .skip-link{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--brand); color:#fff; padding:12px 18px; } .skip-link:focus{ left:0; } .shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:24px; } .shell-narrow{ max-width:800px; } /* ---------- Barra de progresso de leitura ---------- */ .scroll-progress{ position:fixed; inset:0 0 auto 0; height:2px; z-index:150; background:transparent; pointer-events:none; } .scroll-progress span{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--brand),var(--lavender)); } /* ---------- Logo ---------- A marca da VALTE é o "V" de duas faces: a haste sólida e o pé mais claro. As cores são fixas (não usam token) porque são a marca, e a marca não muda entre o tema escuro e o claro. Os dois roxos têm contraste suficiente contra os dois fundos. */ .brand{ display:inline-flex; align-items:center; gap:12px; text-decoration:none; } .valte-mark{ height:26px; width:auto; display:block; } .valte-stem{ fill:#5C1FFF; } .valte-foot{ fill:#A67EFA; } /* O wordmark é vetor, não texto: ver o comentário no index.html sobre o A sem travessão, o E cortado e o chanfro do L. A ALTURA É 11px E NÃO A DO LOCKUP ORIGINAL. No arquivo da marca as letras têm 121px contra 453px do símbolo, ou seja 27% da altura dele. Aplicado aqui daria 7px, ilegível. O lockup foi desenhado para aparecer grande, sozinho no meio de um cartão; num cabeçalho de 70px as duas peças precisam se equilibrar entre si, não reproduzir a proporção do papel timbrado. `width:auto` mantém a razão 934:121 travada: esticar um logotipo é o erro que mais se enxerga e menos se percebe ao cometer. */ .valte-word{ height:11px; width:auto; display:block; color:var(--text); } /* ---------- Botões ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 26px; border:1px solid transparent; border-radius:9px; font:inherit; font-size:15px; font-weight:600; letter-spacing:-.01em; text-decoration:none; cursor:pointer; white-space:nowrap; transition:background-color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease); } .btn:active{ transform:translateY(1px); } .btn-primary{ background:var(--brand); color:var(--on-brand); box-shadow:0 1px 0 rgba(255,255,255,.16) inset; } .btn-primary:hover{ background:var(--brand-hover); box-shadow:0 1px 0 rgba(255,255,255,.2) inset, 0 10px 28px -12px var(--brand); } .btn-outline{ background:transparent; color:var(--text); border-color:var(--line-strong); } .btn-outline:hover{ border-color:var(--lavender); background:rgba(186,157,247,.06); } .btn-sm{ min-height:44px; padding:0 18px; font-size:14px; } .btn-block{ width:100%; } /* ---------- Rótulos e cabeçalhos de seção ---------- */ .kicker{ display:flex; align-items:center; gap:12px; margin-bottom:var(--s-5); font-size:13px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); } .kicker-num{ font-family:var(--mono); font-size:12px; letter-spacing:0; color:var(--accent-text); padding-right:12px; border-right:1px solid var(--line-strong); } .section{ padding-block:var(--s-9); } .section-head{ max-width:760px; margin-bottom:var(--s-8); } .section-title{ font-size:clamp(29px,3.9vw,44px); } .section-sub{ margin-top:var(--s-4); font-size:clamp(16px,1.6vw,18px); color:var(--text-muted); } /* Linha curta que fecha uma seção. Usada em três seções da página inteira, de propósito: se toda seção terminasse com um aforismo, viraria tique. */ .section-close{ margin-top:var(--s-7); padding-top:var(--s-5); border-top:1px solid var(--line); font-size:16.5px; color:var(--text-muted); max-width:62ch; } /* ========================================================================== HEADER ========================================================================== */ .site-header{ position:sticky; top:0; z-index:100; background:var(--header-bg); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid transparent; transition:border-color .25s var(--ease), background-color .25s var(--ease); } .site-header.is-stuck{ border-bottom-color:var(--line); background:var(--header-bg-stuck); } .header-inner{ display:flex; align-items:center; justify-content:space-between; height:70px; gap:var(--s-4); } .header-actions{ display:flex; align-items:center; gap:var(--s-3); margin-left:auto; } /* ========================================================================== HERO ========================================================================== */ .hero{ position:relative; padding-block:clamp(56px,8vw,104px) clamp(60px,7vw,96px); overflow:hidden; } /* O halo roxo atrás do título FOI REMOVIDO, e o seletor fica aqui só para documentar a decisão: brilho radial saturado sobre o fundo é metade da receita visual que faz uma página ser lida como "gerada por IA" (a outra metade é o fundo escuro com grade). Numa empresa que vende clareza, um borrão colorido atrás do texto trabalha contra o argumento. O que ocupa o lugar dele é o próprio espaço em branco. Se um dia fizer falta, o caminho não é trazer o halo de volta: é dar mais respiro ao título. */ .hero-glow{ display:none; } .hero-inner{ position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,72px); align-items:center; } /* A assinatura da marca, acima do titulo. Pequena e em maiuscula com espacamento largo: e o tratamento que faz um texto curto ler como ASSINATURA e nao como subtitulo — sem competir com o titulo, que e quem precisa ser lido primeiro. */ .hero-assinatura{ margin-bottom:var(--s-4); font-size:12.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-text); } .hero-title{ font-size:clamp(32px,4.4vw,53px); font-weight:600; letter-spacing:-.032em; line-height:1.1; } .hero-sub{ margin-top:var(--s-5); max-width:56ch; font-size:clamp(16.5px,1.7vw,18.5px); color:var(--text-muted); } .hero-actions{ display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-7); } .hero-reassure{ margin-top:var(--s-5); font-size:14px; color:var(--text-faint); max-width:48ch; } /* Linha de escopo no pé do herói: o que a VALTE faz, sem virar menu. */ .hero-scope{ display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-4); margin-top:var(--s-7); padding-top:var(--s-5); border-top:1px solid var(--line); font-size:13.5px; color:var(--text-faint); } .hero-scope li{ display:inline-flex; align-items:center; gap:var(--s-2); } .hero-scope li::before{ content:""; width:4px; height:4px; border-radius:50%; background:var(--lavender); flex:none; } /* ---------- Mapa do fluxo de informação ---------- O painel do herói. Não é print de sistema: a VALTE não vende tela, vende o diagnóstico. Então o visual é o próprio ENTREGÁVEL do diagnóstico, um mapa de onde a informação passa e onde ela vaza. É ilustrativo e a página diz isso na etiqueta ("exemplo"). Sem número inventado: os rótulos nomeiam TIPOS de perda, não medem o negócio de ninguém. */ .map{ position:relative; border:1px solid var(--line); border-radius:var(--radius-lg); background:linear-gradient(180deg,var(--surface),var(--bg-2)); padding:var(--s-6) var(--s-6) var(--s-5); box-shadow:0 30px 70px -40px rgba(0,0,0,.65); } .map-head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-4); padding-bottom:var(--s-5); margin-bottom:var(--s-5); border-bottom:1px solid var(--line); } .map-title{ font-size:14.5px; font-weight:600; letter-spacing:-.01em; } .map-tag{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); } .map-flow{ display:grid; gap:0; } .map-step{ position:relative; display:grid; grid-template-columns:26px 1fr; align-items:start; gap:var(--s-4); padding-block:var(--s-3); } /* A linha que liga as etapas. Desenhada como pseudo-elemento do passo, e não como uma borda contínua, para o último passo não puxar traço para fora. */ .map-step::before{ content:""; position:absolute; left:12px; top:26px; bottom:-8px; width:1px; background:var(--line-strong); } .map-step:last-child::before{ display:none; } .map-dot{ position:relative; z-index:1; width:25px; height:25px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--line-strong); background:var(--surface); font-family:var(--mono); font-size:10.5px; color:var(--text-faint); } .map-name{ font-size:15px; font-weight:500; letter-spacing:-.01em; } /* O rótulo do vazamento. Cor de sinal, não de enfeite: é o ponto que a página inteira quer que a pessoa reconheça. */ .map-leak{ display:inline-flex; align-items:center; gap:7px; margin-top:5px; font-size:12.5px; color:var(--warn-text); } .map-leak::before{ content:""; width:5px; height:5px; border-radius:50%; background:currentColor; flex:none; box-shadow:0 0 0 3px rgba(245,181,68,.14); } .map-foot{ margin-top:var(--s-5); padding-top:var(--s-4); border-top:1px solid var(--line); font-size:12.5px; color:var(--text-faint); } /* ========================================================================== 01 · A PERDA INVISÍVEL ========================================================================== Lista vertical, sem card e sem ícone. A grade de cinco cartões saiu junto com o texto que os enchia: cartão com uma frase dentro fica vazio, e cinco molduras lado a lado pedem que o olho compare em vez de reconhecer. Aqui o que importa é a VELOCIDADE. São cinco frases, lidas de cima para baixo em poucos segundos, com a etiqueta à esquerda dando o nome da perda sem competir pela atenção. A régua fina entre elas basta para separar. A frase vem em corpo grande e na cor cheia; a etiqueta, pequena e apagada. É o inverso do "título grande, texto pequeno" de propósito: quem manda nesta seção é a cena, não a categoria. */ .cenas{ display:grid; gap:0; max-width:900px; border-top:1px solid var(--line); } .cena{ display:grid; grid-template-columns:190px 1fr; gap:var(--s-5); align-items:baseline; padding-block:var(--s-5); border-bottom:1px solid var(--line); } .cena-tag{ font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); } .cena p{ font-size:clamp(17px,2vw,20px); line-height:1.45; letter-spacing:-.018em; text-wrap:balance; } @media (max-width:720px){ /* No celular a etiqueta vai para cima da frase: 190px de coluna fixa comeriam metade da tela e quebrariam a cena em três linhas. */ .cena{ grid-template-columns:1fr; gap:6px; } } /* CTA no meio da página, no fim da seção da perda. É o pico da leitura: a pessoa acabou de reconhecer cinco perdas e é aqui que ela decide. */ .midcta{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s-5); margin-top:var(--s-7); padding:var(--s-6) clamp(24px,4vw,40px); border:1px solid var(--line-strong); border-radius:var(--radius-lg); background:linear-gradient(120deg, rgba(75,4,246,.10), var(--surface) 62%); } .midcta p{ font-size:17px; max-width:52ch; letter-spacing:-.012em; } .midcta-actions{ display:flex; flex-wrap:wrap; gap:var(--s-3); } /* ========================================================================== 03 · A PROVA ========================================================================== */ /* As colunas eram 1.25fr/.75fr, do tempo em que a direita era um cartão de texto. Com a tela do produto ali, .75fr deixava os três indicadores espremidos e quebrava "R$ 38.400" em duas linhas. Agora é quase meio a meio: o mock precisa de largura para ser lido como interface, e não como miniatura. */ .proof{ display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(32px,4vw,52px); align-items:start; } .proof-body p + p{ margin-top:var(--s-5); } .proof-body p{ font-size:17px; color:var(--text-muted); } .proof-body p:first-child{ color:var(--text); font-size:18px; } /* ---------- A tela do HighClin ---------- Substituiu o cartão "Quem conduz", que trazia nome e formação de uma pessoa. A VALTE é mais de uma pessoa, e a divisão real de papéis entre os sócios não cabe numa landing page sem virar organograma. Este mock segue o TEMA DA PÁGINA, ao contrário do que a landing do HighClin faz com o dela (lá o mock é sempre escuro, porque o produto é escuro). Aqui um painel escuro dentro de uma página clara traria de volta justamente o contraste que a página acabou de abandonar. */ .app{ border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); overflow:hidden; box-shadow:0 24px 60px -40px rgba(23,17,50,.35); } .app-bar{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); padding:var(--s-4) var(--s-5); border-bottom:1px solid var(--line); background:var(--bg-2); } .app-name{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; } .app-name .hc-mark{ height:14px; color:var(--brand); } .app-tag{ font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); } .app-body{ display:grid; grid-template-columns:118px 1fr; min-height:250px; } .app-side{ display:grid; align-content:start; gap:2px; padding:var(--s-4) var(--s-3); border-right:1px solid var(--line); } .app-side span{ padding:7px 10px; border-radius:7px; font-size:12.5px; color:var(--text-faint); } .app-side .is-on{ background:var(--tint-2); color:var(--text); font-weight:500; } .app-main{ padding:var(--s-5); display:grid; gap:var(--s-5); align-content:start; } .app-tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-2); } .app-tile{ padding:10px 12px; border:1px solid var(--line); border-radius:10px; } .app-tile b{ display:block; font-size:10px; font-weight:500; color:var(--text-faint); } /* `nowrap` porque "R$ 38.400" quebrando em duas linhas fazia o cartão do meio crescer e desalinhar a fileira inteira. Valor de indicador ou cabe numa linha ou o cartão está estreito demais. */ .app-tile strong{ display:block; margin-top:3px; font-size:15px; letter-spacing:-.02em; white-space:nowrap; } .app-chart{ display:grid; gap:var(--s-3); } .app-chart-title{ font-size:11px; color:var(--text-faint); } .app-bars{ display:flex; align-items:flex-end; gap:7px; height:78px; } /* As barras são vazios com a altura no atributo style. Um elemento por barra, sem texto: é desenho, e desenho não precisa de marcação semântica. */ .app-bars i{ flex:1; border-radius:4px 4px 2px 2px; background:linear-gradient(180deg, var(--brand-soft), var(--brand)); opacity:.85; } .app-bars i:last-child{ opacity:1; } .linkout{ display:inline-flex; align-items:center; gap:7px; margin-top:var(--s-5); font-size:15px; font-weight:600; color:var(--accent-text); text-decoration:none; } .linkout::after{ content:"\2192"; transition:transform .18s var(--ease); } .linkout:hover::after{ transform:translateX(3px); } .linkout:hover{ text-decoration:underline; } /* ========================================================================== 04 · O DIAGNÓSTICO ========================================================================== */ .trail{ display:grid; gap:0; max-width:860px; } .trail-step{ position:relative; display:grid; grid-template-columns:44px 1fr; gap:var(--s-5); padding-bottom:var(--s-7); } .trail-step:last-child{ padding-bottom:0; } .trail-step::before{ content:""; position:absolute; left:21px; top:44px; bottom:0; width:1px; background:var(--line-strong); } .trail-step:last-child::before{ display:none; } .trail-num{ position:relative; z-index:1; width:43px; height:43px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--line-strong); background:var(--surface); font-family:var(--mono); font-size:13px; color:var(--accent-text); } .trail-step h3{ font-size:20px; padding-top:9px; } .trail-step p{ margin-top:var(--s-3); font-size:16px; color:var(--text-muted); max-width:62ch; } .deliverable{ margin-top:var(--s-8); padding:var(--s-6) clamp(24px,4vw,40px); border:1px solid var(--line-strong); border-radius:var(--radius-lg); background:var(--surface); } .deliverable h3{ font-size:19px; } .deliverable p{ margin-top:var(--s-4); font-size:16px; color:var(--text-muted); } .deliverable .trust{ margin-top:var(--s-5); padding-top:var(--s-5); border-top:1px solid var(--line); font-size:15.5px; color:var(--text); } /* ========================================================================== 05 · A EXECUÇÃO ========================================================================== */ .fronts{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-5); } .front{ padding:var(--s-6); border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); transition:border-color .25s var(--ease); } .front:hover{ border-color:var(--line-strong); } .front-num{ display:block; margin-bottom:var(--s-4); font-family:var(--mono); font-size:12px; color:var(--accent-text); } .front h3{ font-size:19px; } .front p{ margin-top:var(--s-4); font-size:15.5px; color:var(--text-muted); } /* ========================================================================== 06 · O ACORDO ========================================================================== */ .refusals{ display:grid; gap:0; max-width:860px; border-top:1px solid var(--line); } .refusal{ display:grid; grid-template-columns:auto 1fr; gap:var(--s-4); padding-block:var(--s-5); border-bottom:1px solid var(--line); } /* O "x" é desenhado, não é caractere: o × de fonte muda de tamanho e de posição vertical entre sistemas, e ficaria torto em metade das telas. */ .refusal-x{ flex:none; width:20px; height:20px; margin-top:4px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--line-strong); color:var(--text-faint); } .refusal-x svg{ width:9px; height:9px; } .refusal b{ font-weight:600; letter-spacing:-.015em; } .refusal span{ color:var(--text-muted); } .mismatch{ margin-top:var(--s-7); padding:var(--s-6); border:1px dashed var(--line-strong); border-radius:var(--radius-lg); background:var(--tint-1); max-width:860px; } .mismatch h3{ font-size:16px; color:var(--text-muted); font-weight:500; } .mismatch ul{ margin-top:var(--s-4); display:grid; gap:var(--s-3); } .mismatch li{ display:grid; grid-template-columns:auto 1fr; gap:var(--s-3); font-size:15.5px; color:var(--text-muted); } .mismatch li::before{ content:""; width:5px; height:5px; margin-top:10px; border-radius:50%; background:var(--text-faint); } /* ========================================================================== 07 · DÚVIDAS ========================================================================== */ .faq{ display:grid; gap:var(--s-3); max-width:900px; } .faq-item{ border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); overflow:hidden; } .faq-item summary{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); min-height:60px; padding:var(--s-4) var(--s-5); font-size:16.5px; font-weight:500; cursor:pointer; list-style:none; } .faq-item summary::-webkit-details-marker{ display:none; } .faq-item summary::after{ content:""; flex:none; width:9px; height:9px; border-right:2px solid var(--text-faint); border-bottom:2px solid var(--text-faint); rotate:45deg; transition:rotate .2s var(--ease); } .faq-item[open] summary::after{ rotate:225deg; } .faq-item p{ padding:0 var(--s-5) var(--s-5); font-size:15.5px; color:var(--text-muted); } /* ========================================================================== 07 · POR ONDE COMEÇAR ========================================================================== Os dois caminhos. Ficam LADO A LADO e com o mesmo peso visual de propósito: se um deles fosse maior ou mais colorido, viraria "o certo" e o outro "o consolo", e quem se encaixa no segundo sairia achando que a VALTE preferia não atendê-lo. O que os diferencia é só o botão: cheio no primeiro, contornado no segundo. Não porque um valha mais, e sim porque o formulário é o destino padrão da página e o botão cheio já é a cor dele em todo o resto. */ .paths{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-5); } .path{ display:flex; flex-direction:column; padding:var(--s-6) clamp(24px,3vw,34px); border:1px solid var(--line-strong); border-radius:var(--radius-lg); background:var(--surface); } .path-num{ display:block; margin-bottom:var(--s-4); font-family:var(--mono); font-size:12px; color:var(--accent-text); } .path h3{ font-size:21px; } .path > p{ margin-top:var(--s-4); font-size:16px; color:var(--text-muted); } .path-list{ margin-top:var(--s-5); padding-top:var(--s-5); border-top:1px solid var(--line); display:grid; gap:11px; } .path-list li{ display:grid; grid-template-columns:auto 1fr; gap:10px; font-size:15px; color:var(--text-muted); } .path-list li::before{ content:""; width:5px; height:5px; margin-top:9px; border-radius:50%; background:var(--accent-text); } /* `margin-top:auto` cola os dois botões na base mesmo com o segundo cartão sendo mais alto (ele carrega a lista de exemplos). Sem isso, um botão fica no meio da altura e o outro no fim, e a fileira parece desalinhada. */ .path-btn{ margin-top:auto; align-self:flex-start; margin-block-start:var(--s-6); } @media (max-width:720px){ .paths{ grid-template-columns:1fr; } .path-btn{ align-self:stretch; } } /* ========================================================================== CTA FINAL ========================================================================== */ /* O fechamento se destaca por SUPERFÍCIE, não por brilho: um degrau de fundo (--bg-2) e uma linha no topo. É o mesmo recurso que Stripe usa para separar a última seção, e sobrevive aos dois temas sem virar mancha colorida. */ .cta-final{ position:relative; padding-block:var(--s-10); overflow:hidden; border-top:1px solid var(--line); background:var(--bg-2); } .cta-glow{ display:none; } .cta-inner{ position:relative; text-align:center; } .cta-title{ font-size:clamp(30px,4.3vw,48px); font-weight:600; letter-spacing:-.03em; } .cta-sub{ margin-top:var(--s-5); font-size:17px; color:var(--text-muted); max-width:60ch; margin-inline:auto; } .cta-form{ display:grid; gap:var(--s-4); max-width:470px; margin:var(--s-8) auto 0; text-align:left; } .field{ display:grid; gap:7px; } .field label{ font-size:13.5px; font-weight:500; color:var(--text-muted); } .field input, .field textarea{ min-height:50px; padding:13px 16px; border:1px solid var(--line-strong); border-radius:9px; background:var(--surface); color:var(--text); font:inherit; font-size:16px; transition:border-color .18s var(--ease), box-shadow .18s var(--ease); } .field textarea{ resize:vertical; min-height:78px; line-height:1.5; } .field input::placeholder, .field textarea::placeholder{ color:var(--text-faint); } .field input:focus, .field textarea:focus{ outline:none; border-color:var(--brand-soft); box-shadow:0 0 0 3px rgba(123,71,255,.2); } .field-optional{ font-weight:400; color:var(--text-faint); } .form-note{ font-size:13px; color:var(--text-faint); text-align:center; } .form-note.is-erro{ color:var(--err); } .cta-alt{ margin-top:var(--s-6); font-size:15px; color:var(--text-muted); } .cta-alt a{ color:var(--accent-text); font-weight:600; text-decoration:none; } .cta-alt a::after{ content:" \2192"; } .cta-alt a:hover{ text-decoration:underline; } /* O campo-armadilha. Fora da tela em vez de display:none: robô moderno ignora campo escondido com display:none, mas preenche este. */ .campo-armadilha{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } /* Confirmação depois do envio. Ocupa o lugar do formulário. */ .cta-sucesso{ display:flex; flex-direction:column; align-items:center; gap:var(--s-3); max-width:470px; margin:var(--s-8) auto 0; padding:var(--s-7) var(--s-5); text-align:center; border:1px solid var(--line-strong); border-radius:var(--radius-lg); background:var(--surface); } .sucesso-titulo{ font-size:19px; font-weight:600; } .sucesso-texto{ max-width:38ch; font-size:15.5px; color:var(--text-muted); } /* ========================================================================== FOOTER ========================================================================== */ .site-footer{ padding-block:var(--s-7); border-top:1px solid var(--line); } .footer-top{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:var(--s-6); } .footer-brand-block{ max-width:38ch; } /* O slogan imita o tratamento do arquivo da marca: caixa alta, corpo pequeno e tracking largo, alinhado sob o wordmark. O tracking é o que faz uma linha curta em caixa alta parecer assinatura em vez de grito. */ .footer-slogan{ margin-top:var(--s-4); font-size:11.5px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--text-muted); } .footer-line{ margin-top:var(--s-3); font-size:14px; color:var(--text-faint); } .footer-cols{ display:flex; flex-wrap:wrap; gap:var(--s-8); } .footer-col h4{ font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); margin-bottom:var(--s-4); } .footer-col ul{ display:grid; gap:10px; } .footer-col li, .footer-col a{ font-size:14px; color:var(--text-muted); text-decoration:none; } .footer-col a:hover{ color:var(--text); } .footer-bottom{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s-4); margin-top:var(--s-7); padding-top:var(--s-5); border-top:1px solid var(--line); } /* A assinatura no rodape: bloco proprio acima da linha legal, para nao virar mais uma frase na mesma linha do copyright. */ .footer-assinatura{ display:block; margin-bottom:6px; font-weight:600; letter-spacing:.02em; color:var(--text); } .footer-legal{ font-size:13px; color:var(--text-faint); } /* A assinatura do produto no rodapé da empresa é o inverso da que existe na landing do HighClin, e é proposital: lá, "by VALTE" credita a casa; aqui, o HighClin credita a prova. */ .footer-product{ display:inline-flex; align-items:center; gap:9px; font-size:13.5px; color:var(--text-faint); text-decoration:none; } .footer-product:hover{ color:var(--text-muted); } .footer-product b{ font-size:13px; font-weight:600; letter-spacing:.16em; color:var(--text-muted); } .hc-mark{ height:16px; width:auto; display:block; color:var(--text-muted); } .hc-bar{ fill:currentColor; } .hc-cross{ fill:var(--lavender); } /* ========================================================================== RESPONSIVO ========================================================================== */ @media (max-width:1000px){ .hero-inner{ grid-template-columns:1fr; } .map{ order:2; } .leaks{ grid-template-columns:repeat(2,1fr); } .proof{ grid-template-columns:1fr; } } @media (max-width:720px){ body{ font-size:16px; } .section{ padding-block:var(--s-8); } .leaks, .fronts{ grid-template-columns:1fr; } .hero-actions .btn, .midcta-actions .btn{ flex:1 1 100%; } .midcta{ flex-direction:column; align-items:stretch; } .midcta-actions{ width:100%; } .scene{ grid-template-columns:1fr; gap:var(--s-2); } .scene-num{ padding-top:0; } /* No celular o wordmark encolhe em vez de sumir. Antes ele era texto e `display:none` era aceitável; agora que é a marca desenhada, esconder deixaria só o símbolo, e símbolo sozinho não diz o nome de uma empresa que ninguém conhece ainda. */ .valte-word{ height:10px; } .footer-cols{ gap:var(--s-6); } .cta-final{ padding-block:var(--s-9); } } /* ========================================================================== MOVIMENTO ========================================================================== Entrada do herói: CSS puro, começa na primeira pintura e não espera o GSAP baixar. O H1 é o elemento de LCP e não pode ficar refém de rede. Revelações de scroll: GSAP, tudo abaixo da dobra. ========================================================================== */ @keyframes rise{ from{ opacity:0; transform:translate3d(0,22px,0); } to { opacity:1; transform:none; } } @keyframes riseVisual{ from{ opacity:0; transform:translate3d(0,34px,0) scale(.975); } to { opacity:1; transform:none; } } [data-anim="hero"],[data-anim="hero-visual"]{ opacity:0; animation:rise .75s var(--ease) forwards; will-change:transform,opacity; } .hero-copy > [data-anim="hero"]:nth-child(1){ animation-delay:.05s; } .hero-copy > [data-anim="hero"]:nth-child(2){ animation-delay:.15s; } .hero-copy > [data-anim="hero"]:nth-child(3){ animation-delay:.25s; } .hero-copy > [data-anim="hero"]:nth-child(4){ animation-delay:.33s; } [data-anim="hero-visual"]{ animation-name:riseVisual; animation-duration:.95s; animation-delay:.3s; } /* Estado inicial das revelações de scroll. Aplicado só quando o JS realmente vai animar, para o conteúdo nunca ficar invisível se o GSAP falhar. */ .js-anim [data-anim="up"], .js-anim [data-anim="stagger"]{ opacity:0; } @media (prefers-reduced-motion:reduce){ .js-anim [data-anim]{ opacity:1 !important; transform:none !important; } [data-anim="hero"],[data-anim="hero-visual"]{ opacity:1; animation:none; } *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }