/* Theme Name: Dr. Carlos Henrique Description: Tema de página única do Dr. Carlos Henrique Rodrigues dos Santos, médico psiquiatra. Sem construtor, sem plugin e sem dependência externa. Gerado a partir de app/ por publicacao/montar-tema.py. Author: UP Resultados Version: 1.0.0 License: GNU General Public License v2 or later Text Domain: dr-carlos-henrique Requires at least: 6.0 Requires PHP: 7.4 */ /* ========================================================================== Landing Dr. Carlos Henrique — protótipo Tokens espelham docs/design.md. Nada de hex solto fora do :root. ========================================================================== */ :root { /* marca */ --brand-red: #BD1622; --brand-red-dark: #96111B; --brand-brown: #925F36; /* superfícies */ --sage: #4E5850; --sage-dark: #3E463F; --paper: #FBFAF8; --paper-2: #F3F1ED; /* linhas: a decorativa e a que precisa passar em contraste de UI (3:1) */ --line: #E2DED7; --line-forte: #8A857D; /* Marca de terceiro: verde médio da paleta oficial do WhatsApp. Usado em um lugar só, o botão flutuante. Botão de CTA é vermelho da marca, como o resto do site. Não dá para clarear mais: o verde vivo (#25D366) fica a 1,9:1 do fundo de papel e some da página; este fica a 4,0:1. */ --whatsapp: #128C7E; /* texto */ --ink: #1C1B19; --ink-soft: #57534E; --on-dark: #FFFFFF; --on-dark-soft: #D6DBD5; /* escala de 8 */ --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px; --radius: 4px; --largura: 1160px; --altura-cabecalho: 80px; --serif: Cambria, Georgia, "Times New Roman", serif; --sans: "Segoe UI", -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; } *, *::before, *::after { box-sizing: border-box; } /* rolagem macia ao clicar nas âncoras do menu */ html { scroll-behavior: smooth; /* No a trava é obrigatória, não opcional: só ela impede a janela do navegador de rolar de lado em qualquer motor. No body sozinho, o Firefox não se comporta como o Chrome. O cabeçalho grudado continua funcionando porque o valor é repassado para a janela e o em si fica normal. */ overflow-x: hidden; } body { margin: 0; /* Rede de proteção contra rolagem lateral no celular. NÃO é a correção de nada: se algum bloco estourar a largura, isso esconde o sintoma e o layout continua errado. Era "clip", que o Firefox não propaga do body para a janela do navegador do mesmo jeito que o Chrome. Com "hidden" a propagação é a de sempre, e o cabeçalho grudado continua funcionando porque quem passa a cortar é a janela, não o body. */ overflow-x: hidden; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; margin: 0; } h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem); } h2 { font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.4rem); } h3 { font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem); } p { margin: 0; } a { color: inherit; transition: color .18s ease, border-color .18s ease, opacity .18s ease; } /* foco visível sempre. Em bloco sage o vermelho seria ilegível (1,16:1). */ :focus-visible { outline: 3px solid var(--brand-red); outline-offset: 3px; border-radius: 2px; } .secao--escura :focus-visible, .heroi--faixa :focus-visible, .rodape :focus-visible { outline-color: var(--on-dark); } img { max-width: 100%; height: auto; display: block; } /* ---------------------------------------------------------------- ícones -- */ .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } /* acompanha o tamanho da fonte de quem o contém, então nunca desalinha */ .icone { width: 1.15em; height: 1.15em; flex: 0 0 auto; vertical-align: -0.2em; } .icone--flutuante { width: 26px; height: 26px; } /* link de telefone ou WhatsApp: ícone e número na mesma linha de base */ .com-icone { display: inline-flex; align-items: center; gap: var(--s1); text-decoration: none; white-space: nowrap; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .container { width: 100%; max-width: var(--largura); margin-inline: auto; padding-inline: var(--s3); } .secao { padding-block: clamp(var(--s5), 8vw, var(--s7)); } .secao--escura { background: var(--sage); color: var(--on-dark); } .secao--papel { background: var(--paper-2); } /* âncora não pode parar debaixo do cabeçalho fixo */ [id] { scroll-margin-top: calc(var(--altura-cabecalho) + var(--s2)); } /* medida de leitura: 45–75 caracteres */ .prosa { max-width: 62ch; } .sub { margin-top: var(--s3); color: var(--ink-soft); } .nota { margin-top: var(--s5); font-size: .95rem; color: var(--ink-soft); } /* Ressalva que fecha uma grade: atravessa a largura inteira e centraliza, com filete separando do conteúdo. O texto mantém medida própria, porque largura cheia passaria de 130 caracteres por linha. */ .nota--fecho { padding-top: var(--s3); border-top: 1px solid var(--line); text-align: center; } .nota--fecho span { display: block; max-width: 92ch; margin-inline: auto; text-wrap: balance; } .secao--escura .nota--fecho { border-top-color: rgba(255,255,255,.18); } .secao--escura .sub, .secao--escura .nota { color: var(--on-dark-soft); } .foto-bloco { border-radius: var(--radius); overflow: hidden; } .olho { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-brown); margin-bottom: var(--s2); } /* o marrom da marca dá 1,4:1 sobre o sage e some. Em bloco escuro o olho troca para o claro, que dá 5,3:1. */ .secao--escura .olho, .heroi--faixa .olho { color: var(--on-dark-soft); } /* --------------------------------------------------------------- botões -- */ .botao { display: inline-flex; align-items: center; justify-content: center; gap: var(--s1); min-height: 48px; padding: 12px var(--s4); border: 1px solid transparent; border-radius: var(--radius); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; transition: background-color .18s ease, border-color .18s ease, color .18s ease; } .botao--primario { background: var(--brand-red); color: #fff; } .botao--primario:hover { background: var(--brand-red-dark); } /* borda de botão é a única affordance, então precisa de 3:1 (--line não passa) */ .botao--fantasma { background: transparent; color: var(--ink); border-color: var(--line-forte); } .botao--fantasma:hover { border-color: var(--ink); background: rgba(0,0,0,.03); } .secao--escura .botao--fantasma, .heroi--faixa .botao--fantasma { color: var(--on-dark); border-color: rgba(255,255,255,.6); } .secao--escura .botao--fantasma:hover, .heroi--faixa .botao--fantasma:hover { border-color: #fff; background: rgba(255,255,255,.08); } .botao--compacto { min-height: 40px; padding: 8px var(--s3); font-size: .95rem; } .acoes { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); } /* ------------------------------------------------- pular para o conteúdo -- */ .pular { position: absolute; left: var(--s2); top: -100px; z-index: 60; background: var(--ink); color: #fff; padding: 12px var(--s3); border-radius: var(--radius); text-decoration: none; font-weight: 600; transition: top .15s ease; } .pular:focus-visible { top: var(--s2); } /* ----------------------------------------------------------- barra topo -- */ /* rola junto com a página. Só o cabeçalho gruda. */ .barra-topo { background: var(--sage-dark); color: var(--on-dark-soft); font-size: .85rem; } .barra-topo__interno { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s1) var(--s3); min-height: 40px; padding-block: var(--s1); } .barra-topo__tel { color: #fff; font-weight: 600; text-decoration: none; white-space: nowrap; } .barra-topo__local { margin-left: auto; } @media (max-width: 700px) { .barra-topo__local { display: none; } } /* ------------------------------------------------------------ cabeçalho -- */ .cabecalho { position: sticky; top: 0; z-index: 20; background: var(--paper); border-bottom: 1px solid var(--line); } .cabecalho__interno { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: var(--altura-cabecalho); } /* min-width: 0 é o que permite os filhos encolherem. Sem isso, item de flex se recusa a ficar menor que o próprio conteúdo e empurra a página para fora da tela, o que gera rolagem lateral no celular. */ .cabecalho__interno > * { min-width: 0; } /* a logo tem 243px de largura natural. Travada nesse tamanho, ela sozinha já estourava a tela de 360px junto com o botão. Agora acompanha a largura. */ .cabecalho__logo { width: 243px; max-width: 46%; height: auto; } @media (max-width: 560px) { .cabecalho__interno { gap: var(--s2); } .cabecalho__interno .botao--compacto { padding-inline: var(--s2); font-size: .9rem; } } .cabecalho__nav { display: none; } @media (min-width: 940px) { .cabecalho__nav { display: flex; align-items: center; gap: var(--s4); margin-left: auto; margin-right: var(--s4); } .cabecalho__nav a { position: relative; text-decoration: none; font-size: .95rem; font-weight: 600; padding-block: var(--s1); } /* o filete cresce do centro para as pontas em vez de piscar inteiro */ .cabecalho__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--brand-red); transform: scaleX(0); transform-origin: center; transition: transform .22s ease; } .cabecalho__nav a:hover::after, .cabecalho__nav a:focus-visible::after { transform: scaleX(1); } } /* ----------------------------------------------------------------- herói -- Faixa sage de largura cheia, com o recorte sem fundo apoiado na base. */ .heroi--faixa { background: var(--sage); color: var(--on-dark); overflow: hidden; } .heroi--faixa .grade { display: grid; grid-template-columns: 1fr; align-items: end; } .heroi--faixa .heroi__texto { padding-block: clamp(var(--s5), 7vw, var(--s7)); } .heroi--faixa .heroi__foto { align-self: end; } /* com o fundo já removido na imagem, o esfumado de antes virou desnecessário */ .heroi--faixa .heroi__foto img { width: 100%; max-width: 360px; margin-inline: auto; display: block; } @media (min-width: 900px) { .heroi--faixa .grade { grid-template-columns: 1.1fr .9fr; gap: var(--s5); min-height: 560px; } /* controlado pela ALTURA, não pela largura. Em 100% da coluna a figura ia a 860px de alto; 730px é isso 15% menor. É este número que se ajusta. */ .heroi--faixa .heroi__foto img { width: auto; max-width: 100%; max-height: 730px; } } .heroi__lead { margin-top: var(--s3); font-size: 1.15rem; color: var(--ink-soft); } .heroi--faixa .heroi__lead { color: var(--on-dark-soft); } .heroi__assinatura { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line); font-size: .95rem; color: var(--ink-soft); } .heroi--faixa .heroi__assinatura { border-color: rgba(255,255,255,.25); color: var(--on-dark-soft); } .heroi__assinatura strong { display: block; color: var(--ink); font-size: 1.05rem; } .heroi--faixa .heroi__assinatura strong { color: #fff; } /* ---------------------------------------------------------------- sinais -- */ .sinais { display: grid; gap: var(--s3); margin-top: var(--s5); grid-template-columns: 1fr; } @media (min-width: 720px) { .sinais { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .sinais { grid-template-columns: repeat(4, 1fr); } } .sinal { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s3); } .sinal__icone { width: 28px; height: 28px; color: var(--brand-brown); margin-bottom: var(--s2); } .sinal__aspas { font-family: var(--serif); font-size: 1.1rem; line-height: 1.35; margin-bottom: var(--s2); } .sinal p { font-size: .95rem; color: var(--ink-soft); } /* ------------------------------------------------------------ tratamento -- */ .tratamentos { display: grid; gap: var(--s5); margin-top: var(--s5); grid-template-columns: 1fr; } @media (min-width: 800px) { .tratamentos { grid-template-columns: repeat(2, 1fr); gap: var(--s5) var(--s6); } } .tratamento h3 { margin-bottom: var(--s1); } .tratamento p { color: var(--on-dark-soft); } .tratamento__marca { width: 32px; height: 2px; background: var(--brand-red); margin-bottom: var(--s2); } /* ---------------------------------------------------------------- passos -- */ .duas { display: grid; gap: var(--s5); align-items: start; grid-template-columns: 1fr; } @media (min-width: 900px) { .duas { grid-template-columns: 1fr 1fr; gap: var(--s6); } } /* Sem a foto, os quatro passos atravessam a seção como etapas de um processo, lidos da esquerda para a direita. O número sobe para cima do texto: ao lado, em coluna estreita, sobrariam 200px para a descrição. */ .passos { list-style: none; margin: var(--s5) 0 0; padding: 0; counter-reset: passo; display: grid; gap: var(--s4) var(--s3); grid-template-columns: 1fr; } @media (min-width: 620px) { .passos { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 940px) { .passos { grid-template-columns: repeat(4, 1fr); gap: var(--s4); } } .passos li { counter-increment: passo; } .passos li::before { content: counter(passo); width: 32px; height: 32px; margin-bottom: var(--s2); display: grid; place-items: center; border: 1px solid var(--brand-brown); border-radius: 50%; color: var(--brand-brown); font-size: .9rem; font-weight: 600; } .passos strong { display: block; margin-bottom: var(--s1); } .passos span { color: var(--ink-soft); font-size: .97rem; } /* ----------------------------------------------------------------- sobre -- */ .citacao { margin: var(--s4) 0 0; padding-left: var(--s3); border-left: 3px solid var(--brand-red); font-family: var(--serif); font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); line-height: 1.4; } /* Atravessa a seção inteira, abaixo das duas colunas. Em lista vertical dentro da coluna de texto ela empurrava o texto muito abaixo da foto. Aqui vira faixa de marcos: cada item com filete no topo, lendo da esquerda para a direita. */ .trajetoria-bloco { margin-top: var(--s6); } .trajetoria-bloco .olho { margin-bottom: var(--s3); } .trajetoria { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4) var(--s3); grid-template-columns: 1fr; } @media (min-width: 620px) { .trajetoria { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 940px) { .trajetoria { grid-template-columns: repeat(4, 1fr); } } .trajetoria li { padding-top: var(--s2); border-top: 2px solid var(--line-forte); font-size: .95rem; color: var(--ink-soft); } .trajetoria time { display: block; margin-bottom: var(--s1); color: var(--brand-brown); font-weight: 600; } /* o marco de hoje é o que interessa: filete na cor da marca, e a palavra "Hoje" já diz sozinha, sem depender da cor */ .trajetoria li:last-child { border-top-color: var(--brand-red); color: var(--ink); } .trajetoria li:last-child time { color: var(--brand-red); } /* ----------------------------------------------------------- depoimentos -- */ /* Carrossel por scroll-snap: o arrasto no celular é nativo, o JS só move a janela de a um "grupo" por vez e mantém os pontos em dia. Sem JS, continua funcionando como lista rolável. */ .carrossel { margin-top: var(--s5); } .carrossel__janela { width: 100%; max-width: 100%; overflow-x: auto; /* Impede o encadeamento de rolagem: ao chegar no fim dos cards, o arrasto PARA ali em vez de continuar e arrastar a página inteira junto. É o que fazia o site andar para o lado no celular. */ overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-padding-inline: 0; } .carrossel__janela::-webkit-scrollbar { display: none; } .carrossel__trilho { display: flex; gap: var(--s3); margin: 0; padding: 0; list-style: none; align-items: stretch; } .carrossel__slide { flex: 0 0 100%; scroll-snap-align: start; } @media (min-width: 640px) { .carrossel__slide { flex-basis: calc((100% - var(--s3)) / 2); } } @media (min-width: 940px) { .carrossel__slide { flex-basis: calc((100% - var(--s3) * 2) / 3); } } .carrossel__slide > .depoimento { height: 100%; } /* setas flanqueando os cards, na altura do meio; pontos centralizados embaixo */ .carrossel__palco { position: relative; } .carrossel__seta { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; display: grid; place-items: center; background: var(--paper); color: var(--ink); border: 1px solid var(--line-forte); border-radius: 999px; cursor: pointer; transition: border-color .18s ease, background-color .18s ease; } .carrossel__seta:hover { border-color: var(--ink); background: var(--paper-2); } .carrossel__seta--ant { left: 0; } .carrossel__seta--prox { right: 0; } /* no celular o arrasto com o dedo já resolve, e a seta cobriria meio card */ @media (max-width: 640px) { .carrossel__seta { display: none; } } /* Onde a seta aparece, o palco abre 56px de cada lado para ela morar. Assim ela fica FORA dos cards em vez de por cima do texto. 56 = botão de 44 + 12 de folga. Os cards encolhem esses 112px, que é o preço certo a pagar. */ @media (min-width: 641px) { .carrossel__palco { padding-inline: 56px; } } .carrossel__pontos { display: flex; justify-content: center; gap: 0; margin-top: var(--s2); } .carrossel__ponto { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; background: transparent; border: 0; cursor: pointer; } .carrossel__ponto::before { content: ""; display: block; width: var(--s1); height: var(--s1); border-radius: 999px; border: 1px solid var(--line-forte); transition: background-color .18s ease, border-color .18s ease; } .carrossel__ponto[aria-current="true"]::before { background: var(--brand-red); border-color: var(--brand-red); } .depoimento { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s3); display: flex; flex-direction: column; gap: var(--s2); } .depoimento blockquote { margin: 0; font-family: var(--serif); font-size: 1.05rem; line-height: 1.45; } .depoimento footer { margin-top: auto; font-size: .88rem; color: var(--ink-soft); } .depoimento footer b { color: var(--ink); } .estrelas { color: var(--brand-brown); letter-spacing: .12em; font-size: .95rem; } .fonte-nota { margin-top: var(--s4); max-width: 92ch; margin-inline: auto; text-align: center; text-wrap: balance; font-size: .9rem; color: var(--ink-soft); } .fonte-nota b { color: var(--ink); } /* ------------------------------------------------------------------- cta -- */ /* Com dois endereços, a coluna da direita precisa caber dois cartões lado a lado. Empilhado, o bloco fica alto demais e o segundo parece sobra. */ .cta { display: grid; gap: var(--s5); grid-template-columns: 1fr; } @media (min-width: 1020px) { .cta { grid-template-columns: 1fr 1.1fr; gap: var(--s5); } /* os dois botões ficam na mesma linha: o de telefone sozinho embaixo parecia ação de segunda classe. Cabem apertando o padding, não o texto. */ .cta .acoes { flex-wrap: nowrap; } .cta .acoes .botao { padding-inline: var(--s3); white-space: nowrap; } } .locais { display: grid; gap: var(--s3); grid-template-columns: 1fr; align-content: start; } @media (min-width: 560px) { .locais { grid-template-columns: repeat(2, 1fr); } } .cartao-local { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.28); border-radius: var(--radius); padding: var(--s3); } .cartao-local h3 { margin-bottom: var(--s2); } .cartao-local p { color: var(--on-dark-soft); } .cartao-local a { color: #fff; } .cartao-local__cidade { font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-soft); } .cartao-local__quando { margin-top: var(--s2); padding-top: var(--s2); border-top: 1px solid rgba(255,255,255,.18); font-weight: 600; color: #fff; } .cartao-local__links { margin-top: var(--s2); } /* ---------------------------------------------------------------- rodapé -- */ .rodape { background: var(--sage-dark); color: var(--on-dark-soft); padding-block: var(--s5); font-size: .92rem; } /* o botão flutuante do WhatsApp fica por cima do rodapé no mobile */ @media (max-width: 700px) { .rodape { padding-bottom: calc(var(--s5) + 56px); } } .rodape__grade { display: grid; gap: var(--s4); grid-template-columns: 1fr; } @media (min-width: 800px) { .rodape__grade { grid-template-columns: 1.2fr 1fr 1fr; gap: var(--s5); } } .rodape strong { color: #fff; } .rodape a { color: #fff; } .rodape__legal { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid rgba(255,255,255,.18); font-size: .85rem; } .rodape__credito { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid rgba(255,255,255,.18); display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); justify-content: space-between; font-size: .8rem; } .credito__marca { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } /* ------------------------------------------------------------------ faq -- */ .faq { margin-top: var(--s5); border-top: 1px solid var(--line-forte); } .faq__item { border-bottom: 1px solid var(--line-forte); } .faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding-block: var(--s3); min-height: 48px; font-family: var(--serif); font-size: 1.1rem; font-weight: 600; cursor: pointer; list-style: none; } .faq__item summary::-webkit-details-marker { display: none; } /* Chevron: dois lados de um quadrado girados 45°. Aponta para baixo quando fechado e gira para cima ao abrir, então o sinal é forma e movimento, nunca só cor. 10px é dimensão de glifo, não de espaçamento. */ .faq__item summary::after { content: ""; flex: 0 0 auto; width: 10px; height: 10px; border-right: 2px solid var(--brand-red); border-bottom: 2px solid var(--brand-red); transform: translateY(-3px) rotate(45deg); transition: transform .2s ease; } .faq__item[open] summary::after { transform: translateY(2px) rotate(-135deg); } .faq__item summary:hover { color: var(--brand-red-dark); } .faq__corpo { padding-bottom: var(--s3); color: var(--ink-soft); } .faq__corpo p + p { margin-top: var(--s2); } /* ------------------------------------------------- botão flutuante zap -- */ .zap { position: fixed; right: var(--s3); bottom: var(--s3); z-index: 40; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; background: var(--whatsapp); color: #fff; border-radius: 999px; box-shadow: 0 6px 20px rgba(0,0,0,.28); transition: transform .18s ease, background-color .18s ease; } .zap:hover { transform: translateY(-2px); } /* ------------------------------------------------------ entrada por rolagem -- A classe só é aplicada pelo JavaScript. Sem JS, ou com "reduzir movimento" ligado, nada recebe .e-revelar e a página aparece inteira, como sempre. */ .e-revelar { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1); } .e-revelar.visivel { opacity: 1; transform: none; } /* transições suaves em componentes que trocam de estado */ .faq__item summary { transition: color .18s ease; } .depoimento { transition: border-color .18s ease; } .cartao-local { transition: border-color .18s ease; } @media (prefers-reduced-motion: reduce) { * { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; } }