/* ========================================================================= Raquel Niejelski — Psicóloga Paleta VERDE botânica. Superfícies escuras, texto claro. Todos os pares de cor verificados em WCAG 2.1 (tabela no README). ========================================================================= */ /* As fontes são declaradas no do index.html, não aqui. Um @import nesta posição obriga o navegador a baixar e interpretar este arquivo inteiro antes de sequer descobrir que precisa das fontes. */ /* ---------- tokens ---------- */ :root { /* ---- superfícies ---- 99% da página era escura e as 727 palavras eram lidas sobre fundo escuro. Isso causa halação (a letra clara sangra no fundo) e cansa em leitura longa. A saída foi introduzir UMA superfície clara de areia para as seções de leitura pesada, sem inverter o site. */ --ink: #181F14; /* quase preto — rodapé, abordagem, faixa 1 */ --g700: #3A4832; /* verde principal — hero, sobre, dúvidas */ --g600: #506742; /* faixa de citação e chamada final */ --areia: #E8E2D0; /* superfície CLARA — é pra você, como funciona */ --areia-card: #DDD5BF; /* cards sobre areia */ --g500: #5F7F49; /* SÓ borda/decoração — reprova em texto */ --g800: var(--ink); /* compatibilidade com regras antigas */ --g900: var(--ink); /* texto sobre escuro */ --cream: #F7F4E8; /* 8.9:1 no g700 · 15.3:1 no ink */ --cream-2: #D3DBC4; /* 6.8:1 no g700 · 11.8:1 no ink */ --sage-pale: #BCC9A6; /* 5.6:1 no g700 */ /* texto sobre areia */ --tinta: #232A1C; /* 11.4:1 na areia */ --tinta-2: #4F5744; /* 5.8:1 na areia */ /* acentos — dois jogos, porque o dourado REPROVA sobre areia (3.9:1) */ --coral: #E8845F; /* sobre escuro */ --coral-soft: #F09A78; /* hover */ --gold: #DDB863; /* rótulos sobre escuro — 5.2:1 */ --coral-esc: #A8451F; /* ícones sobre areia */ --verde-esc: #3F5730; /* rótulos sobre areia — 6.2:1 */ /* linhas */ --line: rgba(195, 212, 168, .20); --line-strong: rgba(195, 212, 168, .38); /* ---- tokens semânticos ---- Os componentes usam ESTES, nunca as cores diretas. Assim uma seção clara só precisa redefinir o bloco, e cards, rótulos, ícones, linhas e textos se ajustam sozinhos. Padrão = tema escuro. */ --superficie: var(--g700); --superficie-card: var(--ink); --txt: var(--cream); --txt-2: var(--cream-2); --linha: var(--line); --linha-forte: var(--line-strong); --acento-rotulo: var(--gold); --acento-icone: var(--coral); /* Elevação também é temática: em fundo escuro o volume vem do fio de luz na aresta de cima; em fundo claro, de sombra difusa comum. */ --sombra-card: inset 0 1px 0 rgba(219, 232, 199, .11), 0 2px 4px rgba(0, 0, 0, .18), 0 10px 28px -14px rgba(0, 0, 0, .45); --sombra-card-hover: inset 0 1px 0 rgba(219, 232, 199, .20), 0 4px 8px rgba(0, 0, 0, .22), 0 18px 44px -18px rgba(0, 0, 0, .55); /* ---- tipografia ---- */ --serif: 'Sorts Mill Goudy', Georgia, 'Times New Roman', serif; --sans: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Escala modular — razão 1.2 (terça menor), ancorada no corpo de 19px. Antes havia 13 tamanhos escolhidos um a um, com razões entre degraus variando de 1.06 a 1.39: na prática, escala nenhuma. Agora todo tamanho do site sai desta lista. Em rem sobre raiz de 16px. */ --fs-2xs: 0.688rem; /* 11.0 — rótulos micro */ --fs-xs: 0.825rem; /* 13.2 — menu, eyebrow */ --fs-sm: 0.988rem; /* 15.8 — botões, texto de card */ --fs-md: 1.1875rem; /* 19.0 — CORPO (âncora) */ --fs-lg: 1.425rem; /* 22.8 — lead, título de card */ --fs-xl: 1.713rem; /* 27.4 — citação menor */ --fs-2xl: 2.05rem; /* 32.8 — citação maior */ --fs-3xl: 2.956rem; /* 47.3 — título de seção */ --fs-4xl: 3.544rem; /* 56.7 — título da chamada */ --fs-5xl: 4.25rem; /* 68.0 — título do hero */ /* Entrelinha por papel. Títulos herdavam 1.72 do corpo — um h3 de 21px ficava com 37px entre linhas, parecendo texto corrido. */ --lh-display: 1.05; --lh-titulo: 1.28; --lh-corpo: 1.72; /* espaçamento generoso */ --space-2xs: .5rem; --space-xs: 1rem; --space-sm: 1.5rem; --space-md: 2.5rem; --space-lg: 4rem; --space-xl: 6rem; --section: clamp(5rem, 11vw, 9rem); --container: 1170px; /* mesma medida da referência */ --narrow: 600px; /* FAQ */ --narrow-cta: 720px; /* chamada final */ --measure: 64ch; --ease: cubic-bezier(.22, .61, .36, 1); /* Escala ÚNICA do padrão botânico. Estava em 265px no hero, 210px na faixa e 240px na chamada — em seções vizinhas o olho lê na hora que os ladrilhos não encaixam. */ --padrao: 240px; } /* ---------- reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--g700); } body { margin: 0; background: var(--g700); color: var(--cream); font-family: var(--serif); font-size: var(--fs-md); line-height: 1.72; -webkit-font-smoothing: antialiased; overflow-x: clip; /* clip (e não hidden) preserva o sticky do header */ } img { max-width: 100%; height: auto; display: block; } /* BUG CORRIGIDO: sem esta linha os títulos herdavam a entrelinha do corpo (1.72). Doze deles — h3 dos cards, dos passos e h4 do rodapé — ficavam frouxos como parágrafo. */ h1, h2, h3, h4 { font-weight: 400; margin: 0; letter-spacing: -0.005em; line-height: var(--lh-titulo); text-wrap: balance; } p { margin: 0 0 1.15em; } p:last-child { margin-bottom: 0; } ::selection { background: var(--coral); color: var(--g900); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ---------- utilitários ---------- */ .container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; } /* Sem isto, clicar num link do menu leva a seção para debaixo do header fixo: ele tem ~90px e o título encostava a 11px dele. */ :target, main > section[id] { scroll-margin-top: 7rem; } .measure { max-width: var(--measure); } .skip-link { position: absolute; left: -9999px; background: var(--cream); color: var(--g900); padding: 1rem 1.5rem; z-index: 200; font-family: var(--sans); font-size: var(--fs-sm); } .skip-link:focus { left: 1rem; top: 1rem; } :focus-visible { outline: 2px solid var(--acento-rotulo); outline-offset: 3px; border-radius: 2px; } .eyebrow { font-family: var(--sans); font-size: var(--fs-xs); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--acento-rotulo); margin: 0 0 var(--space-sm); display: flex; align-items: center; gap: .75rem; } .eyebrow::after { content: ''; flex: 0 0 44px; height: 1px; background: var(--linha-forte); } .eyebrow--center { justify-content: center; } .eyebrow--center::before { content: ''; flex: 0 0 44px; height: 1px; background: var(--linha-forte); order: -1; } /* ---------- tipografia de display ---------- */ /* Escala calcada na referência: hero 68px, títulos de seção 48px. */ /* Todos os degraus abaixo saem da escala. O mínimo do clamp é sempre dois degraus abaixo do máximo, então a proporção se mantém no mobile. */ .display-xl { font-size: clamp(var(--fs-2xl), 5.6vw, var(--fs-5xl)); /* 32.8 → 68 */ line-height: var(--lh-display); letter-spacing: -0.016em; } .display-lg { font-size: clamp(var(--fs-xl), 3.9vw, var(--fs-3xl)); /* 27.4 → 47.3 */ line-height: 1.1; letter-spacing: -0.012em; } .display-md { font-size: clamp(var(--fs-lg), 2.4vw, var(--fs-xl)); /* 22.8 → 27.4 */ line-height: var(--lh-titulo); } .lead { font-size: clamp(var(--fs-md), 1.7vw, var(--fs-lg)); /* 19 → 22.8 */ line-height: 1.66; color: var(--cream-2); } em { font-style: italic; } /* ---------- botões ---------- */ /* Botão em pílula, como o da referência: raio 100px, texto em caixa normal, ~17px, sem tracking largo. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .65rem; min-height: 60px; padding: 1.5rem 2.5rem; font-family: var(--sans); font-size: var(--fs-md); /* 19px — degrau-âncora da escala */ font-weight: 400; line-height: 1; letter-spacing: .01em; text-decoration: none; cursor: pointer; border: 1px solid transparent; border-radius: 100px; transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease); } .btn svg { flex: 0 0 auto; } .btn--primary { background: var(--coral); color: var(--g900); /* 5.3:1 ✓ */ } .btn--primary:hover { background: var(--coral-soft); transform: translateY(-2px); } .btn--ghost { background: transparent; color: var(--cream); border-color: var(--line-strong); } .btn--ghost:hover { border-color: var(--sage-pale); background: rgba(251,246,234,.07); } .btn--light { background: var(--cream); color: var(--g900); /* 13:1 ✓ */ } .btn--light:hover { background: #fff; transform: translateY(-2px); } /* ---------- header ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: transparent; border-bottom: 1px solid transparent; transition: background-color .35s var(--ease), border-color .35s var(--ease); } .site-header.is-stuck { background: rgba(32, 48, 26, .90); backdrop-filter: blur(10px); border-bottom-color: var(--line); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: 1.5rem 0; } .brand { text-decoration: none; color: var(--cream); line-height: 1.2; padding: .3rem 0; display: block; } .brand__name { display: block; font-size: var(--fs-lg); } .brand__crp { display: block; font-family: var(--sans); font-size: var(--fs-2xs); letter-spacing: .16em; text-transform: uppercase; color: var(--sage-pale); margin-top: .2rem; } .nav { display: flex; align-items: center; gap: var(--space-md); } .nav__list { display: flex; gap: var(--space-md); list-style: none; margin: 0; padding: 0; } .nav__list a { font-family: var(--sans); font-size: var(--fs-xs); letter-spacing: .08em; color: var(--cream-2); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; padding: .5rem 0; position: relative; transition: color .2s var(--ease); } .nav__list a::after { content: ''; position: absolute; left: 0; bottom: .6rem; width: 0; height: 1px; background: var(--gold); transition: width .28s var(--ease); } .nav__list a:hover { color: var(--cream); } .nav__list a:hover::after { width: 100%; } /* Seção em que o visitante está. Numa página de ~6.600px com 5 links, não havia nenhuma indicação de onde ele se encontra. */ .nav__list a[aria-current="true"] { color: var(--cream); } .nav__list a[aria-current="true"]::after { width: 100%; background: var(--coral); } .nav__cta { padding: .5rem 1.5rem; min-height: 44px; font-size: var(--fs-sm); } .nav-toggle { display: none; background: none; border: 1px solid var(--line-strong); border-radius: 2px; width: 46px; height: 46px; cursor: pointer; align-items: center; justify-content: center; color: var(--cream); } @media (max-width: 940px) { .nav__list { display: none; } .nav__cta { display: none; } .nav-toggle { display: inline-flex; } .nav.is-open .nav__list { display: flex; flex-direction: column; position: absolute; inset: 100% 0 auto 0; background: var(--g900); border-block: 1px solid var(--line); padding: var(--space-sm) 1.5rem var(--space-md); gap: var(--space-xs); } .nav.is-open .nav__cta { display: inline-flex; } } /* ---------- hero ---------- Full-bleed como o da referência: o padrão botânico faz o papel da foto de fundo, com um véu verde por cima garantindo a legibilidade do texto. Título centralizado, altura mínima de 700px. */ /* O padrão saiu do `background-image` da seção e foi para o ::before para poder se mover sozinho no scroll. Como camadas de background pintam abaixo dos pseudo-elementos, o véu de legibilidade precisou virar ::after — a ordem final é: cor de fundo → padrão (::before) → véu (::after) → texto. */ .hero { position: relative; min-height: 700px; display: flex; align-items: center; text-align: center; overflow: hidden; /* contém a sobra vertical do padrão */ padding: calc(var(--space-xl) + 2rem) 0 var(--space-xl); background-color: var(--g700); } /* O padrão vinha em `opacity: 1`, escurecido só pelo véu — muito mais presente aqui do que nas outras seções, e a intensidade despencava na emenda com a faixa de baixo. Agora usa opacidade explícita, na mesma ordem de grandeza do resto. */ .hero::before { content: ''; position: absolute; inset: -10% 0; /* sobra para o deslocamento não descobrir a borda */ background-image: url('../assets/padrao.svg'); background-size: var(--padrao) var(--padrao); opacity: .30; pointer-events: none; } /* Véu de legibilidade. A cor estava fixa em rgba(32,48,26) — o --g900 ANTIGO. Quando a paleta mudou, o hero ficou tingido por uma cor que não existe mais no sistema. Agora acompanha a superfície da seção. */ .hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(58, 72, 50, .46), rgba(58, 72, 50, .60)); pointer-events: none; } .hero__inner { position: relative; z-index: 1; /* acima do padrão e do véu */ max-width: 790px; margin-inline: auto; } .hero__title { margin-bottom: var(--space-sm); } .hero__title em { color: var(--gold); } .hero__lead { margin-bottom: var(--space-md); margin-inline: auto; max-width: 46ch; } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); justify-content: center; } .hero__note { margin-top: var(--space-md); font-family: var(--sans); font-size: var(--fs-sm); letter-spacing: .04em; /* --sage-pale reprova aqui: sobre a folha mais clara do padrão dá 3.9:1. O hero é a única superfície texturizada sob texto pequeno. */ color: var(--cream-2); } @media (max-width: 700px) { .hero { min-height: 0; padding: var(--space-xl) 0; } } /* retrato retangular, na proporção da referência (550x716) */ .portrait { position: relative; border-radius: 3px; overflow: hidden; background-color: var(--g800); background-image: url('../assets/padrao.svg'); background-size: 200px 200px; aspect-ratio: 550 / 716; border: 1px solid var(--line-strong); box-shadow: inset 0 1px 0 rgba(219, 232, 199, .14), 0 4px 10px rgba(0, 0, 0, .28), 0 28px 64px -30px rgba(0, 0, 0, .70); } .portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; /* A proporção da foto (0.778) é quase igual à do arco (4/5 = 0.800), então quase nada é cortado e ela aparece inteira. Para enquadrar mais perto do rosto, descomente as duas linhas abaixo e ajuste a escala: */ /* transform: scale(1.28); */ /* transform-origin: center 18%; */ } /* A foto tem fundo claro; este degradê ancora a base dela no verde do site, para o retrato não parecer um recorte flutuando. */ .portrait::after { content: ''; position: absolute; inset: auto 0 0 0; height: 38%; background: linear-gradient(to top, rgba(32, 48, 26, .58), transparent); pointer-events: none; } /* BUG CORRIGIDO: a elevação do retrato tinha sumido. A classe `.portrait--framed` deixou de ser usada quando o arco virou retângulo, e com ela o site ficou com uma única sombra no total (a do botão flutuante). Agora a elevação está na própria `.portrait`. */ /* `z-index: 0` cria contexto de empilhamento aqui de propósito. Sem ele o ::after de z-index negativo é pintado ANTES do fundo das seções (ordem de pintura do CSS: filhos com z-index negativo vêm antes dos fundos de blocos não posicionados) — ou seja, a moldura ficava escondida atrás do verde e nunca aparecia. */ .portrait-wrap { position: relative; z-index: 0; } .portrait-wrap::before { /* halo de luz — dá ar ao redor da foto */ content: ''; position: absolute; inset: -14% -16%; background: radial-gradient(ellipse at 50% 42%, rgba(224, 188, 107, .13), transparent 68%); z-index: -2; pointer-events: none; } .portrait-wrap::after { /* moldura deslocada, tipo passe-partout */ content: ''; position: absolute; inset: 20px -20px -20px 20px; border: 1px solid var(--line-strong); border-radius: 3px; z-index: -1; } @media (max-width: 860px) { .portrait-wrap { max-width: 420px; margin-inline: auto; } .portrait-wrap::after { inset: 14px -14px -14px 14px; } } /* ---------- faixas finas de citação ---------- A assinatura do site de referência: tiras curtas que cortam a página entre as seções grandes, alternando tom. Nada de bloco alto — são respiros. */ .quote-strip { position: relative; text-align: center; overflow: hidden; } /* A faixa escura vem logo abaixo do hero, que é texturizado. Duas seções padronadas coladas fazem a divisão sumir numa mancha — foi o que deixou a emenda esquisita. Ela fica LISA de propósito: é o contraste entre textura e superfície limpa que corta a página, como na referência. */ .quote-strip--mid::before { content: ''; position: absolute; inset: -18% 0; /* sobra vertical para o parallax */ background-image: url('../assets/padrao.svg'); background-size: var(--padrao) var(--padrao); opacity: .22; /* traz o coral e o azul das flores à tona */ pointer-events: none; } .quote-strip__inner { position: relative; } /* A atribuição fica na MESMA linha da citação, como na referência — é isso que mantém a faixa baixa (uma linha de texto + respiro). */ /* `max-width` em `em` (não em px) para o limite acompanhar o tamanho da fonte: as duas faixas têm corpos diferentes e assim ambas ficam em torno de 56 caracteres por linha. Sem isto a citação corria os 1170px inteiros, chegando a 84 caracteres — bem acima dos 75 legíveis. */ .quote-strip blockquote { margin: 0; max-width: 28em; margin-inline: auto; line-height: 1.34; text-wrap: balance; } .quote-strip cite { font-style: normal; font-size: var(--fs-xs); white-space: nowrap; } /* variante escura — vem logo depois do hero (~95px na referência) */ .quote-strip--dark { background: var(--g900); color: var(--cream); padding: clamp(1.5rem, 2.6vw, 2rem) 0; } .quote-strip--dark blockquote { font-size: clamp(var(--fs-lg), 2.4vw, var(--fs-2xl)); } .quote-strip--dark cite { color: var(--sage-pale); } /* variante no verde da referência — corta a página no meio (~185px). Sobre o --g600 só o creme passa em contraste (5.6:1); o sage-pale dava 3.8:1 e reprovava, então aqui a atribuição também é creme. */ .quote-strip--mid { background: var(--g600); color: var(--cream); padding: clamp(2rem, 4vw, 3.5rem) 0; } .quote-strip--mid blockquote { font-size: clamp(var(--fs-md), 1.95vw, var(--fs-xl)); } .quote-strip--mid cite { color: var(--cream); opacity: .88; } /* ---------- seções ---------- 100px acima e abaixo, como na referência (com folga menor no mobile). */ .section { padding: clamp(4rem, 9vw, 6rem) 0; background: var(--superficie); color: var(--txt); } .section--tint, .section--deep, .section--warm { --superficie: var(--g700); } .section--dark { --superficie: var(--ink); --superficie-card: #10150D; } /* Seção clara. Redefine o tema inteiro: os componentes leem os tokens semânticos, então card, rótulo, ícone, linha e texto se ajustam juntos. O dourado sai de cena aqui — reprova em contraste sobre areia (3.9:1). */ .section--areia { --superficie: var(--areia); --superficie-card: var(--areia-card); --txt: var(--tinta); --txt-2: var(--tinta-2); --linha: rgba(35, 42, 28, .17); --linha-forte: rgba(35, 42, 28, .32); --acento-rotulo: var(--verde-esc); --acento-icone: var(--coral-esc); --sombra-card: 0 1px 2px rgba(35, 42, 28, .10), 0 8px 22px -14px rgba(35, 42, 28, .35); --sombra-card-hover: 0 2px 5px rgba(35, 42, 28, .13), 0 16px 36px -16px rgba(35, 42, 28, .45); } /* containers estreitos: FAQ e chamada final são colunas centradas */ .container--narrow { width: min(100% - 2.5rem, var(--narrow)); } .container--narrow-cta { width: min(100% - 2.5rem, var(--narrow-cta)); } .section__head { max-width: 52ch; margin-bottom: var(--space-lg); } .section__head--center { margin-inline: auto; text-align: center; } .section__head p { color: var(--txt-2); margin-top: var(--space-sm); } /* sobre */ /* O texto da Raquel é bem mais alto que o retrato: 1415px contra 603px, o que deixava a foto boiando no meio de 812px de vão. Em vez de encurtar o texto dela, o retrato acompanha a leitura. `align-items: start` é obrigatório: com `center` o item de grid estica e o sticky fica sem folga para deslizar. */ .about__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; } @media (min-width: 861px) { #sobre .portrait-wrap { position: sticky; top: 7rem; /* mesma folga do scroll-margin, limpa o header */ } } .about__grid p { color: var(--txt-2); } .about__facts { list-style: none; padding: 0; margin: var(--space-md) 0 0; display: grid; gap: .9rem; } .about__facts li { display: flex; gap: .85rem; align-items: flex-start; color: var(--txt-2); font-size: var(--fs-sm); } .about__facts svg { flex: 0 0 auto; margin-top: .38rem; color: var(--acento-rotulo); } @media (max-width: 860px) { .about__grid { grid-template-columns: 1fr; } } /* cards */ .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 1.5rem; } /* Profundidade por LUZ, não por sombra. Em paleta escura a sombra preta quase não aparece; o volume vem do fio claro na aresta de cima (simula luz vindo de acima) somado a uma sombra difusa que apoia a peça no fundo. */ .card { background: var(--superficie-card); border: 1px solid var(--linha); border-radius: 3px; padding: var(--space-md) var(--space-sm) var(--space-sm); box-shadow: var(--sombra-card); transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease); } .card:hover { border-color: var(--line-strong); transform: translateY(-3px); box-shadow: var(--sombra-card-hover); } /* ícones em coral: 3.4:1 sobre o verde principal — acima do mínimo de 3:1 exigido para elementos gráficos, e muito mais vivo que o dourado */ .card__icon { color: var(--acento-icone); margin-bottom: var(--space-sm); display: block; } .card h3 { font-size: var(--fs-lg); margin-bottom: .5rem; color: var(--txt); } .card p { color: var(--txt-2); font-size: var(--fs-sm); line-height: 1.62; } /* passos — linha do tempo vertical */ /* Os 4 passos descrevem uma sequência no tempo ("do primeiro oi até o processo começar"), mas o 2x2 anterior lia como quatro itens soltos. Empilhados, com o fio ligando um marcador ao outro, a ordem vira parte do desenho: dá para VER que uma etapa leva à seguinte. */ .steps { list-style: none; padding: 0; margin: 0; max-width: 680px; counter-reset: step; } .step { position: relative; padding: 0 0 var(--space-lg) 5.25rem; counter-increment: step; } .step:last-child { padding-bottom: 0; } /* o marcador: número de série dentro de um medalhão com a elevação dos cards */ .step::before { content: counter(step, decimal-leading-zero); position: absolute; top: 0; left: 0; width: 3.5rem; height: 3.5rem; display: grid; place-items: center; border: 1px solid var(--linha-forte); border-radius: 50%; background: var(--superficie-card); box-shadow: var(--sombra-card); font-family: var(--serif); font-size: var(--fs-lg); line-height: 1; color: var(--acento-rotulo); } /* o fio que liga um marcador ao próximo — o último passo não aponta pra nada */ .step::after { content: ''; position: absolute; top: calc(3.5rem + .65rem); bottom: .65rem; left: calc(1.75rem - .5px); width: 1px; background: var(--linha-forte); } .step:last-child::after { content: none; } .step h3 { font-size: var(--fs-lg); margin-bottom: .55rem; padding-top: .5rem; } .step p { color: var(--txt-2); font-size: var(--fs-sm); line-height: 1.62; } @media (max-width: 700px) { .step { padding-left: 4.25rem; padding-bottom: var(--space-md); } .step:last-child { padding-bottom: 0; } .step::before { width: 3rem; height: 3rem; font-size: var(--fs-md); } .step::after { left: calc(1.5rem - .5px); top: calc(3rem + .5rem); bottom: .5rem; } .step h3 { padding-top: .3rem; } } /* pilares — numerados "01." em 24px, como na referência */ .pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--space-lg) var(--space-lg); counter-reset: pilar; } .pillar { counter-increment: pilar; } .pillar h3 { font-size: var(--fs-lg); line-height: 1.28; margin-bottom: .7rem; display: flex; gap: .6rem; align-items: baseline; } .pillar h3::before { content: counter(pilar, decimal-leading-zero); color: var(--acento-icone); /* 6.6:1 sobre o quase-preto */ font-size: var(--fs-2xl); line-height: 1; flex: 0 0 auto; } .pillar p { color: var(--txt-2); font-size: var(--fs-sm); line-height: 1.62; } /* FAQ — acordeão numerado */ /* Um item aberto por vez: a pergunta aberta ganha o medalhão coral e o fio aceso embaixo, então o olho sempre sabe onde está. Toda a mecânica de abrir/fechar depende de JS; por isso o estado FECHADO só existe sob `.js` — sem script, todas as respostas ficam à mostra, como no resto do site. */ .faq { max-width: 780px; margin-inline: auto; } .faq__trigger { width: 100%; display: flex; align-items: center; gap: 1.25rem; position: relative; background: none; border: 0; border-bottom: 1px solid var(--linha); padding: 1.4rem .25rem; cursor: pointer; text-align: left; font: inherit; color: inherit; } /* número em medalhão: o disco coral cresce atrás do número quando o item abre, e dá só um indício (85% do tamanho, quase transparente) no hover */ .faq__num { position: relative; flex: 0 0 auto; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; } .faq__num-fill { position: absolute; inset: 0; border-radius: 50%; background: var(--acento-icone); transform: scale(0); opacity: 0; transition: transform .35s var(--ease), opacity .35s var(--ease); } .faq__num-text { position: relative; font-family: var(--sans); font-size: var(--fs-xs); font-weight: 500; letter-spacing: .08em; color: var(--txt-2); transition: color .25s var(--ease); } .faq__trigger:hover .faq__num-fill { transform: scale(.85); opacity: .14; } .faq__item.is-open .faq__num-fill { transform: scale(1); opacity: 1; } .faq__item.is-open .faq__num-text { color: var(--ink); } /* 5.3:1 no coral */ .faq__question { flex: 1; font-size: var(--fs-lg); line-height: 1.35; color: var(--txt-2); transition: color .25s var(--ease), transform .3s var(--ease); } .faq__trigger:hover .faq__question, .faq__item.is-open .faq__question { color: var(--txt); transform: translateX(4px); } /* o "+" gira 45° e vira "×" — mesmo desenho, dois estados */ .faq__icon { flex: 0 0 auto; color: var(--txt); opacity: .45; transition: transform .35s var(--ease), opacity .25s var(--ease); } .faq__trigger:hover .faq__icon { opacity: 1; } .faq__item.is-open .faq__icon { opacity: 1; transform: rotate(45deg); } /* fio aceso sobre a linha-base do item: cresce da esquerda, um terço no hover, inteiro quando aberto */ .faq__underline { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--acento-icone); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); } .faq__trigger:hover .faq__underline { transform: scaleX(.3); } .faq__item.is-open .faq__underline { transform: scaleX(1); } /* A altura anima pelo truque das linhas de grid (0fr → 1fr): nada de medir scrollHeight em JS. `visibility` acompanha para tirar o conteúdo fechado da ordem de tabulação e dos leitores de tela. */ .faq__panel { display: grid; grid-template-rows: 1fr; } .faq__panel-inner { overflow: hidden; min-height: 0; padding: 1.15rem 2.5rem 1.9rem 3.75rem; color: var(--txt-2); } .js .faq__panel { grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); } /* O padding vertical entra na conta junto com a altura. Sem isto o item fechado colapsa o texto mas mantém os ~3rem de padding, e a lista fica com um vão morto entre cada pergunta. */ .js .faq__panel-inner { padding-block: 0; visibility: hidden; opacity: 0; transform: translateY(-6px); transition: grid-template-rows .45s var(--ease), padding-block .45s var(--ease), visibility .45s, opacity .3s var(--ease), transform .45s var(--ease); } .js .faq__item.is-open .faq__panel { grid-template-rows: 1fr; } .js .faq__item.is-open .faq__panel-inner { padding-block: 1.15rem 1.9rem; visibility: visible; opacity: 1; transform: none; } @media (max-width: 600px) { .faq__trigger { gap: .9rem; } .faq__num { width: 2.1rem; height: 2.1rem; } .faq__panel-inner { padding-left: 0; padding-right: 0; } } /* CTA final — coluna estreita e centrada, título maior (58px na referência) */ .cta-final { position: relative; background: var(--g600); color: var(--cream); padding: clamp(4rem, 9vw, 6rem) 0; text-align: center; overflow: hidden; } .cta-final::before { content: ''; position: absolute; inset: -18% 0; /* sobra vertical para o parallax */ background-image: url('../assets/padrao.svg'); background-size: var(--padrao) var(--padrao); opacity: .20; pointer-events: none; } .cta-final__inner { position: relative; } .cta-final h2 { font-size: clamp(var(--fs-2xl), 4.6vw, var(--fs-4xl)); line-height: 1.08; } /* Creme cheio, não o secundário: sobre o --g600 o --cream-2 dá 4.38:1 e reprova por pouco. É a mesma regra da faixa de citação — neste verde só o texto principal passa. */ .cta-final p { color: var(--cream); margin: var(--space-sm) 0 var(--space-md); } /* rodapé */ .site-footer { background: var(--g900); padding: var(--space-xl) 0 var(--space-md); font-size: var(--fs-md); } .site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-lg) var(--space-md); padding-bottom: var(--space-lg); border-bottom: 1px solid var(--line-strong); } .site-footer h4 { font-family: var(--sans); font-size: var(--fs-2xs); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--sage-pale); margin-bottom: var(--space-sm); } .site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; } .site-footer a { color: var(--cream); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; } .site-footer a:hover { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; } .site-footer__bottom { display: flex; flex-wrap: wrap; gap: var(--space-xs); justify-content: space-between; padding-top: var(--space-md); font-family: var(--sans); font-size: var(--fs-xs); letter-spacing: .04em; color: var(--cream-2); } @media (max-width: 760px) { .site-footer__grid { grid-template-columns: 1fr; } } /* botão flutuante whatsapp */ .wa-float { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 90; width: 56px; height: 56px; border-radius: 50%; background: var(--coral); color: var(--g900); display: grid; place-items: center; box-shadow: 0 10px 28px -8px rgba(0, 0, 0, .6); transition: transform .25s var(--ease), background-color .25s var(--ease); } .wa-float:hover { transform: scale(1.07); background: var(--coral-soft); } /* ---------- revelação no scroll ---------- Visível por padrão; só escondemos quando o JS confirma que está rodando. Usa `animation`, não `transition`, de propósito. A versão anterior declarava `transition: opacity, transform` aqui e, por ter especificidade maior que `.card`, substituía o shorthand inteiro do componente — o hover do card perdia a animação de borda e ficava lento (.55s em vez de .3s). Animação e transição são canais separados, então agora convivem. Sem `forwards`: com fill-mode a última keyframe travaria o `transform` e o `translateY(-3px)` do hover não funcionaria. */ .js .reveal { opacity: 0; } .js .reveal.is-visible { opacity: 1; animation: revelar .55s var(--ease); } @keyframes revelar { from { opacity: 0; transform: translateY(14px); } } @media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; } .js .reveal.is-visible { animation: none; } } /* ========================================================================= NÍVEL 2 — movimento com intenção ========================================================================= */ /* ---------- 1. Parallax da textura ---------- Animações guiadas por scroll, nativas do CSS: nenhum JavaScript, nenhum listener de scroll, e o navegador roda fora da thread principal — não trava mesmo em rolagem rápida. `view()` cronometra pela passagem do elemento pela viewport, que é exatamente o que o parallax precisa. O deslocamento é pequeno de propósito (±6%): a intenção é dar camada, não chamar atenção. */ @keyframes deriva-textura { from { transform: translate3d(0, -6%, 0); } to { transform: translate3d(0, 6%, 0); } } @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .hero::before, .quote-strip--mid::before, .cta-final::before { animation: deriva-textura linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; will-change: transform; } /* O hero começa no topo da página, então nunca "entra" pela borda de baixo. Cronometrar pelo scroll do documento evita que ele apareça já deslocado. */ .hero::before { animation-timeline: scroll(); animation-range: 0 100vh; } } } /* ---------- 2. Hover dos cards ---------- Só passou a funcionar depois de corrigir o conflito de especificidade com `.reveal`: antes a transição do componente era substituída inteira. */ .card__icon { transition: color .25s var(--ease), transform .25s var(--ease); } .card:hover { border-color: rgba(232, 132, 95, .42); /* a borda acende em coral */ } .card:hover .card__icon { color: var(--coral-soft); transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { .card:hover { transform: none; } .card:hover .card__icon { transform: none; } } /* No mobile as grades viram uma coluna só, e os 64px pensados para separar COLUNAS ficam soltos demais entre itens empilhados. Também aproveita para compactar o rodapé, que ocupava 1,2 tela para 48 palavras. */ @media (max-width: 700px) { .pillars { gap: var(--space-md); } .site-footer { padding-top: var(--space-lg); } .site-footer__grid { gap: var(--space-md); padding-bottom: var(--space-md); } /* e-mail longo não pode empurrar a largura da página */ .site-footer a { overflow-wrap: anywhere; } }