/* ========================================================================== Elina Dias Nutricionista — estilo base Mobile-first. A página ROLA. Ela já foi travada em 100dvh, com tudo em uma tela só; a trava saiu para o hero poder mostrar a foto inteira e para os blocos entrarem com revelação conforme a rolagem. Cores e tipografia: identidade/design-guide.md ========================================================================== */ :root { --verde: #7A8B6F; /* verde sálvia/musgo — cor principal da marca */ --verde-escuro: #5F6E56; --verde-claro: #A6B39C; --bege: #EFEAE1; --bege-claro: #F7F4EF; --branco: #FFFFFF; --cinza: #8A8A86; --texto: #1F1F1D; --dourado: #B9A88A; /* apenas ornamentos finos */ --alerta: #8B2E2E; /* ponto de tensão, uso esporádico */ --fonte: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* Paleta viva — a mesma do blog. É a sálvia da marca com mais vida: o MATIZ é o mesmo (96° acima, 99° aqui), o que sobe é a saturação (11% -> 35%). Landing e blog compartilham estes tokens. */ --hero-verde: #5F8F45; /* botões, ícones, detalhes */ --hero-verde-forte: #47702F; /* hover e texto de destaque */ --hero-verde-suave: #A9C994; /* traços finos e folhas de fundo */ --hero-menta: #E9F3E1; /* fundo de blocos */ --hero-menta-clara: #F6FAF2; --hero-tinta: #22331A; /* títulos */ /* O hero e o cabeçalho voltaram ao bege da marca: a cliente achou o verde-escuro pesado demais. Os nomes seguem sendo de FUNÇÃO, então continuam corretos com o valor claro. */ --hero-fundo: #F7F4EF; /* fundo do hero e do cabeçalho */ --hero-sobre: #22331A; /* texto sobre esse fundo */ --hero-cinza: #5C6B55; /* texto de apoio */ --largura-max: 1160px; --raio: 4px; /* radius mínimo — a marca é de blocos retos */ --gutter: 1.1rem; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } body { margin: 0; /* min-height (não height): o rodapé fica no fim da tela quando a página é curta, mas a página cresce livremente quando o conteúdo pede. */ min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--bege-claro); color: var(--texto); font-family: var(--fonte); font-size: 1rem; font-weight: 400; line-height: 1.6; -webkit-font-smoothing: antialiased; } main { flex: 1 1 auto; display: flex; flex-direction: column; } /* ========================================================================== Revelação na rolagem Os blocos entram com um deslize curto quando aparecem na tela. ========================================================================== */ /* A classe .js é posta pelo próprio script no . Sem JavaScript, nada disto se aplica e todo o conteúdo continua visível — a animação é melhoria, nunca requisito para ler a página. */ .js [data-revelar] { opacity: 0; transform: translateY(18px); } .js [data-revelar].revelado { opacity: 1; transform: none; transition: opacity .55s cubic-bezier(.22, .61, .36, 1) var(--atraso, 0ms), transform .55s cubic-bezier(.22, .61, .36, 1) var(--atraso, 0ms); } /* Quem pediu menos movimento recebe o conteúdo direto, sem deslize. */ @media (prefers-reduced-motion: reduce) { .js [data-revelar] { opacity: 1; transform: none; } .js [data-revelar].revelado { transition: none; } } img, svg, picture { max-width: 100%; display: block; } img { height: auto; } ul { list-style: none; margin: 0; padding: 0; } a { color: var(--verde-escuro); text-underline-offset: 3px; } :focus-visible { outline: 2px solid var(--verde-escuro); outline-offset: 3px; } /* Utilitários de acessibilidade ------------------------------------------ */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .pular-para-conteudo { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--verde); color: var(--branco); padding: .75rem 1.25rem; font-weight: 600; text-decoration: none; } .pular-para-conteudo:focus { left: 0; } /* Título de seção — usado na landing e no blog ---------------------------- */ .secao__titulo { margin: 0; font-size: clamp(1.05rem, 4.6vw, 1.6rem); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; text-align: center; color: var(--texto); } .secao__subtitulo { margin: .75rem 0 0; font-size: clamp(.82rem, 3.2vw, .92rem); line-height: 1.6; text-align: center; color: var(--cinza); } /* Ornamento (linha + folha) ---------------------------------------------- */ .ornamento { display: flex; align-items: center; gap: .6rem; margin: 1.4rem 0; } .ornamento__linha { flex: 1; height: 1px; background: var(--dourado); opacity: .6; max-width: 90px; } .ornamento--curto { justify-content: center; margin: 0 auto; max-width: 180px; } .ornamento--curto .ornamento__linha { max-width: 50px; } /* ========================================================================== BLOCO ABOVE THE FOLD — uma tela cheia, sem rolagem ========================================================================== */ /* O botão de agendamento precisa aparecer ANTES de qualquer rolagem. Por isso as medidas do hero reagem à ALTURA da tela (dvh), e não só à largura: num aparelho de 568px de altura sobra muito menos espaço do que num de 932px. São clamps, não media queries — o ajuste é contínuo. */ .perfil { display: flex; flex-direction: column; gap: 0; padding: 0; background: var(--hero-fundo); } /* Cabeçalho da landing ---------------------------------------------------- Logo à ESQUERDA, menu à DIREITA — o mesmo arranjo da barra do blog. No CELULAR o cabeçalho rola junto com a página. Fixo ali, ele comeria uma faixa de uma tela que já é curta, e a gaveta do menu aberta cobriria quase tudo o que sobrasse. A partir de 900px ele gruda no topo — lá sobra altura e a navegação vale mais à mão. O fundo é o mesmo verde-escuro do hero, emendado nele: o cabeçalho é o topo do hero, não uma faixa em cima dele. */ .topo-site { /* `relative` + z-index, não `sticky`: o cabeçalho rola junto com a página, mas precisa de contexto de empilhamento próprio. Sem isto a gaveta do menu — que é absoluta dentro dele — abre ATRÁS do hero, que tem z-index 1. O menu funcionava e ficava invisível. */ position: relative; z-index: 50; background: var(--hero-fundo); } .topo-site__interno { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: clamp(.5rem, 1.6dvh, .9rem) var(--gutter); } /* A logo vem por último no HTML (canto direito), mas é a marca: no DOM ela fica depois do menu, e é isso que o leitor de tela também encontra. */ .topo-site__marca { display: inline-flex; flex: 0 0 auto; } .topo-site__marca img { width: clamp(120px, 34vw, 132px); height: auto; } /* Botão hambúrguer -------------------------------------------------------- */ .menu-botao { display: grid; place-items: center; width: 44px; /* alvo de toque cheio */ height: 44px; padding: 0; background: transparent; border: 1px solid rgba(122, 139, 111, .34); border-radius: 10px; color: var(--hero-sobre); cursor: pointer; transition: background-color .18s ease, border-color .18s ease; } .menu-botao:hover, .menu-botao:focus-visible { background: var(--hero-menta); border-color: var(--hero-verde); } .menu-botao__barras { display: grid; gap: 4px; width: 19px; } .menu-botao__barras span { display: block; height: 2px; background: currentColor; border-radius: 2px; transition: transform .22s ease, opacity .18s ease; } /* Aberto, as três barras viram um X. A do meio some; as outras cruzam. */ .menu-botao[aria-expanded='true'] .menu-botao__barras span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .menu-botao[aria-expanded='true'] .menu-botao__barras span:nth-child(2) { opacity: 0; } .menu-botao[aria-expanded='true'] .menu-botao__barras span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } @media (prefers-reduced-motion: reduce) { .menu-botao__barras span { transition: none; } .topo-site { transition: none; } } /* Menu --------------------------------------------------------------------- SEM JavaScript o menu é uma fileira de links comum e o botão nem aparece: a navegação nunca depende do script. É a classe .js — posta pelo próprio script antes da primeira pintura — que autoriza esconder. */ /* Sem `order`: a ordem visual é a do HTML — logo, botão, menu. */ .menu-site__lista { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem; } .menu-site__link { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .35rem .1rem; font-size: .82rem; font-weight: 500; color: var(--hero-sobre); text-decoration: none; border-bottom: 2px solid transparent; } .menu-site__link:hover, .menu-site__link:focus-visible { color: var(--hero-verde-forte); border-bottom-color: var(--hero-verde); } .menu-site__link--contato { color: var(--hero-verde-forte); } /* Com JS: o menu vira gaveta, aberta pelo botão. */ .js .menu-site { position: absolute; top: 100%; left: var(--gutter); right: var(--gutter); display: none; padding: .5rem .9rem; background: var(--branco); border: 1px solid rgba(122, 139, 111, .22); border-radius: 14px; box-shadow: 0 18px 40px rgba(34, 51, 26, .13); } .js .menu-site[data-aberto] { display: block; } .js .menu-site .menu-site__link { color: var(--hero-tinta); } .js .menu-site .menu-site__link:hover, .js .menu-site .menu-site__link:focus-visible { color: var(--hero-verde-forte); } .js .menu-site .menu-site__link--contato { color: var(--hero-verde-forte); } .js .menu-site__lista { flex-direction: column; align-items: stretch; gap: 0; } .js .menu-site__lista li + li { border-top: 1px solid rgba(122, 139, 111, .16); } .js .menu-site__link { border-bottom: 0; } .js .topo-site__interno { position: relative; } /* Hero — tudo centralizado, foto embaixo ---------------------------------- */ .hero { position: relative; display: grid; grid-template-columns: 1fr; align-items: stretch; background: var(--hero-fundo); } .hero__marca { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(.5rem, 1.6dvh, 1rem); padding: clamp(.5rem, 2dvh, 1.75rem) var(--gutter) clamp(.5rem, 1.5dvh, 1.25rem); text-align: center; } /* Rótulo pequeno acima do título. */ .hero__sobrancelha { margin: 0; font-size: clamp(.62rem, 2.6vw, .72rem); font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--hero-verde-forte); } /* Palavra em destaque na cor da marca. Não é itálico: é só o gancho semântico mais próximo de "esta palavra tem peso". */ .hero__titulo em { font-style: normal; color: var(--hero-verde-forte); } /* Faixa de credenciais. ESCONDIDA no celular de propósito: com ela visível o hero não cabe na primeira tela, e ter o botão de agendamento sem rolagem vale mais. Os mesmos dados seguem na seção "Sobre". */ .hero__credenciais { display: none; } /* O título é o h1 da página. Antes o h1 era a logo em imagem; com a logo no cabeçalho, o título virou TEXTO — que é melhor para busca e para leitor de tela do que um alt dentro de um h1. */ .hero__titulo { margin: 0; max-width: 15ch; font-size: clamp(2rem, 9.2vw, 2.9rem); font-weight: 700; line-height: 1.08; letter-spacing: -.02em; color: var(--hero-sobre); } .hero__bio { margin: 0; max-width: 34ch; font-size: clamp(.85rem, 3.6vw, 1rem); line-height: 1.5; color: var(--hero-cinza); } .hero__chamada { display: grid; justify-items: center; gap: .4rem; } /* Botão em pílula, como na referência. */ /* `inline-block`, não `inline-flex`: em 320px o rótulo quebra em duas linhas, e como item flexível a seta era empurrada para a borda direita do botão, longe do texto. Assim ela flui logo depois de "on-line", como pontuação. */ .hero__cta { display: inline-block; text-align: center; min-height: 50px; padding: .8rem 1.6rem; /* --hero-verde-forte, não --hero-verde. Medido: branco sobre #5F8F45 dá 3,82:1, abaixo do mínimo AA de 4,5:1 para texto normal — e este é o botão que a página inteira existe para fazer clicar. Sobre #47702F dá 5,79:1. A diferença a olho nu é pequena; a de legibilidade, não. */ background: var(--hero-verde-forte); border-radius: 999px; color: var(--branco); font-size: clamp(.82rem, 3.4vw, .95rem); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; box-shadow: 0 10px 24px rgba(71, 112, 47, .22); transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease; } .hero__cta:hover, .hero__cta:focus-visible { background: var(--area-fundo); transform: translateY(-1px); box-shadow: 0 14px 28px rgba(71, 112, 47, .28); } .hero__cta-seta { display: inline-block; margin-left: .5rem; vertical-align: -.18em; } @media (prefers-reduced-motion: reduce) { .hero__cta { transition: none; } .hero__cta:hover, .hero__cta:focus-visible { transform: none; } } .hero__nota { margin: 0; font-size: clamp(.68rem, 2.6vw, .78rem); letter-spacing: .1em; text-transform: uppercase; color: var(--hero-cinza); } /* Foto: largura inteira, dissolvendo no fundo. O teto de altura é o que garante lugar para o botão ANTES de qualquer rolagem — o botão vem antes dela no HTML justamente por isso. */ .hero__foto { position: relative; z-index: 1; margin: 0; overflow: hidden; } /* 4/5 é a proporção da foto original (820x1024): com a caixa na mesma proporção, `cover` não corta NADA — a imagem aparece inteira, do alto da cabeça ao fim do enquadramento. Não há teto de altura. Ele existia para reservar lugar ao botão de agendamento, mas o botão vem ANTES da foto no HTML: ela não tem como empurrá-lo para fora da dobra. */ .hero__foto img { width: 100%; aspect-ratio: 4 / 5; max-height: none; object-fit: cover; object-position: 50% 50%; } /* No CELULAR o hero inteiro cabe na primeira tela: cabeçalho, texto, botão e foto. A foto ocupa a sobra da tela (`1fr`) e é recortada para caber. Sem teto de altura ela pedia a proporção cheia — 450px de altura numa tela de 360 — e o total passava da dobra em qualquer aparelho com barra de navegação embaixo. Medido antes: a foto terminava em 790px numa tela de 740, e em 851 numa de 844. 88px é o cabeçalho no maior tamanho que ele assume no celular (medido: 76px em 360, 84 em 390, 86 em 412 e 430). Errar para mais deixa uma folga embaixo; errar para menos cortaria a foto. */ @media (max-width: 899px) { .hero { grid-template-rows: auto minmax(240px, 1fr); min-height: calc(100dvh - 88px); } /* Sem isto a linha do grid não encolhe abaixo do conteúdo. */ .hero__foto { min-height: 0; } /* Absoluta para não inflar a linha com a altura natural da imagem: no fluxo, os 1024px de alto refaziam a conta e a dobra estourava de novo. A âncora em 12% preserva o alto da cabeça — o corte sai por baixo. */ .hero__foto img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 50% 12%; } } /* A foto não termina em aresta: ela se dissolve no fundo da página pelos quatro lados. É o que faz a imagem parecer parte da página em vez de uma foto colada em cima — e é o que a referência resolve com PNG recortado, recurso que esta foto (com parede e estante atrás) não tem. Gradiente em cor chapada (não máscara): `mask-image` foi medido aqui e não funcionou. */ /* No celular a dissolução fica SÓ no topo: é ali que a foto encosta no bloco de texto e precisa emendar no verde. Embaixo e nas laterais ela termina reta, na borda da própria imagem. */ .hero__foto::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, var(--hero-fundo) 0%, rgba(247, 244, 239, 0) 22%); } /* Linha de ícones sociais ------------------------------------------------- */ .sociais { display: flex; justify-content: center; gap: .6rem; } .social { display: grid; place-items: center; width: clamp(30px, min(8.5vw, 4.6dvh), 40px); height: clamp(30px, min(8.5vw, 4.6dvh), 40px); border: 1px solid rgba(95, 143, 69, .35); border-radius: 50%; color: var(--hero-verde-forte); text-decoration: none; transition: background-color .2s ease, color .2s ease, border-color .2s ease; } .social:hover, .social:focus-visible { background: var(--hero-verde); color: var(--branco); border-color: var(--hero-verde); } .social--pequeno { width: 30px; height: 30px; } /* O blog saiu do ar "em breve" e virou link de verdade em /blog/. A regra .social--breve foi removida junto com o que ela pintava. */ /* Rodapé "Conecte-se" ------------------------------------------------------ Este bloco também foi apagado por engano junto com o CSS da pilha de cards, e ficou sem CSS nenhum em TODAS as páginas: "Conecte-se" e os créditos encostavam na margem esquerda enquanto os ícones ficavam no meio. Nada disso dá erro de build — CSS que some some calado. */ .rodape { flex: none; display: grid; /* Centraliza os três blocos no eixo: rótulo, ícones e créditos. */ justify-items: center; gap: clamp(.45rem, 2vw, .6rem); padding: clamp(1.5rem, 6vw, 2.25rem) var(--gutter) clamp(1.5rem, 5vw, 2rem); background: var(--bege-claro); border-top: 1px solid rgba(122, 139, 111, .16); } .rodape__conecte { margin: 0; font-size: clamp(.66rem, 2.5vw, .74rem); font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--hero-verde-forte); } .sociais--rodape { gap: .5rem; } /* `text-align` além do `justify-items`: em duas linhas, o grid centraliza a CAIXA e o texto dentro dela continuaria alinhado à esquerda. */ .rodape__creditos { margin: 0; max-width: 46ch; font-size: clamp(.56rem, 2.2vw, .66rem); line-height: 1.4; text-align: center; color: var(--cinza); } /* Botão flutuante do WhatsApp ------------------------------------------- Canto inferior direito, fixo em todas as páginas. O VLibras ocupa o MEIO da mesma lateral (`top: calc(50vh - 20px)`), então um não cobre o outro. z-index abaixo do dele (2147483639) e acima de tudo que é nosso. 56px de lado: acima dos 44px mínimos de alvo de toque, com folga para quem tem menos precisão no dedo. */ .zap-flutuante { position: fixed; right: clamp(.85rem, 3.5vw, 1.4rem); bottom: clamp(.85rem, 3.5vw, 1.4rem); z-index: 60; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--hero-verde-forte); color: var(--branco); box-shadow: 0 6px 20px rgba(34, 51, 26, .28); transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; } .zap-flutuante:hover, .zap-flutuante:focus-visible { background: var(--hero-tinta); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(34, 51, 26, .34); } /* Quem pede menos movimento continua com a mudança de cor, que é o que confirma o foco — só o deslocamento sai. */ @media (prefers-reduced-motion: reduce) { .zap-flutuante { transition: background-color .2s ease; } .zap-flutuante:hover, .zap-flutuante:focus-visible { transform: none; } } /* Assinatura de quem desenvolveu o site. Herda a mesma gramática do rodapé — rótulo em versalete espaçado, igual ao "Conecte-se" — para não parecer um adesivo colado de fora. O que muda é a voz: o nome sai em monoespaçada, que é a assinatura da electricCoffee.lab. Monoespaçada do sistema, sem baixar fonte: uma linha de crédito não vale uma requisição a mais no carregamento da página da cliente. O fio acima separa sem pesar: é o mesmo verde de baixa opacidade da borda do rodapé. */ .assinatura { display: grid; justify-items: center; gap: .2rem; width: min(320px, 70%); margin-top: clamp(.6rem, 2.5vw, 1rem); padding-top: clamp(.7rem, 2.5vw, 1rem); border-top: 1px solid rgba(122, 139, 111, .16); } .assinatura__rotulo { margin: 0; font-size: clamp(.46rem, 1.8vw, .54rem); font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--cinza); } /* JetBrains Mono 700: é a letra da assinatura. A monoespaçada do sistema (Liberation, DejaVu) tem avanço largo e traço fino — a mesma palavra sai mais comprida e mais leve, e era isso que fugia da referência. */ .assinatura__marca { margin: 0; font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; font-size: clamp(.68rem, 2.6vw, .76rem); font-weight: 700; letter-spacing: 0; color: var(--hero-tinta); } /* ========================================================================== Hero — telas maiores Estes blocos já foram apagados uma vez: eles ficavam colados no CSS da pilha de cards, e a remoção do CSS órfão levou os dois juntos. O sintoma era mudo — nenhum erro de build, só a página perdendo o desktop inteiro. ========================================================================== */ @media (min-width: 600px) { :root { --gutter: 2rem; } } @media (min-width: 900px) { :root { --gutter: 3rem; } /* Fixo só aqui. `relative` continua valendo no celular e é o que dá ao cabeçalho contexto de empilhamento próprio — sem ele, a gaveta do menu abre atrás do hero. */ .topo-site { position: sticky; top: 0; box-shadow: 0 6px 24px rgba(12, 20, 9, .22); } /* Com a barra grudada no topo, um salto para #areas ou #sobre deixaria o título da seção escondido atrás dela. A folga é a altura do cabeçalho: 1rem de respiro em cima e embaixo mais a logo de 168px, que na proporção 600x259 tem 72px de altura. */ .perfil, .areas, .sobre, .depoimentos { scroll-margin-top: 112px; } .topo-site__interno { padding-block: 1rem; } .topo-site__marca img { width: 168px; } /* Acima de 900px o menu volta a ser fileira: sobra largura, e esconder links atrás de um botão só faria o visitante clicar à toa. */ .js .menu-site { position: static; display: block; padding: 0; background: transparent; border: 0; box-shadow: none; } .js .menu-site__lista { flex-direction: row; align-items: center; gap: 1.4rem; } .js .menu-site__lista li + li { border-top: 0; } .js .menu-site .menu-site__link { border-bottom: 2px solid transparent; color: var(--hero-sobre); } .js .menu-site .menu-site__link:hover, .js .menu-site .menu-site__link:focus-visible { color: var(--hero-verde-forte); border-bottom-color: var(--hero-verde); } .js .menu-site .menu-site__link--contato { color: var(--hero-verde-forte); } .menu-botao { display: none; } /* No computador o hero vira DUAS COLUNAS: texto à esquerda, foto ocupando a metade direita de ponta a ponta. A foto sai do fluxo (absoluta) para encostar no topo e na base sem esticar a linha do grid — no fluxo, a altura natural dela empurraria o botão para fora da dobra. */ .hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; min-height: clamp(560px, 86dvh, 900px); } .hero__marca { align-items: flex-start; text-align: left; width: min(100%, calc(var(--largura-max) / 2 + 4rem)); margin-inline: auto 0; margin-left: max(var(--gutter), calc((100vw - var(--largura-max)) / 2)); padding: 0 var(--gutter) 0 0; gap: 1.15rem; } .hero__titulo { font-size: clamp(2.6rem, 4.4vw, 3.9rem); max-width: 16ch; } .hero__bio { font-size: 1.05rem; max-width: 44ch; } .hero__chamada { justify-items: start; } .hero__cta { border-radius: 6px; padding: .95rem 2rem; } .hero__credenciais { display: flex; flex-wrap: wrap; gap: 0; margin: .75rem 0 0; padding: 0; list-style: none; } .hero__credenciais li { display: grid; gap: .15rem; padding: 0 1.5rem; border-left: 1px solid rgba(122, 139, 111, .30); } .hero__credenciais li:first-child { padding-left: 0; border-left: 0; } .hero__credencial-valor { font-size: 1.2rem; font-weight: 700; line-height: 1.1; color: var(--hero-verde-forte); } .hero__credencial-rotulo { font-size: .78rem; color: var(--hero-cinza); } /* A foto NÃO ocupa a faixa inteira. É um retrato próximo (1844x2304); esticado em 1440px de largura com `cover`, o corte deixava só a testa — medido, não suposto. Numa coluna centralizada ela cabe do alto da cabeça aos ombros. A altura continua presa a dvh: sem teto, o retrato pediria mais de 1700px e empurraria o botão para fora da dobra. */ /* A foto ocupa a metade direita inteira, do topo à base. */ /* A largura sai da ALTURA, não da tela: com `aspect-ratio` na proporção da foto (4/5) e `width: auto`, a caixa acompanha o hero e a imagem aparece inteira em qualquer monitor. Com largura fixa em %, telas largas cortavam até 27% da foto na vertical — o alto da cabeça sumia em 1920. `inset` já deixa `left: auto`, que é o que permite a largura resolver. O teto de 52% é para tela alta e estreita, onde a proporção faria a foto invadir o texto. */ .hero__foto { position: absolute; inset: 0 0 0 auto; width: auto; max-width: 52%; aspect-ratio: 4 / 5; margin: 0; } .hero__foto img { width: 100%; height: 100%; aspect-ratio: auto; max-height: none; object-fit: cover; /* Âncora perto do topo: é um retrato próximo, e centralizar cortaria a cabeça dela. */ object-position: 50% 12%; } /* Aqui a dissolução é LATERAL: é ela que emenda a foto no verde e deixa o texto respirar. Para a 42% da largura da foto porque o rosto começa por ali — indo além, o degradê escurecia justamente o que a imagem existe para mostrar. */ .hero__foto::after { background: linear-gradient(to right, var(--hero-fundo) 0%, rgba(247, 244, 239, .42) 15%, rgba(247, 244, 239, 0) 42%), linear-gradient(to bottom, var(--hero-fundo) 0, rgba(247, 244, 239, 0) 24px); } } /* ========================================================================== Áreas de atendimento — cartões escuros Layout da referência: ícone em line art no topo, título e descrição. O fundo escuro é o verde da marca levado ao extremo escuro, não um teal novo: continua na mesma família. ========================================================================== */ :root { /* Verde escuro dos cartões. Medido: título em branco dá 12,3:1 e a descrição em branco a 72% dá 7,2:1 — folga confortável sobre o mínimo AA de 4,5:1. Se um dia clarear este fundo, SUBA a opacidade da descrição junto: em #47702F, os mesmos 72% caem para 3,9:1, abaixo do mínimo. */ --area-fundo: #253A1E; --area-fundo-hover: #2E4724; } .areas { padding: clamp(2.5rem, 9vw, 4.5rem) 0 clamp(2.5rem, 8vw, 4rem); /* Mesmo fundo da página: a seção não precisa de faixa própria, quem marca presença aqui são os cartões escuros. */ background: var(--bege-claro); } .areas__interno { width: 100%; max-width: var(--largura-max); margin-inline: auto; padding-inline: var(--gutter); } .areas__grade { display: grid; grid-template-columns: 1fr; gap: clamp(.75rem, 2.5vw, 1.1rem); margin: clamp(1.25rem, 4vw, 2rem) 0 0; padding: 0; } .area { display: grid; align-content: start; gap: .55rem; padding: clamp(1.15rem, 4vw, 1.6rem); border-radius: 14px; background: var(--area-fundo); transition: background-color .2s ease, transform .2s ease; } .area:hover { background: var(--area-fundo-hover); transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { .area:hover { transform: none; } } .area__icone { display: block; color: var(--hero-verde-suave); } .area__titulo { margin: 0; font-size: clamp(.95rem, 3.8vw, 1.05rem); font-weight: 600; line-height: 1.3; color: var(--branco); } .area__desc { margin: 0; font-size: clamp(.78rem, 3vw, .84rem); line-height: 1.6; /* Branco a 72%: dá hierarquia sem cair abaixo do contraste mínimo contra o fundo escuro (medido: 7,2:1). */ color: rgba(255, 255, 255, .72); } @media (min-width: 600px) { .areas__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 900px) { .areas__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } .area { min-height: 190px; } } /* ========================================================================== Seção "Sobre" — foto de um lado, painel do outro Layout da referência. A cor do painel é o bege da marca com texto escuro, e não o pêssego saturado da referência: o design-guide proíbe cor saturada fora do vermelho de alerta. Mobile-first: empilha, foto em cima. ========================================================================== */ .sobre { display: grid; grid-template-columns: 1fr; /* Faixa mais quente que o resto da página: é o que separa esta seção da de cima, que compartilha o fundo geral. */ background: var(--bege); } .sobre__foto { margin: 0; } .sobre__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 22%; } .sobre__painel { display: grid; align-content: center; gap: 1rem; padding: clamp(1.75rem, 7vw, 3rem) var(--gutter) clamp(2rem, 8vw, 3.5rem); } .sobre__titulo { margin: 0; font-size: clamp(1.35rem, 6vw, 2rem); font-weight: 700; line-height: 1.2; letter-spacing: -.015em; color: var(--hero-tinta); } .sobre__painel p { margin: 0; max-width: 54ch; font-size: clamp(.86rem, 3.4vw, .95rem); line-height: 1.7; color: var(--hero-cinza); } /* A frase que a Elina usa para resumir o trabalho. Sai do parágrafo corrido e ganha um filete verde: é a única linha da seção que precisa ser lida mesmo por quem só passa o olho. */ .sobre__painel p.sobre__destaque { padding-left: clamp(.9rem, 3.5vw, 1.15rem); border-left: 3px solid var(--hero-verde-forte); font-size: clamp(.92rem, 3.7vw, 1.05rem); font-weight: 500; line-height: 1.55; color: var(--hero-tinta); } /* Credenciais — o que a referência resolvia com um botão "Formação". Aqui é conteúdo de verdade, e não um link para uma página que não existe. */ .sobre__credenciais { display: grid; gap: .6rem; margin: .5rem 0 0; padding: 1rem 0 0; border-top: 1px solid rgba(95, 143, 69, .28); } .sobre__credenciais li { display: grid; gap: .1rem; } .sobre__credencial-rotulo { font-size: .62rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--hero-verde-forte); } .sobre__credencial-valor { font-size: clamp(.8rem, 3.1vw, .88rem); line-height: 1.45; color: var(--hero-tinta); } .sobre__botao { display: inline-flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; max-width: 380px; min-height: 56px; margin-top: .5rem; padding: .9rem 1.25rem; border: 1.5px solid var(--hero-verde-forte); border-radius: 12px; color: var(--hero-verde-forte); font-size: clamp(.8rem, 3.2vw, .88rem); font-weight: 600; text-decoration: none; transition: background-color .2s ease, color .2s ease, transform .2s ease; } .sobre__botao:hover, .sobre__botao:focus-visible { background: var(--hero-verde-forte); color: var(--branco); transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { .sobre__botao:hover, .sobre__botao:focus-visible { transform: none; } } @media (min-width: 900px) { .sobre { grid-template-columns: 1fr 1fr; align-items: stretch; } /* A foto preenche a coluna sem definir a altura dela — mesma armadilha do hero: no fluxo, a altura natural da imagem estica a linha inteira. */ .sobre__foto { position: relative; min-height: 560px; } .sobre__foto img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; } .sobre__painel { padding: clamp(2.5rem, 5vw, 4rem); gap: 1.15rem; } } /* ========================================================================== Depoimentos — carrossel A rolagem é scroll-snap nativo: funciona por toque, trackpad e teclado sem JavaScript. Os pontinhos e as setas só aparecem com JS. Mobile-first: um cartão por vez, dois no tablet, três no desktop. ========================================================================== */ .depoimentos { padding: clamp(2.5rem, 9vw, 4.5rem) 0 clamp(2.5rem, 8vw, 4rem); background: var(--bege-claro); } .depoimentos__interno { width: 100%; max-width: var(--largura-max); margin-inline: auto; padding-inline: var(--gutter); } .secao__titulo--esquerda { text-align: left; } .carrossel { margin-top: clamp(1.25rem, 4vw, 2rem); } .carrossel__trilho { display: grid; grid-auto-flow: column; grid-auto-columns: 86%; gap: clamp(.75rem, 2.5vw, 1.25rem); margin: 0; padding: 0 0 .5rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; } .carrossel__trilho::-webkit-scrollbar { display: none; } .carrossel__trilho:focus-visible { outline: 2px solid var(--hero-verde-forte); outline-offset: 4px; } .depoimento { scroll-snap-align: start; } .depoimento__caixa { display: flex; flex-direction: column; gap: 1rem; height: 100%; margin: 0; padding: clamp(1.15rem, 4vw, 1.6rem); background: var(--branco); border: 1px solid rgba(95, 143, 69, .28); border-radius: 14px; } .depoimento__texto { margin: 0; /* Cresce para empurrar a assinatura ao rodapé do cartão, e centra o próprio texto nesse espaço: com relatos de tamanhos diferentes, o curto ficava colado no topo com um vazio embaixo. */ flex: 1; display: flex; align-items: center; font-size: clamp(.84rem, 3.3vw, .92rem); font-style: italic; line-height: 1.65; color: var(--hero-cinza); } .depoimento__autoria { margin: 0; } .depoimento__autoria cite { font-size: .72rem; font-style: normal; font-weight: 600; letter-spacing: .06em; color: var(--hero-verde-forte); } /* Controles ---------------------------------------------------------------- */ .carrossel__controles { display: flex; align-items: center; justify-content: center; gap: .75rem; margin-top: clamp(1rem, 3vw, 1.5rem); } .carrossel__seta { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(95, 143, 69, .35); border-radius: 50%; background: var(--branco); color: var(--hero-verde-forte); cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease; } .carrossel__seta:hover:not(:disabled), .carrossel__seta:focus-visible:not(:disabled) { background: var(--hero-verde); border-color: var(--hero-verde); color: var(--branco); } .carrossel__seta:disabled { opacity: .35; cursor: default; } .carrossel__pontos { display: flex; align-items: center; gap: .45rem; margin: 0; padding: 0; } .carrossel__ponto { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(95, 143, 69, .32); cursor: pointer; transition: background-color .2s ease, width .2s ease; } .carrossel__ponto[aria-current='true'] { width: 22px; border-radius: 4px; background: var(--hero-verde); } /* Alvo de toque de 44px sem bolinha gigante: a área clicável cresce por fora, com um pseudo-elemento transparente. */ .carrossel__ponto { position: relative; } .carrossel__ponto::after { content: ''; position: absolute; inset: -18px -7px; } /* Sem JavaScript os controles não existiriam: escondidos por padrão no HTML e revelados pelo script. Esta regra é a rede de segurança. */ html:not(.js) .carrossel__controles { display: none; } @media (min-width: 600px) { .carrossel__trilho { grid-auto-columns: 46%; } } @media (min-width: 900px) { .carrossel__trilho { grid-auto-columns: 31.6%; } .carrossel__controles { justify-content: flex-start; } }