e substituir cada [A PREENCHER] por um . Cada logotipo liga a sua empresa em clientes.html#id-da-empresa. Ver as instrucoes no topo do clientes.html. Regra pratica: manter alturas semelhantes entre logotipos, senao a faixa fica aos altos. O max-height abaixo trata da maioria dos casos. */ #clientes[hidden]{display:none} .logos{list-style:none; margin:clamp(18px,2.2vw,26px) 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:clamp(12px,1.6vw,20px)} .logos li{padding:0} .logos li::before{display:none} .logos a{display:flex; align-items:center; justify-content:center; min-height:66px; padding:12px; text-decoration:none; background:var(--surface); border:1px solid var(--line); border-radius:var(--rbtn)} .logos a:hover{border-color:var(--primary)} /* A garantia sobre os dados, debaixo do consentimento. Estava numa seccao propria oito ecras abaixo; a hesitacao em entregar a fatura acontece aqui. Discreta de proposito: e para tranquilizar quem ja esta a decidir, nao para disputar atencao com o botao. */ .hf-dados{margin-top:10px; font-size:12.5px; line-height:1.5; color:var(--body)} .hf-dados a{color:var(--primary); font-weight:600; text-decoration:none; border-bottom:1px solid color-mix(in srgb,var(--primary) 35%,transparent)} .hf-dados a:hover{border-bottom-color:var(--primary)} /* O CTA do indice do guia vinha colado ao ultimo cartao: a margem normal do .cta-linha chega quando o que esta acima e texto, mas nao quando e uma caixa com contorno — o olho le a borda como fim e precisa de mais ar. */ .grupo + .cta-linha{margin-top:clamp(50px,6.2vw,80px)} /* ══ revisão de espaçamentos ═══════════════════════════════════════════ O CTA das paginas de artigo estava esmagado a 15px. A causa nao era a margem do .cta-linha, que pede 36 a 58px — era a especificidade: dentro do .artigo, o selector ".artigo p" (0,1,1) ganha a ".cta-linha" (0,1,0) e impunha os 15px dos paragrafos de texto corrido. Afectava a FAQ, a privacidade, a 404, os clientes e os sete artigos do guia. */ .artigo p.cta-linha{margin-top:clamp(40px,5vw,64px)} /* dois CTA seguidos (o "tem outra duvida" e o botao) nao precisam do vao todo entre si, mas 15px colava-os um ao outro */ .artigo p.cta-linha + p.cta-linha{margin-top:clamp(20px,2.4vw,28px)} /* o acordeao comecava colado ao titulo da seccao: zero pixeis medidos */ .artigo .faq{margin-top:clamp(20px,2.4vw,28px)} /* o botao para o guia completo, debaixo dos tres artigos relacionados */ .rel-todos{margin-top:clamp(18px,2.2vw,26px)} .artigo p.rel-todos{margin-top:clamp(18px,2.2vw,26px)} /* ── #solar: as duas modalidades, com pesos diferentes ─────────────── A versao em tabela dava-lhes o mesmo peso e nao se percebia o que a EVA esta a vender. Mas so uma delas esta explicada: o email do cliente detalha a sem investimento e nao diz quase nada da outra. Por isso a sem investimento leva fundo, o numero grande e a lista do que fica do lado da EVA; a com investimento fica ao lado, curta e sem fundo. A hierarquia e a do que sabemos, nao uma invencao comercial. */ .opcoes{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr); gap:clamp(18px,2.4vw,32px); align-items:start; margin-top:clamp(20px,2.4vw,28px)} .opcao .op-rotulo{font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--eyebrow); margin:0} /* o numero que vende: zero euros de investimento */ .op-numero{font-family:var(--mono); font-size:clamp(34px,4.4vw,54px); font-weight:700; line-height:1; color:var(--primary); letter-spacing:-.03em; margin-top:12px} .op-sub{font-size:14.5px; color:var(--body); margin-top:8px} .op-trata{list-style:none; margin:clamp(16px,2vw,22px) 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:8px 18px} .op-trata li{position:relative; padding-left:23px; font-size:15px; line-height:1.4; color:var(--head)} /* visto desenhado em CSS, sem imagem nem fonte de icones */ .op-trata li::before{content:""; position:absolute; left:2px; top:4px; width:6px; height:11px; border:solid var(--primary); border-width:0 2px 2px 0; transform:rotate(43deg)} /* Estas regras diziam :not(.principal), mas a classe passou a chamar-se op-princ algures pelo caminho e ninguem as mudou. Resultado: o :not passou a dar verdade nas duas colunas, e todos os

levavam 15,5 px -- incluindo o "0 €", que e o numero que vende a seccao inteira. E com mais especificidade do que .op-numero, por isso nada do que se escrevesse la em baixo lhe ganhava. */ .opcao:not(.op-princ){padding-top:clamp(4px,1vw,10px)} .opcao:not(.op-princ) p{margin-top:12px; font-size:15.5px; line-height:1.6} @media(max-width:860px){ .opcoes{grid-template-columns:1fr; gap:18px} .opcao:not(.op-princ){padding-top:0} } @media(max-width:460px){.op-trata{grid-template-columns:1fr}} /* ligacao para a fonte, por baixo de um numero citado */ .fonte-link{margin-top:8px; font-size:13px; color:var(--body)} .fonte-link a{color:var(--primary); font-weight:600; text-decoration:none; border-bottom:1px solid color-mix(in srgb,var(--primary) 32%,transparent)} .fonte-link a:hover{border-bottom-color:var(--primary)} /* ══════════════════════════════════════════════════════════════════════════ MAKEOVER · FASE 1 — o sistema tipográfico ══════════════════════════════════════════════════════════════════════════ O site lia-se como feito por máquina e a razão principal era a tipografia: o maior título tinha 44px e havia 47 declarações a negrito. Tudo do mesmo tamanho e tudo com o mesmo peso não é hierarquia, é ruído uniforme. As duas referências que o Tiago mandou (on.energy e breakthroughenergy.org) fazem o contrário e é só isso que as faz parecer seguras de si: tipo muito maior, muito mais leve, e a espessura reservada para o que é mesmo importante. Fica num bloco à parte de propósito: se não servir, apaga-se daqui até ao fim e o site volta exactamente ao que era. ══════════════════════════════════════════════════════════════════════════ */ h1,h2,h3,h4{text-wrap:balance} /* O título grande deixa de ser negrito e passa a ser grande. Um peso 300 a 80px tem mais presença do que um 700 a 44px, e não grita. */ .hl h1,.artigo h1{ font-size:clamp(38px,6.2vw,80px); font-weight:300; letter-spacing:-.038em; line-height:.98} /* Os títulos de secção acompanham. A diferença entre o h1 e o h2 passa a ser de tamanho e não de peso, que é como deve ser. */ .shead h2{ font-size:clamp(27px,4.1vw,54px); font-weight:300; letter-spacing:-.032em; line-height:1.02; margin:14px 0 0} /* A frase de apoio cresce e aligeira: era 17,5px a 400 e lia-se como letra miúda debaixo do título. */ .shead p{ font-size:clamp(17px,1.65vw,21px); font-weight:300; line-height:1.5; color:var(--body); max-width:46ch} .shead p{margin-top:16px} /* A sobrancelha aparecia em todas as secções, do mesmo tamanho e sempre a verde: oito vezes a mesma etiqueta deixa de marcar nada. Fica mais pequena e mais calada — serve para situar, não para anunciar. */ .eyebrow{font-size:11px; font-weight:600; letter-spacing:.16em; opacity:.85} /* O negrito dentro do texto corrido passa a 600. A 700 saltava demasiado de uma frase a 300. */ .shead p b,.hl p b{font-weight:600} /* Mais ar entre o título e o que vem a seguir: tipo grande precisa de silêncio à volta, senão parece apertado em vez de confiante. */ .shead{margin-bottom:clamp(34px,4.6vw,60px); max-width:56ch} /* ══════════════════════════════════════════════════════════════════════════ MAKEOVER · PRETO E AS CORES DO RAIO ══════════════════════════════════════════════════════════════════════════ O site corre todo por variáveis, por isso vira-se aqui e vira tudo de uma vez. A paleta passa a ser a do logótipo e mais nada: o degradé do raio vai do amarelo ao verde, e é isso que fica a fazer de cor sobre o preto. #FFD90A amarelo o destaque, o botão, o que tem de saltar #9FC30A lima o segundo nível: ligações, sobrancelhas #009F0A verde o fim do degradé Preto puro no fundo, não cinzento-escuro: metade da força disto está em não ter meio-tom nenhum entre o fundo e a cor. ══════════════════════════════════════════════════════════════════════════ */ :root{ --page:#000000; --surface:#0B0E0B; --band:#070907; --field:#131713; --line:#242B23; --line-soft:#1A201A; --head:#FFFFFF; --body:#A4AEA2; --primary:#FFD90A; --deep:#000000; --glow:#9FC30A; --eyebrow:#9FC30A; --tracoFio:#394237; --grad:linear-gradient(90deg,#FFD90A,#9FC30A 55%,#009F0A); color-scheme:dark; } /* O botão principal era verde com texto branco. Sobre preto, verde escuro desaparece — passa a ser o amarelo com texto preto, que é o elemento mais alto da página e só deve haver um de cada vez. */ .btn-p{background:#FFD90A; color:#0A0A0A} .btn-p:hover{background:var(--amarelo-claro)} /* O rodapé era a única zona escura do site. Agora que tudo é escuro, separa-se por uma linha e não por cor. */ footer{background:#000000; color:var(--body); border-top:1px solid var(--line)} footer .fg a{color:var(--head)} footer .fg a:hover{color:#FFD90A} footer .fg h3{color:#9FC30A} footer .fg .tag{color:var(--body)} footer .legal{border-top-color:var(--line)} .btn-claro{background:#FFD90A; color:#0A0A0A} /* A fotografia do topo fica mais escura, para o tipo branco se ler por cima */ .hbg img{filter:brightness(.42) saturate(.75)} /* ── os efeitos de entrada ───────────────────────────────────────────── Sobe e aparece. O atraso vem do JS, por ordem dentro de cada grupo. A classe .rev só é posta pelo JS, e só depois de ele confirmar que tem como a tirar — sem isso, um navegador sem IntersectionObserver ficava com a página inteira invisível. */ .rev{opacity:0; transform:translate3d(0,22px,0); transition:opacity .62s cubic-bezier(.22,.61,.36,1) var(--rev-atraso,0ms), transform .62s cubic-bezier(.22,.61,.36,1) var(--rev-atraso,0ms)} .rev-dentro{opacity:1; transform:none} /* a fotografia do topo é movida por JS; aqui só se garante que tem espaço para se mexer sem deixar ver a borda */ .hero .hbg{will-change:transform} @media(prefers-reduced-motion:reduce){ .rev{opacity:1; transform:none; transition:none} } /* ══════════════════════════════════════════════════════════════════════════ 1 · HERO (ref-1) ══════════════════════════════════════════════════════════════════════════ Fotografia a ecrã inteiro, véu escuro, título gigante com a última linha alinhada à direita — é esse desencontro que faz o bloco parecer composto e não um parágrafo centrado. Sem barra de navegação e sem menu: só o logótipo pequeno no canto. Tudo o que leva ao formulário é o botão. Nada começa escondido. Se o JavaScript não correr, o hero está inteiro e legível — a regra é essa e vale para todas as secções. ══════════════════════════════════════════════════════════════════════════ */ /* a paleta da referência: quase-preto, off-white, lima e cinza. O amarelo da marca fica só nos botões. */ :root{ --page:#0B0B0A; --surface:#121311; --band:#0E0F0D; --field:#171916; --line:#272A25; --line-soft:#1C1F1B; --head:#F4F5F1; --body:#9BA197; --lima:#D0F53D; --glow:var(--lima); --eyebrow:var(--lima); } .hero{position:relative; min-height:100svh; padding:0; background:#0B0B0A; display:grid; grid-template-rows:auto 1fr; align-items:center} .hero .hbg{position:absolute; inset:0; z-index:0; will-change:transform} .hero .hbg picture,.hero .hbg img{width:100%; height:100%; object-fit:cover; display:block} /* A fotografia e escura de origem. Com .52 de brilho mais o veu a 88% em baixo, o resultado era preto liso: a imagem estava la e nao se via. */ .hero .hbg img{filter:brightness(.82) saturate(.9) contrast(1.04)} /* o véu: escuro em baixo, onde fica o texto, e mais limpo em cima */ .hero::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(176deg,rgba(11,11,10,.30) 0%,rgba(11,11,10,.10) 26%,rgba(11,11,10,.62) 72%,rgba(11,11,10,.80) 100%)} .hero > *:not(.hbg){position:relative; z-index:2} /* ── o logótipo, e mais nada ──────────────────────────────────────────── */ .hlogo{display:inline-flex; align-items:center; gap:10px; text-decoration:none; padding:clamp(18px,2.2vw,28px) var(--gut); justify-self:start} .hlogo svg{width:24px; height:24px; flex:none} .hlogo b{font-size:13px; font-weight:600; line-height:1.15; color:#F4F5F1; letter-spacing:-.005em} /* ── o título ─────────────────────────────────────────────────────────── */ .hdizer{width:100%; max-width:1240px; margin:0 auto; padding:0 var(--gut) clamp(40px,6vw,80px)} .hdizer h1{margin:0; display:flex; flex-direction:column; /* 112px punha "Fazemos com que pague menos" a partir e a deixar "menos" sozinho numa linha. A 92px cabe de uma vez. */ font-size:clamp(33px,6.8vw,92px); font-weight:300; line-height:.96; letter-spacing:-.045em; color:#FFFFFF; text-wrap:initial} /* a última linha à direita, como o "of energy" da referência */ .h-dir{align-self:flex-end; text-align:right} .hlinha{margin:clamp(22px,2.8vw,34px) 0 0; max-width:44ch; font-size:clamp(15px,1.35vw,18px); line-height:1.5; color:rgba(255,255,255,.74)} @media(max-width:620px){ .hero{min-height:92svh} .h-dir{align-self:flex-start; text-align:left} } /* ══════════════════════════════════════════════════════════════════════════ A LETRA E O FIM DOS BLOCOS ══════════════════════════════════════════════════════════════════════════ */ /* A Inter Tight entra à frente da pilha do sistema. O resto da pilha fica como estava: é o que se lê nos 100 ms antes de o ficheiro chegar. */ :root{ --sans:"Inter Tight",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --lima:#D0F53D; --escuro:#0B0B0A; --claro:#F2F2EE; } /* ── acabar com as caixas ───────────────────────────────────────────────── Nenhuma secção tem borda, cartão ou corte à régua. O que separava por caixa passa a separar por espaço. */ .hform, .hf-pick button,.f input,.f textarea,.f select{ border-color:transparent} /* as faixas deixam de ter cor própria: a cor da página é que muda */ .band,#perguntas,#quem-somos,.fs.band{background:transparent} /* ── o hero ───────────────────────────────────────────────────────────── */ /* O véu deixa de ser uma cortina igual por cima de tudo. Escurece só onde está o texto — em baixo e à esquerda — e deixa o canto superior direito limpo, que é onde a fotografia tem de se ver. */ .hero::after{ background: linear-gradient(to top, rgba(11,11,10,1) 0%, rgba(11,11,10,.92) 12%, rgba(11,11,10,0) 62%), linear-gradient(to right, rgba(11,11,10,.86) 0%, rgba(11,11,10,.45) 38%, rgba(11,11,10,0) 72%)} .hero .hbg img{filter:brightness(.92) saturate(.95) contrast(1.05)} /* o fundo do hero funde-se com a secção seguinte: sem linha de corte */ .hero{margin-bottom:0} .hdizer h1{font-size:clamp(33px,6.6vw,90px); font-weight:500; letter-spacing:-.04em; line-height:.95} .hdizer h1 em{font-style:normal; color:var(--lima)} /* ── o formulário sobe para cima do hero ─────────────────────────────── */ .pedido{margin-top:clamp(-120px,-9vw,-56px); padding-top:0; background:transparent; position:relative; z-index:3} @media(max-width:620px){ .pedido{margin-top:-40px} } /* ══════════════════════════════════════════════════════════════════════════ A ENTRADA, O TITULO A LARGURA DO ECRA, E O FORMULARIO NO PRIMEIRO ECRA ══════════════════════════════════════════════════════════════════════════ */ /* ── 1 · a entrada ─────────────────────────────────────────────────────── O raio ao centro, acende, deixa sair uma onda de luz lima, duas vezes, e a cortina sobe. 1,2 s do princípio ao fim. Nada aqui atrasa o carregamento da página: o hero está a chegar por baixo ao mesmo tempo. */ .entrada{position:fixed; inset:0; z-index:9999; background:var(--escuro); display:grid; place-items:center; overflow:hidden; transition:clip-path .36s cubic-bezier(.76,0,.24,1), opacity .36s ease; clip-path:inset(0 0 0 0)} .entrada svg{position:relative; width:clamp(58px,8vw,96px); height:auto; animation:eva-acende .42s ease-out 2 both} /* a onda: um halo lima que sai do raio e se abre */ .entrada-onda{position:absolute; width:clamp(58px,8vw,96px); aspect-ratio:1; border-radius:50%; pointer-events:none; background:radial-gradient(circle,rgba(212,242,63,.5) 0%,rgba(212,242,63,.14) 45%,rgba(212,242,63,0) 70%); animation:eva-onda .42s ease-out 2 both} @keyframes eva-acende{ 0%{opacity:.2; transform:scale(.93)} 40%{opacity:1; transform:scale(1.02)} 100%{opacity:.9; transform:scale(1)}} @keyframes eva-onda{ 0%{opacity:.85; transform:scale(.55)} 100%{opacity:0; transform:scale(3.4)}} /* a cortina sobe e revela o hero, que já lá estava */ .entrada-fora{clip-path:inset(0 0 100% 0); opacity:0; pointer-events:none} /* quem pediu menos movimento nunca chega aqui — o JavaScript não a cria — mas se chegasse, não havia animação nenhuma */ @media (prefers-reduced-motion: reduce){ .entrada{display:none} } /* ── 2 · o título ──────────────────────────────────────────────────────── Como na referência: ocupa a largura do ecrã com uma margem estreita, as letras coladas, as linhas coladas. Sai a coluna de 1240px — era ela que mantinha o título pequeno no meio de um ecrã grande. */ .hdizer{max-width:none; margin:0; padding:0 var(--marg-hero) clamp(26px,3.6vw,48px)} :root{--marg-hero:clamp(14px,2.6vw,42px)} .hlogo{padding-left:var(--marg-hero); padding-right:var(--marg-hero)} .hdizer h1{ font-size:clamp(26px,7vw,140px); font-weight:500; letter-spacing:-.045em; line-height:.9; color:#FFF; text-wrap:nowrap} .hdizer h1 em{font-style:normal; color:var(--lima)} /* a última linha encostada à margem direita, como o "of energy" */ .h-dir{align-self:flex-end; text-align:right} /* o hero passa a empurrar tudo para baixo: logótipo em cima, título e o resto encostados ao fundo */ .hero{align-items:end; min-height:88svh} .hdizer{align-self:end} /* ── a fotografia vê-se ────────────────────────────────────────────────── Sai o véu que cobria o ecrã todo. Fica um gradiente em baixo à esquerda, só o suficiente para o parágrafo e o botão se lerem, e um desvanecimento dos últimos 14% para a cor do formulário — é isso que apaga o corte entre as duas secções. */ .hero::after{ background: radial-gradient(118% 82% at 0% 100%, rgba(11,11,10,.80) 0%, rgba(11,11,10,.46) 34%, rgba(11,11,10,.12) 62%, rgba(11,11,10,0) 80%), linear-gradient(to top, var(--escuro) 0%, rgba(11,11,10,.55) 9%, rgba(11,11,10,0) 20%)} .hero .hbg img{filter:brightness(1) saturate(1) contrast(1.03)} /* ── o parágrafo e o botão, pequenos, em baixo à esquerda ───────────────── */ .hlinha{margin:clamp(16px,1.8vw,22px) 0 0; max-width:40ch; font-size:clamp(13.5px,1.02vw,15px); line-height:1.5; color:rgba(255,255,255,.72)} /* ── 3 · o formulário já se vê no primeiro ecrã ────────────────────────── 88svh de hero deixa os últimos 12% para o "Comece a análise" assomar. Não sobe por cima da fotografia: encosta-se a ela, e o desvanecimento acima faz com que não haja linha a separá-los. */ .pedido{margin-top:0; padding-top:clamp(26px,3.4vw,44px); background:var(--escuro); position:relative; z-index:3} @media(max-width:620px){ .hero{min-height:88svh} .h-dir{align-self:flex-end; text-align:right} .pedido{margin-top:0} } /* ══════════════════════════════════════════════════════════════════════════ O FORMULARIO, SEGUNDO O REF-7 Linhas em vez de caixas. Etiquetas pequenas em maiusculas por cima. Pilulas que se enchem de lima quando escolhidas. Espaco a volta de tudo. ══════════════════════════════════════════════════════════════════════════ */ /* o formulário alinha com a margem do título do hero: sem degrau */ .pedido .shell{max-width:none; padding-inline:var(--marg-hero)} .hform{max-width:860px; background:none; border:0; border-radius:0; padding:0; box-shadow:none} /* ── o cabeçalho ───────────────────────────────────────────────────────── */ .hf-t{font-size:clamp(26px,3.4vw,46px); font-weight:500; letter-spacing:-.04em; line-height:.95; color:var(--head)} .hf-s{font-size:14px; font-weight:400; color:var(--body); margin-top:8px} /* a barra de progresso passa a um fio de 2px */ .hf-bar{height:2px; border-radius:0; background:rgba(255,255,255,.1); margin:clamp(22px,2.6vw,32px) 0 10px} .hf-bar i{background:var(--lima)} .hf-passo{font-size:10.5px; font-weight:600; letter-spacing:.14em; color:var(--body)} .hf-etapa{margin-top:clamp(28px,3.4vw,46px)} /* ── etiquetas: pequenas, em maiúsculas, por cima ──────────────────────── */ .hf-l,.f label,.hf-etapa > .f > label{ display:block; font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--body); margin-bottom:10px} .f label u{color:var(--lima)} .consent label{text-transform:none; letter-spacing:0; font-size:13.5px; font-weight:400; color:var(--body); margin:0} /* ── campos: uma linha, e mais nada ───────────────────────────────────── */ .hform input:not([type="checkbox"]):not([type="file"]), .hform textarea,.hform select, .f input,.f textarea,.f select{ background:none; border:0; border-bottom:1px solid rgba(255,255,255,.16); border-radius:0; padding:8px 0 12px; font-size:17px; color:var(--head); box-shadow:none; width:100%} .hform input:focus,.hform textarea:focus,.hform select:focus, .f input:focus,.f textarea:focus{ outline:0; background:none; box-shadow:none; border-bottom-color:var(--lima)} .hform input::placeholder,.hform textarea::placeholder{ color:rgba(255,255,255,.26); font-size:16px} .hform input.erro,.f input.erro{box-shadow:none; border-bottom-color:#FF8A80} .hform textarea{min-height:64px} .hform .f{margin-bottom:clamp(24px,2.8vw,34px)} .hf-g2{gap:0 clamp(20px,3vw,40px)} /* ── pílulas ───────────────────────────────────────────────────────────── */ .hf-pick{gap:10px; margin-bottom:clamp(28px,3.4vw,42px)} .hf-pick button{ background:none; border:1px solid rgba(255,255,255,.2); border-radius:999px; padding:13px 20px; font-size:14px; font-weight:500; color:var(--head); transition:background .16s ease, border-color .16s ease, color .16s ease} .hf-pick button:hover{border-color:rgba(255,255,255,.45)} /* escolhida: enche-se de lima */ .hf-pick button[aria-pressed="true"]{ background:var(--lima); border-color:var(--lima); color:var(--escuro); font-weight:600} /* ── o anexo: uma linha tracejada, não uma caixa tracejada ────────────── */ .drop{border:0; border-bottom:1px dashed rgba(255,255,255,.3); border-radius:0; padding:4px 0 14px; text-align:left; background:none; font-size:13px; color:var(--body); transition:border-color .16s ease} .drop:hover{border-bottom-color:var(--lima)} .drop b{font-size:17px; font-weight:500; color:var(--head); margin-bottom:5px; letter-spacing:-.01em} .hf-opcional{font-size:12.5px; color:var(--body); margin-top:9px} /* ── o botão grande ───────────────────────────────────────────────────── */ .hform .btn-p{width:auto; min-width:min(100%,300px); margin-top:clamp(12px,1.6vw,20px); padding:20px 40px; background:var(--lima); color:var(--escuro); border-radius:999px; font-size:16px; font-weight:600; letter-spacing:-.01em} .hform .btn-p:hover{background:var(--lima-clara)} .hf-voltar{display:inline-block; margin-top:20px; background:none; border:0; font-family:inherit; font-size:13px; color:var(--body); cursor:pointer} .hf-voltar:hover{color:var(--head)} .consent{border-top:1px solid rgba(255,255,255,.1); margin:clamp(26px,3vw,38px) 0 clamp(20px,2.4vw,28px); padding-top:clamp(20px,2.4vw,28px)} .consent input{accent-color:var(--lima)} .consent a,.hf-dados a{color:var(--lima)} .hf-note{display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:clamp(28px,3.4vw,44px); font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--body)} .hf-dados,.hf-falta,.hf-ajuda{font-size:13px; color:var(--body); line-height:1.6} @media(max-width:620px){ .hf-pick,.hf-pick-3{grid-template-columns:1fr 1fr} .hf-g2{grid-template-columns:1fr} .hform .btn-p{width:100%; min-width:0} } /* A fotografia tem scale(1.08) por causa da paralaxe, e estava a transbordar uns 40 px para fora do hero. O desvanecimento vive dentro do hero, por isso essa faixa que escapava ficava com a foto em bruto e depois era tapada à régua pelo formulário: era dali que vinha o corte. */ .hero{overflow:hidden} /* e o desvanecimento passa a ser longo. A nove por cento o olho ainda vê a junta; a trinta e cinco já não há junta nenhuma. */ .hero::after{ background: radial-gradient(118% 82% at 0% 100%, rgba(11,11,10,.80) 0%, rgba(11,11,10,.46) 34%, rgba(11,11,10,.12) 62%, rgba(11,11,10,0) 80%), linear-gradient(to top, var(--escuro) 0%, var(--escuro) 4%, rgba(11,11,10,.86) 11%, rgba(11,11,10,.52) 20%, rgba(11,11,10,.20) 29%, rgba(11,11,10,0) 38%)} /* ── o hero em telemóvel ───────────────────────────────────────────────── Num ecrã estreito e alto, o object-fit:cover de uma fotografia deitada corta-lhe as pontas e fica só a encosta do meio, que é a parte escura e a que nada diz. Desloco o enquadramento para a direita e para cima, onde estão a barragem e o céu, e alivio muito o gradiente: o que ali chegava para dar contraste a um ecrã largo, num estreito tapa a fotografia toda. */ @media(max-width:620px){ /* 62%/22% apanha o ceu, a crista e a barragem; o centro da fotografia e so encosta. E a imagem e escura de origem, por isso em telemovel leva um ponto de luz a mais. */ .hero .hbg img{object-position:62% 22%; filter:brightness(1.18) contrast(1.05)} .hero::after{ background: linear-gradient(to top, var(--escuro) 0%, var(--escuro) 5%, rgba(11,11,10,.88) 14%, rgba(11,11,10,.62) 24%, rgba(11,11,10,.28) 34%, rgba(11,11,10,0) 46%), linear-gradient(to bottom, rgba(11,11,10,.42) 0%, rgba(11,11,10,0) 22%)} } /* herdava o centrado da .drop antiga */ .hf-opcional{text-align:left} /* As pílulas eram três colunas iguais esticadas pela largura toda. Pílula é coisa que se ajusta ao que lá está escrito. */ .hf-pick,.hf-pick-3{display:flex; flex-wrap:wrap; grid-template-columns:none} .hf-pick button{flex:0 0 auto} @media(max-width:620px){ .hf-pick,.hf-pick-3{display:flex} .hf-pick button{padding:12px 18px; font-size:13.5px} } /* ══════════════════════════════════════════════════════════════════════════ OS TRES APONTAMENTOS DO TIAGO ══════════════════════════════════════════════════════════════════════════ */ /* ── 1 · as linhas estavam sobrepostas ─────────────────────────────────── A 0.9 as linhas colam mesmo, mas a Inter Tight tem descendentes longas: o "g" de "pague" e o "q" de "que" batiam na linha de baixo, e o til de "Não" batia na de cima. O minimo sem colisao e o alto da maiuscula mais a descendente, que nesta letra da 0.97em. A 1.0 ha ar, e continua colado. */ .hdizer h1{line-height:1} /* ── 2 · a descricao ───────────────────────────────────────────────────── Estava a 15 px dentro de uma medida de 40 caracteres: tres linhas curtas num retangulo estreito, ao lado de um titulo de 100 px. Sobe para 20 px, abre para 52 caracteres, e ganha a entrelinha de um texto que se le em vez da de uma legenda. */ .hlinha{ margin:clamp(20px,2.2vw,30px) 0 0; max-width:52ch; font-size:clamp(15px,1.35vw,20px); line-height:1.45; letter-spacing:-.008em; color:rgba(255,255,255,.82)} @media(max-width:620px){ .hlinha{font-size:16px; max-width:34ch; line-height:1.42} } /* ── 3 · a entrada, mais longa ─────────────────────────────────────────── Tres pulsos de 0,9 s em vez de dois de 0,42 s. Tres segundos ao todo, e o clique no logotipo volta a toca-la. */ /* Dois pulsos, nao tres, mas mais demorados: os mesmos 2,7 s de entrada sem parecer um pisca-pisca. */ .entrada svg{animation:eva-acende 1.35s ease-out 2 both} .entrada-onda{animation:eva-onda 1.35s ease-out 2 both} .entrada{transition:clip-path .5s cubic-bezier(.76,0,.24,1), opacity .5s ease} /* o cursor diz que o logotipo faz alguma coisa */ .hlogo{cursor:pointer} /* ══════════════════════════════════════════════════════════════════════════ O FORMULARIO AO CENTRO, E COM UM RITMO SO Estava encostado a esquerda com a barra de progresso a atravessar o ecra e o "passo 1 de 2" perdido la ao fundo a direita. E os intervalos eram ao acaso: 42 px entre as pilulas e o anexo, 9 px entre o anexo e a potencia. Passa a haver uma medida unica, --esp, e tudo se mede por ela. ══════════════════════════════════════════════════════════════════════════ */ .pedido{--esp:clamp(26px,3.2vw,42px)} .hform{max-width:680px; margin-inline:auto; text-align:center} /* ── o cabeçalho ───────────────────────────────────────────────────────── */ .hf-t{font-size:clamp(28px,3.6vw,48px)} .hf-s{margin-top:10px} .hf-bar{margin:calc(var(--esp) * .72) 0 12px} .hf-passo{text-align:center} /* ── o corpo: um intervalo só entre blocos ─────────────────────────────── */ .hf-etapa{margin-top:var(--esp)} .hform .f,.hf-pick,.hf-g2{margin-bottom:var(--esp)} /* o que é legenda de um campo cola-se a ele, não flutua a meio caminho */ .hf-l,.f label{margin-bottom:12px} .hf-ajuda,.hf-erro,.hf-opcional{margin-top:12px; margin-bottom:0} .hform .f:last-of-type{margin-bottom:0} /* ── ao centro ─────────────────────────────────────────────────────────── */ .hf-pick{justify-content:center} .drop{text-align:center} .hf-opcional,.hf-ajuda,.hf-falta,.hf-dados{text-align:center; max-width:52ch; margin-inline:auto} .hform input:not([type="checkbox"]),.hform textarea,.hform select{text-align:center} .hform input::placeholder,.hform textarea::placeholder{text-align:center} .f-tel{justify-content:center} .hf-note{justify-content:center} .consent{justify-content:center; max-width:56ch; margin-inline:auto; text-align:left} /* o anexo é um bloco próprio, com o mesmo ar dos outros de cada lado */ .drop{margin-bottom:0} .hform .drop + input + .hf-opcional{margin-bottom:var(--esp)} /* ── o botão ───────────────────────────────────────────────────────────── */ .hform .btn-p{margin-top:var(--esp)} .hf-note{margin-top:var(--esp)} @media(max-width:620px){ .pedido{--esp:26px} .hform{text-align:center} } /* O bloco fica ao centro, mas o que assenta numa linha comeca onde a linha comeca: texto a meio de um campo sublinhado nao se le como campo, le-se como legenda. Ao centro ficam so as coisas que nao tem linha por baixo — o titulo, as pilulas, o botao e o rodape do formulario. */ .hform .f,.hform .drop,.hform .f + .hf-erro{text-align:left} .f label,.hform input:not([type="checkbox"]),.hform textarea,.hform select{ text-align:left} .hform input::placeholder,.hform textarea::placeholder{text-align:left} .drop,.drop b{text-align:left} .hf-opcional,.hf-ajuda{text-align:left; margin-inline:0; max-width:none} .f-tel{justify-content:flex-start} .hf-falta,.hf-dados{text-align:left; margin-inline:0} /* dois restos do passo 2: a frase de abertura colava-se ao primeiro campo, e a nota sobre os dados fugia para a esquerda enquanto o consentimento ficava ao centro. Passam ambas a medir-se pela mesma regua. */ .hf-falta{margin:0 0 var(--esp)} .hf-dados{max-width:56ch; margin-inline:auto} /* ══════════════════════════════════════════════════════════════════════════ ANDAMENTO 2 · A LIMA A faixa a toda a largura, preto sobre lima, sem cartoes e sem fotografia. A frase primeiro; os tres numeros do dia logo a seguir, a prova-la. ══════════════════════════════════════════════════════════════════════════ */ .lima{ background:var(--lima); color:var(--escuro); padding:clamp(72px,11vw,170px) var(--marg-hero) clamp(56px,7vw,110px); /* o preto de cima nao acaba a regua: entra na lima nos primeiros pixeis */ background-image:linear-gradient(to bottom, var(--escuro) 0, rgba(11,11,10,0) clamp(28px,4vw,70px)); background-repeat:no-repeat} .lima-in{max-width:1500px; margin:0 auto} .lima-k{margin:0 0 clamp(22px,2.8vw,38px); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:rgba(11,11,10,.55)} .lima-sub{margin:clamp(26px,3vw,44px) 0 0; max-width:46ch; font-size:clamp(15px,1.3vw,20px); line-height:1.5; color:rgba(11,11,10,.72)} /* ── os tres numeros ──────────────────────────────────────────────────── */ .lima-dados{max-width:1500px; margin:clamp(56px,7vw,110px) auto 0; border-top:1px solid rgba(11,11,10,.22); padding-top:clamp(22px,2.6vw,34px)} .ln-topo{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 16px; margin:0 0 clamp(30px,3.6vw,52px); font-size:clamp(17px,1.5vw,22px); font-weight:500; letter-spacing:-.02em} .ln-topo span{font-size:13px; font-weight:400; color:rgba(11,11,10,.62); letter-spacing:0} .lnums{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(26px,3.4vw,54px)} .lnum{min-width:0} .ln-k{margin:0 0 10px; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(11,11,10,.6)} .ln-tag{display:inline-block; margin-left:6px; padding:2px 8px; border-radius:999px; background:rgba(11,11,10,.12); letter-spacing:.08em; font-size:9.5px} .ln-v{display:flex; align-items:baseline; gap:8px; margin:0; font-size:clamp(38px,4.6vw,76px); font-weight:500; letter-spacing:-.045em; line-height:.92; /* os tres numeros tem de alinhar a virgula, nao bailar com os digitos */ font-variant-numeric:tabular-nums} .ln-u{font-size:clamp(12px,.95vw,15px); font-weight:500; letter-spacing:0; color:rgba(11,11,10,.6)} .ln-x{margin:12px 0 0; font-size:14px; font-weight:500; color:rgba(11,11,10,.8); font-variant-numeric:tabular-nums} .ln-h{margin:10px 0 0; font-size:13px; line-height:1.45; color:rgba(11,11,10,.62); max-width:28ch} .ln-d{margin:10px 0 0; font-size:11.5px; letter-spacing:.02em; color:rgba(11,11,10,.5)} .ln-d a{color:rgba(11,11,10,.75); text-underline-offset:3px} .ln-nota{display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px; margin:clamp(38px,4.6vw,66px) 0 0; padding-top:clamp(22px,2.6vw,34px); border-top:1px solid rgba(11,11,10,.22); font-size:14px; color:rgba(11,11,10,.72)} .ln-nota a{color:var(--escuro)} .ln-cta{margin-left:auto; display:inline-flex; align-items:center; gap:10px; min-height:50px; padding:0 30px; border-radius:999px; background:var(--escuro); color:var(--lima)!important; font-size:15px; font-weight:600; text-decoration:none; transition:background .18s ease} .ln-cta::after{content:"↓"; transition:transform .18s ease} .ln-cta:hover{background:#1E2019} .ln-cta:hover::after{transform:translateY(2px)} @media(max-width:900px){ .lnums{grid-template-columns:1fr; gap:clamp(28px,5vw,40px)} .lnum + .lnum{border-top:1px solid rgba(11,11,10,.16); padding-top:clamp(26px,5vw,36px)} .ln-h{max-width:40ch} .ln-cta{margin-left:0; width:100%; justify-content:center} } @media(max-width:620px){ .ln-v{font-size:clamp(36px,10vw,52px)} } /* O degradê do preto para a lima dava um borrão azeitona: duas cores saturadas a misturar-se não dão uma terceira, dão lama. A referência corta a direito, e um corte entre duas cores chapadas é uma decisão — ao contrário de um corte a meio de uma fotografia, que é um acidente. */ .lima{background-image:none} /* ── mais preto antes da lima ──────────────────────────────────────────── O rodapé do formulário encostava à aresta. A mudança de cor precisa de respirar de ambos os lados para se ler como mudança e não como acidente. */ .pedido{padding-bottom:clamp(70px,9vw,150px)} .lima{padding-top:clamp(64px,8vw,130px)} /* ── o bug do branco sobre lima ────────────────────────────────────────── Uma regra antiga, p b{color:var(--head)}, pintava os numeros de off-white. Sobre a lima isso da 1,6:1 — os numeros estavam ilegiveis. Dentro da faixa o negrito herda a cor do texto, que e o preto. */ .lima b,.lima strong{color:inherit} /* ── destaque para os encargos ─────────────────────────────────────────── O cliente pediu-o. E a unica das tres parcelas que a empresa nao pode negociar, por isso a inversao diz duas coisas ao mesmo tempo: olha para aqui, e esta e diferente das outras. O padding vertical e igual nas tres colunas para as linhas de base dos numeros continuarem alinhadas; so a terceira e que ganha fundo. */ .lnum{padding-block:clamp(20px,2.2vw,30px)} .lnum-erc{ background:var(--escuro); color:var(--lima); padding-inline:clamp(20px,2.2vw,32px); border-radius:20px; margin-top:calc(clamp(20px,2.2vw,30px) * -1); margin-bottom:calc(clamp(20px,2.2vw,30px) * -1)} .lnum-erc .ln-k{color:rgba(212,242,63,.68)} .lnum-erc .ln-u{color:rgba(212,242,63,.6)} .lnum-erc .ln-x{color:rgba(212,242,63,.9)} .lnum-erc .ln-h{color:rgba(212,242,63,.62)} .lnum-erc .ln-d{color:rgba(212,242,63,.5)} .lnum-erc .ln-d a{color:rgba(212,242,63,.78)} .lnum-erc .ln-tag{background:rgba(212,242,63,.16); color:var(--lima)} @media(max-width:900px){ /* em coluna unica o filete entre blocos sobrava: o painel preto ja separa */ .lnum-erc{margin-top:8px; padding-block:clamp(24px,5vw,32px)} .lnum-erc + .lnum,.lnum-erc{border-top:0} } /* ── o vazio dentro do painel ──────────────────────────────────────────── As colunas da grelha esticam por omissão até à altura da linha, e o painel preto, por cima disso, ainda levava 30 px de margem negativa de cada lado. Resultado: uma caixa com a altura da coluna mais alta mais 60 px, e o conteúdo todo encostado ao cimo. Com align-items:start cada coluna tem a sua altura e o painel fecha-se no fim do que lá está dentro. */ .lnums{align-items:start} /* ── a letra pequena era pequena de mais ───────────────────────────────── 13 px para a explicação e 11,5 px para a data, numa secção com espaço de sobra. Sobe tudo um degrau: o que não se lê não serve de nada, e aqui o que está escrito em miudinho é precisamente a prova de que os números são oficiais — a fonte, a data e o mercado. */ .ln-k{font-size:12px; letter-spacing:.13em} .ln-x{font-size:16.5px; margin-top:14px} .ln-h{font-size:15px; line-height:1.5; max-width:34ch; margin-top:12px} .ln-d{font-size:13px; margin-top:14px} .ln-u{font-size:clamp(13px,1.05vw,17px)} .ln-tag{font-size:10.5px} .ln-topo span{font-size:15px} .ln-nota{font-size:16px} /* ══════════════════════════════════════════════════════════════════════════ A PALETA: SO O LOGOTIPO, O PRETO E O OFF-WHITE As quatro paragens do gradiente do raio, e mais nada. O que precisa de ser mais claro ou mais escuro do que elas e a mesma cor com outra luminosidade, nunca uma cor nova. ══════════════════════════════════════════════════════════════════════════ */ :root{ /* o raio, tal e qual */ --logo-amarelo:#FFD90A; /* H51 S100 L52 */ --logo-verde-amarelo:#9FC30A; /* H72 S90 L40 */ --logo-verde-medio:#29A80A; /* H108 S89 L35 */ --logo-verde:#009F0A; /* H124 S100 L31 */ --escuro:#0B0B0A; --claro:#F2F2EE; /* derivados, so por luminosidade */ --lima:#D0F53D; /* o verde-amarelo do logo, de L40 para L60 */ --lima-clara:#DCF76E; /* o mesmo, para o rato por cima */ --amarelo-claro:#FFE44D; /* o amarelo do logo, de L52 para L65 */ --amarelo-escuro:#8A7500;/* o amarelo do logo, de L52 para L27 */ /* o que o resto da folha chama por outros nomes */ --primary:var(--logo-amarelo); --glow:var(--logo-verde-amarelo); --eyebrow:var(--logo-verde-amarelo); --deep:var(--escuro); --logo-grad:linear-gradient(90deg,var(--logo-verde),var(--logo-verde-amarelo) 58%,var(--logo-amarelo)); --grad:var(--logo-grad); } /* os estados do rato deixam de ser cores inventadas */ .btn-claro:hover{background:var(--amarelo-claro)} .hform .btn-p:hover{background:var(--lima-clara)} .todo{color:var(--amarelo-escuro)} /* ── os numeros desalinhados ───────────────────────────────────────────── A margem negativa de 30 px subia a caixa do painel, mas o padding de 30 px continuava a contar de dentro: o conteudo acabava 30 px acima do das outras colunas. A margem sai e os tres numeros assentam na mesma linha. */ .lnum-erc{margin-top:0; margin-bottom:0} /* ── as setas apontam para onde o botao leva ───────────────────────────── O formulario subiu para o segundo lugar da pagina. Todos estes botoes estao abaixo dele, por isso levam o visitante para CIMA — uma seta para baixo estava a mentir sobre o que ia acontecer. Vale para as ancoras, nao para o