de 24px, sendo inline, encosta na borda esquerda do content-box. Numa
caixa de 40px isso deixava os 14px de folga todos do lado direito — o X saia
7px para a esquerda do centro. */
.dc-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
color: var(--wp--preset--color--contraste, #ede6d8);
border: 1px solid color-mix(in srgb, var(--wp--preset--color--contraste, #ede6d8) 30%, transparent);
}
/* Links grandes em serifa, empilhados e divididos por fio — como no painel do
design. O seletor precisa de .is-menu-open para nao vazar no menu inline. */
.dc-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
flex-direction: column;
align-items: stretch;
gap: 0;
margin-top: 34px;
}
.dc-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
display: block;
}
.dc-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
display: block;
padding: 14px 0;
border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--contraste, #ede6d8) 12%, transparent);
font-family: var(--wp--preset--font-family--familia-2, "Cormorant Garamond", serif);
font-size: 32px;
font-weight: 300;
letter-spacing: 0;
text-transform: none;
text-decoration: none;
color: var(--wp--preset--color--contraste, #ede6d8);
}
/* ===== Footer (theme/parts/footer.html) ===== */
.dc-footer {
/* No design o rodapé nasce 100px depois da última seção — é o que separa a
última chamada da página do bloco de contatos. Sem isso o rodapé fica
colado no CTA anterior em todas as telas. */
margin-top: 100px;
/* 48px LITERAL, não `var(--wp--preset--spacing--50, 48px)`.
*
* O fallback de `var()` só entra quando a variável NÃO existe — e ela
* existe: `--wp--preset--spacing--50` vale 18px no theme.json. A regra
* parecia pedir 48 e entregava 18, e o rodapé ficava 30px à esquerda do
* eixo de toda a página (hero, academia e contacto-cta alinham em 48).
* Medido em 1440px: conteúdo do rodapé começando em x=18, o resto em x=48.
*
* Quando o design dá um número literal, escreva o número literal. */
padding: 26px 48px 40px;
/* Os quatro vãos abaixo existem porque `styles.spacing.blockGap` é "0" no
* theme.json — e com isso `--wp--style--block-gap` vale 0, que é de onde
* core/group e core/social-links tiram o `gap`. Zerado na origem, nenhum
* dos quatro aparecia acima de 1120px: "© 2026 Di CarvalhoCÓMO LLEGAR"
* saía grudado, e os três ícones sociais se tocavam.
*
* Não se conserta subindo o blockGap global: isso mexeria em TODO bloco do
* site para resolver quatro vãos de um rodapé. O zero global é proposital —
* cada bloco do design controla o próprio espaçamento.
*
* Os números são os do protótipo, medidos em design/Home.dc.html.
* A faixa <=1120px tem valores próprios, mais apertados, e vem depois
* nesta folha — por isso ela vence estes aqui. */
gap: 24px;
border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--contraste, #ede6d8) 12%, transparent);
font-size: 12px;
letter-spacing: .14em;
color: color-mix(in srgb, var(--wp--preset--color--contraste, #ede6d8) 45%, transparent);
}
/* Entre a linha do endereço e a do copyright. */
.dc-footer__addr {
gap: 10px;
}
/* Entre "© 2026 Di Carvalho" e "Cómo llegar".
*
* Mira o GRUPO, não a classe solta: `dc-footer__line` está no do endereço
* e também no
que embrulha copyright + link. Sem o `.wp-block-group` a
* regra cairia no parágrafo, que não é flex, e o vão que o Daniel viu grudado
* continuaria grudado. */
.dc-footer__addr .dc-footer__line.wp-block-group {
gap: 14px;
}
.dc-footer__social-links {
gap: 18px;
}
.dc-footer a:hover {
color: var(--wp--preset--color--acento, #c9a86a);
}
.dc-footer__maps a {
color: var(--wp--preset--color--acento, #c9a86a);
text-transform: uppercase;
border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--acento, #c9a86a) 50%, transparent);
}
.dc-footer__social-links a {
color: color-mix(in srgb, var(--wp--preset--color--contraste, #ede6d8) 75%, transparent);
transition: opacity .2s ease;
}
/* `opacity:.7` é o que o protótipo pede nos três ícones sociais — as únicas
três ocorrências de style-hover na seção do rodapé. Eles não tinham hover
nenhum: o ícone é um
dentro do , e a regra global de hover de link
troca `color`, que o SVG do core não usa (ele pinta por `fill` fixo). */
.dc-footer__social-links a:hover,
.dc-footer__social-links a:focus-visible {
opacity: .7;
}
/* O dimensionamento mora aqui, e nao na folha `wp-block-image` do core, porque
o selo deixou de ser um core/image (ver theme/blocks/selo-weboption). O
WordPress so enfileira aquela folha quando ha um core/image de verdade na
pagina; sem estas duas linhas o SVG renderizaria nos seus 205x94 nativos e
transbordaria a figure de 90px. */
.dc-footer__weboption {
/* 32px de LARGURA, que no SVG de 205x94 dão 14.7px de altura — o design
pede `height:16px` (design/Home.dc.html, linha 274), então é isto com
1.3px de folga. Vinha de 90px, ou seja, 41px de altura: o selo era quase
o dobro dos 24px dos ícones sociais ao lado, para uma marca que é de
autoria e não da página.
Mora aqui, e não inline no render, porque agora vale em toda largura de
tela — ver theme/blocks/selo-weboption/render.php.
`display: flex` não é decoração: sem ele a figura crescia 5px abaixo dos
782px, engordada pelo `::after` que amplia o alvo do link — um elemento
posicionado, que não devia entrar em conta nenhuma. Como item de flex a
altura vira o tamanho do filho e para de escutar o que transborda; medido
14.7px em 390 e em 1440. */
display: flex;
width: 32px;
}
.dc-footer__weboption img {
display: block;
width: 100%;
height: auto;
opacity: .9;
transition: opacity .2s ease;
}
/* Os 32px do selo dão 14.7px de altura, e é isso que o dedo teria para acertar
— abaixo dos 24x24 que a WCAG 2.2 (2.5.8) pede, o mesmo número que abriu o
`gap` dos ícones sociais logo acima. Quem cresce é o `::after` — ele é
posicionado, então sai do fluxo e não empurra nada — desde que a figura seja
flex (ver acima); como bloco ela contava o transbordo e ganhava 5px a 390px.
Medido: alvo de 32x24.7, selo de 32x14.7 no mesmo pixel das duas larguras.
(A primeira tentativa foi `padding: 5px 0; margin: -5px 0` no próprio :
as margens negativas colapsam com as da figura, e o colapso não saiu igual
nas duas larguras — a 390px o selo subiu 2px.) */
.dc-footer__weboption a {
position: relative;
display: block;
width: 100%;
}
.dc-footer__weboption a::after {
content: "";
position: absolute;
inset: -5px 0;
}
/* O selo virou link (https://weboption.com.br/) e precisa responder ao ponteiro
como tal. A regra global `.dc-footer a:hover` troca `color`, que não pinta
este SVG — ele tem `fill` fixo. Mesmo `.7` dos três ícones sociais ao lado,
pelo mesmo motivo. */
.dc-footer__weboption a:hover img,
.dc-footer__weboption a:focus-visible img {
opacity: .7;
}
@media (max-width: 1120px) {
/* 20px na lateral, nao 22: e a margem que hero, tipo-45, academia,
la-artista e contacto-cta usam no telefone. Com 22 o rodape ficava 2px
fora do eixo de todo o resto da pagina — pequeno demais para nomear
olhando, grande o bastante para o olho pegar. */
.dc-footer {
padding: 22px 20px 32px;
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
/* Os vaos internos do rodape sao ZERO — os grupos vem do core/group, que nao
* emite `gap` nenhum, e o `gap: 16px` acima so separa os tres filhos diretos.
* Medido em 390px:
*
* "© 2026 Di Carvalho" termina em x=159 e "Cómo llegar" comeca em x=159
* os tres icones sociais se tocam (24px cada, colados)
* a linha do endereco encosta na linha do copyright
*
* Era o "© 2026 Di CarvalhoCÓMO LLEGAR" grudado do print.
*
* ATENCAO: os mesmos tres vaos sao zero ACIMA de 1120px tambem — medido
* identico em 1440px. Isto conserta so a faixa empilhada porque o combinado
* desta rodada e nao tocar no escritorio; o defeito la continua. */
.dc-footer > .wp-block-group {
gap: 6px;
}
.dc-footer > .wp-block-group .wp-block-group {
flex-wrap: wrap;
gap: 4px 10px;
}
/* 24x24 e o minimo do WCAG 2.2 (2.5.8) e passa raspando — mas so quando os
* alvos nao se tocam, e aqui eles se tocam. O gap resolve os dois lados:
* separa os alvos e abre a linha. */
.dc-footer__social-links {
gap: 14px;
}
}
/* ===== Telefone: o selo Weboption sobe para a linha dos ícones =====
*
* Corta em 782px, não nos 1120px acima: a faixa de tablet continua empilhada
* como está, e o combinado desta rodada é não mexer nela.
*
* Até aqui os três filhos do rodapé empilhavam (`flex-direction: column`) e o
* selo caía sozinho numa terceira linha, encostado à esquerda e com 41px de
* altura — mais alto que o endereço e que os próprios ícones sociais, para uma
* marca que é de autoria, não da página.
*
* Volta a ser linha COM wrap: o endereço toma a largura toda (`flex-basis:
* 100%`) e segue no topo; ícones e selo dividem a segunda linha. */
@media (max-width: 782px) {
.dc-footer {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
}
.dc-footer__addr {
flex-basis: 100%;
}
/* Só a posição: o tamanho agora é 32px em toda tela, definido uma vez lá
* em cima. Aqui havia um `width: 62px !important` — o `!important` existia
* para vencer a largura que vinha inline no próprio selo, e os dois saíram
* juntos quando ela virou regra de folha.
*
* `margin-left: auto` e não só o `space-between` do grupo: com wrap, o
* `space-between` só empurra enquanto houver dois itens na linha — a margem
* mantém o selo à direita mesmo se um dia os ícones saírem daqui. */
.dc-footer__weboption {
margin-left: auto;
}
}
/* ===== Movimento de entrada (portado do protótipo) =====
*
* O protótipo anima com GSAP; aqui é CSS puro. Estas duas entradas rodam no
* CARREGAMENTO, sobre elementos que estão sempre acima da dobra (o hero), então
* não precisam de IntersectionObserver nem de JS nenhum — o que também as torna
* imunes a falha de script.
*
* Equivalências de easing do GSAP:
* power3.out → cubic-bezier(.165, .84, .44, 1)
* power2.out → cubic-bezier(.215, .61, .355, 1)
*
* Quem pediu menos movimento não recebe nenhuma das duas: as regras inteiras
* vivem dentro do @media, então sem a preferência o elemento nasce no estado
* final e nada se move. */
@media (prefers-reduced-motion: no-preference) {
/* --- Headline: cada linha sobe de dentro da própria máscara.
*
* `[data-hline]` no protótipo: yPercent 110 → 0, 1.2s, power3.out,
* stagger .15, delay .2. O elemento que corta é o .__linha/.__heading-line
* (overflow:hidden, já existia); quem se move é o texto dentro dele. */
@keyframes dc-linha-sobe {
from { transform: translateY(110%); }
to { transform: translateY(0); }
}
.dicarvalho-tipo-9__linha-texto,
.dicarvalho-hero__heading-text {
animation: dc-linha-sobe 1.2s cubic-bezier(.165, .84, .44, 1) .2s both;
}
/* O stagger do protótipo: a segunda linha sai 150ms depois da primeira. */
.dicarvalho-tipo-9__linha:nth-of-type(2) .dicarvalho-tipo-9__linha-texto,
.dicarvalho-hero__heading-line:nth-of-type(2) .dicarvalho-hero__heading-text {
animation-delay: .35s;
}
/* --- Imagem do hero: fecha o zoom devagar.
*
* `[data-heroimg]`: scale 1.12 → 1, 2.2s, power2.out. */
@keyframes dc-hero-zoom {
from { transform: scale(1.12); }
to { transform: scale(1); }
}
.dicarvalho-tipo-9__imagem,
.dicarvalho-hero__media,
.dicarvalho-curso-hero__imagem {
animation: dc-hero-zoom 2.2s cubic-bezier(.215, .61, .355, 1) both;
}
/* --- Entrada por scroll ([data-dc-rv]).
*
* `[data-rv]` no protótipo: y 42 → 0, opacity 0 → 1, .9s, power2.out,
* disparado por IntersectionObserver. Quem marca os nós é o render.php de
* cada bloco, nos mesmos elementos que o design marca.
*
* O `.dc-rv-armado` no é o contrato: o estado escondido só vale
* depois que theme/assets/js/reveal.js confirmou que existe quem revele.
* Sem JS, sem IntersectionObserver ou com movimento reduzido, a classe
* nunca entra e o conteúdo nasce visível — nada fica preso invisível. */
.dc-rv-armado [data-dc-rv] {
opacity: 0;
transform: translateY(42px);
transition: opacity .9s cubic-bezier(.215, .61, .355, 1),
transform .9s cubic-bezier(.215, .61, .355, 1);
}
.dc-rv-armado [data-dc-rv].is-revelado {
opacity: 1;
transform: none;
}
}