/* ========================================================================== MARK BASE - main.css Este arquivo NAO guarda tokens. Cor, tamanho, fonte e espacamento vivem todos no theme.json. Aqui so entra o que o theme.json nao sabe expressar: 1. @font-face do subset latin-ext (o theme.json nao aceita unicode-range) 2. entrelinha e caixa alta amarradas a cada tamanho de fonte 3. transicoes e :focus (o theme.json nao tem transition) 4. um punhado de utilitarios Toda regra abaixo usa var(--wp--...), que sao as variaveis geradas pelo theme.json. Nao existe um unico valor cru neste arquivo - e proposital. Se voce precisar de um valor novo, crie o token no theme.json primeiro. ========================================================================== */ /* -------------------------------------------------------------------------- 1. SUBSET LATIN-EXT -------------------------------------------------------------------------- O portugues inteiro (ã ç õ á ê à ü) cabe no subset 'latin', que ja esta registrado no theme.json. Este bloco cobre o resto do alfabeto latino (š ž ł ő ș...), util em nomes proprios estrangeiros. O 'unicode-range' e o que torna isso barato: o navegador so baixa estes arquivos se a pagina realmente contiver um desses caracteres. Numa pagina so em portugues, zero bytes. Por isso este bloco esta aqui e nao no theme.json - la nao existe forma de declarar unicode-range. -------------------------------------------------------------------------- */ @font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/archivo-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* -------------------------------------------------------------------------- 2. ENTRELINHA POR TAMANHO DE FONTE -------------------------------------------------------------------------- O WordPress gera uma classe .has-XXX-font-size para cada tamanho definido no theme.json, mas so com o font-size - sem entrelinha. Como texto grande precisa de entrelinha menor que texto pequeno, cada tamanho recebe aqui a sua, puxada dos tokens --wp--custom--entrelinha--*. Resultado pratico: escolher "Hero" no editor ja traz a entrelinha certa. -------------------------------------------------------------------------- */ :root .has-hero-font-size { line-height: var(--wp--custom--entrelinha--hero); letter-spacing: var(--wp--custom--espaco-letra--hero); font-family: var(--wp--preset--font-family--titulo); } :root .has-titulo-1-font-size { line-height: var(--wp--custom--entrelinha--titulo-1); letter-spacing: var(--wp--custom--espaco-letra--titulo-1); font-family: var(--wp--preset--font-family--titulo); } :root .has-titulo-2-font-size { line-height: var(--wp--custom--entrelinha--titulo-2); font-family: var(--wp--preset--font-family--titulo); } :root .has-titulo-3-font-size { line-height: var(--wp--custom--entrelinha--titulo-3); font-family: var(--wp--preset--font-family--titulo); } :root .has-corpo-grande-font-size { line-height: var(--wp--custom--entrelinha--corpo-grande); } :root .has-corpo-font-size { line-height: var(--wp--custom--entrelinha--corpo); } :root .has-pequeno-font-size { line-height: var(--wp--custom--entrelinha--pequeno); } /* Etiqueta: o unico tamanho com forma propria - caixa alta e espacada. Serve para rotulos curtos ("Nossos serviços", "Case"). Nunca para frases. */ :root .has-etiqueta-font-size { line-height: var(--wp--custom--entrelinha--etiqueta); letter-spacing: var(--wp--custom--espaco-letra--etiqueta); text-transform: uppercase; font-weight: 600; } /* -------------------------------------------------------------------------- 3. MOVIMENTO E FOCO -------------------------------------------------------------------------- O theme.json define as cores de :hover, mas nao sabe animar a troca. As transicoes ficam aqui, todas usando os mesmos dois tokens de duracao e a curva unica do site - e por isso que tudo no site "se move igual". -------------------------------------------------------------------------- */ a, .wp-element-button, .wp-block-button__link { transition: color var(--wp--custom--duracao--rapida) var(--wp--custom--easing), background-color var(--wp--custom--duracao--rapida) var(--wp--custom--easing), border-color var(--wp--custom--duracao--rapida) var(--wp--custom--easing), box-shadow var(--wp--custom--duracao--rapida) var(--wp--custom--easing), transform var(--wp--custom--duracao--rapida) var(--wp--custom--easing); } /* Anel de foco visivel para quem navega por teclado. Nao remova: sem isto o site fica inutilizavel para uma parte dos visitantes, e reprova em qualquer auditoria de acessibilidade. ANEL DUPLO, e nao simples. O botao primario tem fundo azul-texto; um anel azul-texto sobre ele daria contraste 1,00:1 - some por completo. Entao: box-shadow branco .... preenche os 2px de folga entre botao e anel outline azul-escuro .. o anel em si, 11,17:1 sobre branco Sobre fundo claro voce ve o anel escuro; sobre fundo escuro (rodape) voce ve a folga branca. Funciona nos dois casos sem regra extra. */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--wp--preset--color--azul-escuro); outline-offset: 2px; box-shadow: 0 0 0 2px var(--wp--preset--color--branco); border-radius: var(--wp--custom--raio--pequeno); } /* Respeita quem pediu ao sistema para reduzir animacoes. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* -------------------------------------------------------------------------- 4. AJUSTES DE BASE -------------------------------------------------------------------------- */ html { scroll-behavior: smooth; /* Compensa a altura do cabecalho fixo ao pular para uma ancora. Ajustar quando o cabecalho existir, na Fase 2. */ scroll-padding-top: var(--wp--preset--spacing--80); } /* Inter e Archivo foram desenhadas para renderizar assim no macOS/iOS. Sem isto os pesos aparecem mais gordos do que o previsto. */ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Evita a "orfa": uma palavra sozinha na ultima linha de um titulo. O navegador reequilibra as linhas automaticamente. */ :where(h1, h2, h3, h4, h5, h6) { text-wrap: balance; } /* Em paragrafos, 'pretty' so cuida da ultima linha - mais barato que reequilibrar o bloco inteiro. */ :where(p) { text-wrap: pretty; } /* Imagem nunca estoura o container. */ :where(img, video, svg) { max-width: 100%; height: auto; } /* -------------------------------------------------------------------------- 5. UTILITARIOS -------------------------------------------------------------------------- Classes para aplicar na aba "Avançado > Classes CSS adicionais" de um bloco no editor. -------------------------------------------------------------------------- */ /* Respiro vertical de secao. Use no bloco Grupo que envolve cada faixa do site. Cresce de 5rem no celular ate 10rem no desktop. */ .secao { padding-block: var(--wp--custom--espacamento--secao); } /* Meia secao, para faixas que precisam de menos ar. */ .secao-compacta { padding-block: calc(var(--wp--custom--espacamento--secao) / 2); } /* Card: fundo branco, canto arredondado, sombra sutil. */ .cartao { background-color: var(--wp--preset--color--branco); border: 1px solid var(--wp--preset--color--cinza-borda); border-radius: var(--wp--custom--raio--medio); box-shadow: var(--wp--preset--shadow--sutil); padding: var(--wp--preset--spacing--50); } /* Eleva o card no hover. Use junto com .cartao. Também condicionado a existir link dentro. Hoje todo card deste tipo é gerado a partir de um post e sempre tem link, então a condição não muda nada. Ela está aqui para o dia em que alguém montar um à mão. */ .cartao-interativo:has( a ):hover { box-shadow: var(--wp--preset--shadow--media); transform: translateY(-2px); } /* Texto so para leitores de tela (rotulo de formulario, "pular para o conteudo"). Fica invisivel mas continua sendo lido em voz alta. */ .apenas-leitor-de-tela { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- 6. CABEÇALHO -------------------------------------------------------------------------- DOIS ESTADOS, UMA CLASSE. .cabecalho--transparente sobre o hero azul (estado inicial) .cabecalho--fixo fundo branco, depois de rolar 80px O JavaScript da Fase 4 precisa fazer UMA coisa: ao passar de 80px de rolagem, trocar .cabecalho--transparente por .cabecalho--fixo no elemento .cabecalho. E desfazer ao voltar para o topo. Nada além disso. ENQUANTO O JS NÃO EXISTE: o estado transparente só faz sentido sobre o hero azul, que existe apenas na home. Em qualquer outra página, texto branco sobre fundo branco ficaria invisível. Por isso a regra abaixo força o estado sólido fora da home, usando a classe .home que o próprio WordPress coloca no body. Assim o site já é navegável agora, sem JS. -------------------------------------------------------------------------- */ .cabecalho { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding-block: var(--wp--preset--spacing--30); transition: background-color var(--wp--custom--duracao--media) var(--wp--custom--easing), box-shadow var(--wp--custom--duracao--media) var(--wp--custom--easing), color var(--wp--custom--duracao--media) var(--wp--custom--easing); } .cabecalho__interno { width: 100%; } /* ---- ESTADO TRANSPARENTE (sobre o hero) ---- */ /* A cor do texto vai no CABEÇALHO, não no link do menu, e o motivo é importante. O WordPress publica esta regra para o bloco de navegação: .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content { color: inherit } A classe repetida de propósito dá a ela peso 0-3-0. Qualquer regra nossa do tipo ".cabecalho--transparente .menu-principal a" tem peso 0-2-1 e PERDE, por mais correta que pareça. O link então herda a cor e ficava preto sobre o azul. Como o núcleo obriga o link a herdar, basta dar a cor certa ao pai: o link segue o cabeçalho sozinho. Não recoloque a regra no link, ela não tem como vencer sem !important. */ .cabecalho--transparente { background-color: transparent; box-shadow: none; color: var(--wp--preset--color--branco); } .cabecalho--transparente .logo__marca { color: var(--wp--preset--color--amarelo); } .cabecalho--transparente .logo__descritor { color: var(--wp--preset--color--branco); } /* No hover a conta muda: :hover conta como classe, então este seletor tem peso 0-3-1 e vence os 0-3-0 do núcleo. */ .cabecalho--transparente .menu-principal a:hover { color: var(--wp--preset--color--amarelo); } .cabecalho--transparente .portal__botao .wp-block-button__link { color: var(--wp--preset--color--branco); border-color: var(--wp--preset--color--branco); background-color: transparent; } .cabecalho--transparente .portal__botao .wp-block-button__link:hover { color: var(--wp--preset--color--azul-texto); background-color: var(--wp--preset--color--branco); } /* ---- ESTADO SÓLIDO ---- Vale só quando o JavaScript aplica .cabecalho--fixo, depois de 80px de rolagem. Até a Fase 4 havia aqui um seletor body:not(.home) que forçava o estado sólido fora da home. Ele existia porque ainda não havia JavaScript e o cabeçalho branco sobre fundo branco ficaria invisível nas internas. Hoje o JS existe e TODA página começa com hero azul, então a exceção deixou de fazer sentido: ela abria uma faixa branca acima do hero e empurrava o conteúdo. */ .cabecalho--fixo { background-color: var(--wp--preset--color--branco); box-shadow: var(--wp--preset--shadow--sutil); color: var(--wp--preset--color--preto); } .cabecalho--fixo .logo__marca, .cabecalho--fixo .logo__descritor { color: var(--wp--preset--color--azul); } /* Sem regra de cor no link aqui: ele herda o preto do cabeçalho. Veja a explicação no estado transparente, acima. */ .cabecalho--fixo .menu-principal a:hover { color: var(--wp--preset--color--azul-texto); } .cabecalho--fixo .portal__botao .wp-block-button__link { color: var(--wp--preset--color--azul); border-color: var(--wp--preset--color--azul); background-color: transparent; } .cabecalho--fixo .portal__botao .wp-block-button__link:hover { color: var(--wp--preset--color--branco); background-color: var(--wp--preset--color--azul-texto); border-color: var(--wp--preset--color--azul-texto); } /* ---- LOGO (texto, até o SVG chegar) ---- */ .logo { display: inline-flex; align-items: baseline; gap: var(--wp--preset--spacing--20); text-decoration: none; font-family: var(--wp--preset--font-family--titulo); line-height: 1; transition: color var(--wp--custom--duracao--media) var(--wp--custom--easing); } .logo__marca { font-size: var(--wp--preset--font-size--titulo-2); font-weight: 700; letter-spacing: -0.02em; } .logo__descritor { font-size: var(--wp--preset--font-size--etiqueta); font-weight: 500; letter-spacing: var(--wp--custom--espaco-letra--etiqueta); } /* ---- MENU ---- */ .menu-principal a { text-decoration: none; font-size: var(--wp--preset--font-size--pequeno); font-weight: 500; transition: color var(--wp--custom--duracao--rapida) var(--wp--custom--easing); } .cabecalho__direita { gap: var(--wp--preset--spacing--50); } .portal__botao .wp-block-button__link { border: 1px solid currentColor; font-size: var(--wp--preset--font-size--pequeno); padding-block: var(--wp--preset--spacing--20); } /* O painel do celular abre em azul da marca, com letra branca, e a cor vem de atributo do bloco de Navegação (overlayBackgroundColor e overlayTextColor, em patterns/cabecalho.php). Aqui só garantimos que o link herde essa cor em vez da cor de link do tema. */ .wp-block-navigation__responsive-container.is-menu-open a { color: inherit; } /* -------------------------------------------------------------------------- 7. RODAPÉ -------------------------------------------------------------------------- */ .rodape { padding-block: var(--wp--custom--espacamento--secao); } .assinatura { font-family: var(--wp--preset--font-family--titulo); font-size: var(--wp--preset--font-size--titulo-1); line-height: var(--wp--custom--entrelinha--titulo-1); letter-spacing: var(--wp--custom--espaco-letra--titulo-1); font-weight: 700; margin-block-end: var(--wp--preset--spacing--90); } /* O ponto final de cada palavra em amarelo. É a assinatura da marca. */ .assinatura__ponto { color: var(--wp--preset--color--amarelo); } .rodape__titulo { display: block; font-size: var(--wp--preset--font-size--etiqueta); letter-spacing: var(--wp--custom--espaco-letra--etiqueta); text-transform: uppercase; font-weight: 600; opacity: 0.75; margin-block-end: var(--wp--preset--spacing--30); } .rodape__endereco { font-style: normal; line-height: var(--wp--custom--entrelinha--corpo-grande); } .rodape__telefone { display: inline-block; margin-block-start: var(--wp--preset--spacing--30); font-size: var(--wp--preset--font-size--titulo-3); font-weight: 600; text-decoration: none; } .rodape__links { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--wp--preset--spacing--20); } .rodape a { color: var(--wp--preset--color--branco); text-decoration: none; transition: color var(--wp--custom--duracao--rapida) var(--wp--custom--easing); } .rodape a:hover { color: var(--wp--preset--color--amarelo); text-decoration: underline; } .rodape__linha { border: 0; border-top: 1px solid currentColor; opacity: 0.25; margin-block: var(--wp--preset--spacing--80); } .rodape__base { gap: var(--wp--preset--spacing--60); } .rodape__copyright { margin-block-start: var(--wp--preset--spacing--60); opacity: 0.8; } /* ---- REDES SOCIAIS ---- Os SVG usam stroke="currentColor", então basta mudar a cor do link. */ .redes { list-style: none; display: flex; gap: var(--wp--preset--spacing--40); padding: 0; margin: 0; } .redes a { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid currentColor; border-radius: 50%; opacity: 0.85; transition: color var(--wp--custom--duracao--rapida) var(--wp--custom--easing), opacity var(--wp--custom--duracao--rapida) var(--wp--custom--easing), transform var(--wp--custom--duracao--rapida) var(--wp--custom--easing); } .redes a:hover { color: var(--wp--preset--color--amarelo); opacity: 1; transform: translateY(-2px); text-decoration: none; } /* -------------------------------------------------------------------------- 8. HOME -------------------------------------------------------------------------- */ /* O hero ocupa cerca de 85% da altura da tela. O respiro extra no topo compensa o cabeçalho fixo, que fica por cima dele. */ .hero { min-height: 85vh; display: flex; flex-direction: column; justify-content: center; padding-block-start: calc(var(--wp--custom--espacamento--secao) * 0.75 + 4rem); padding-block-end: calc(var(--wp--custom--espacamento--secao) * 0.75); } .hero__apoio { max-width: 34rem; opacity: 0.92; } .etiqueta-secao { margin-block-end: var(--wp--preset--spacing--20); } /* Barra de números */ .numeros { padding-block: var(--wp--preset--spacing--80); } .numero__valor { font-family: var(--wp--preset--font-family--titulo); font-weight: 700; line-height: var(--wp--custom--entrelinha--titulo-1); margin: 0; } .numero__rotulo { color: var(--wp--preset--color--cinza-escuro); margin-block-start: var(--wp--preset--spacing--10); } /* Cards de segmento: DOIS POR DOIS no desktop, um por linha no celular. O bloco Colunas do WordPress não quebra linha sozinho: quatro colunas ficam quatro lado a lado e o texto de cada card fica espremido. As regras abaixo forçam a quebra sem exigir mudança no conteúdo das páginas já publicadas. */ .segmentos__grade { gap: var(--wp--preset--spacing--50); flex-wrap: wrap; } @media (min-width: 782px) { .segmentos__grade > .wp-block-column { flex-basis: calc(50% - var(--wp--preset--spacing--50) / 2); flex-grow: 0; } } /* Faixa de logos de clientes */ .logos__titulo { margin-block-end: var(--wp--preset--spacing--60); } .logos__faixa { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--wp--preset--spacing--70); } /* Fechamento */ .fechamento .wp-block-buttons { margin-block-start: var(--wp--preset--spacing--50); } .botao--escuro .wp-block-button__link { background-color: var(--wp--preset--color--preto); color: var(--wp--preset--color--branco); } .botao--escuro .wp-block-button__link:hover { background-color: var(--wp--preset--color--azul-escuro); } /* Botões sobre fundo azul */ .botao--claro .wp-block-button__link { background-color: var(--wp--preset--color--branco); color: var(--wp--preset--color--azul-texto); } .botao--claro .wp-block-button__link:hover { background-color: var(--wp--preset--color--amarelo); color: var(--wp--preset--color--amarelo-texto); } .botao--contorno-claro .wp-block-button__link { border: 1px solid var(--wp--preset--color--branco); color: var(--wp--preset--color--branco); background-color: transparent; } .botao--contorno-claro .wp-block-button__link:hover { background-color: var(--wp--preset--color--branco); color: var(--wp--preset--color--azul-texto); } /* -------------------------------------------------------------------------- 9. BLOG -------------------------------------------------------------------------- */ .post__dados { gap: var(--wp--preset--spacing--40); color: var(--wp--preset--color--cinza-escuro); margin-block: var(--wp--preset--spacing--30) var(--wp--preset--spacing--60); } .post__dados p { margin: 0; } /* Separador discreto entre data e tempo de leitura. */ .post__dados .mark-tempo-leitura::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background-color: var(--wp--preset--color--cinza-medio); vertical-align: middle; margin-inline-end: var(--wp--preset--spacing--30); } .post__capa img { border-radius: var(--wp--custom--raio--medio); } .post__navegacao { gap: var(--wp--preset--spacing--50); margin-block-start: var(--wp--preset--spacing--90); padding-block-start: var(--wp--preset--spacing--60); border-top: 1px solid var(--wp--preset--color--cinza-borda); } .lista__grade { gap: var(--wp--preset--spacing--50); } .cartao-post__data { color: var(--wp--preset--color--cinza-escuro); margin-block-end: var(--wp--preset--spacing--20); } .cartao-post .wp-block-post-title a { text-decoration: none; } .cartao-post .wp-block-post-title a:hover { text-decoration: underline; } .paginacao { margin-block-start: var(--wp--preset--spacing--80); padding-block-start: var(--wp--preset--spacing--50); border-top: 1px solid var(--wp--preset--color--cinza-borda); } .busca { max-width: 28rem; margin-block: var(--wp--preset--spacing--50); } /* -------------------------------------------------------------------------- 10. SLOTS RESERVADOS -------------------------------------------------------------------------- Contornos tracejados marcando onde entra imagem, ilustração ou selo que ainda não existe. Some sozinho quando o bloco for trocado por uma imagem de verdade, porque a classe deixa de existir. APAGUE ESTA SEÇÃO quando todos os slots estiverem preenchidos. -------------------------------------------------------------------------- */ .slot { display: grid; place-items: center; text-align: center; border: 2px dashed currentColor; border-radius: var(--wp--custom--raio--medio); opacity: 0.45; font-size: var(--wp--preset--font-size--pequeno); line-height: var(--wp--custom--entrelinha--pequeno); padding: var(--wp--preset--spacing--40); } /* Os espaços de imagem viraram bloco de Imagem nativo, e por isso não têm mais retângulo tracejado: o lugar de escolher a imagem é o editor, com a biblioteca de mídia, e não uma caixa desenhada no site. Sobram os dois que continuam vindo do painel ou do cadastro: o selo do rodapé e o logo de cliente, que é reserva para quando não houver nenhum cliente cadastrado. */ .slot--selo { width: 120px; height: 120px; border-radius: 50%; } /* Espaço do troféu, enquanto o arquivo não é enviado em Mark > Marca. Diferente dos espaços de imagem das páginas, este NÃO some quando está vazio: ele é preenchido por um campo do painel, e um campo de painel vazio não tem como se anunciar de outro jeito. A legenda diz o que entra ali e onde se resolve. */ .slot--trofeu { width: min(100%, 320px); height: var(--mark-trofeu-altura, 220px); } .slot--trofeu::after { content: "Foto do troféu do prêmio" "\A" "Mark > Marca, no painel"; white-space: pre; text-align: center; } .slot--logo { width: 130px; height: 40px; border-radius: var(--wp--custom--raio--pequeno); } /* IMAGEM SEM ARQUIVO ESCOLHIDO: NÃO ESCONDA NADA AQUI. Havia uma regra display:none neste ponto, e ela foi um erro. O functions.php manda este mesmo arquivo para dentro do editor, com add_editor_style(). Ou seja, toda regra escrita pensando no site vale também na tela de edição, e esconder um bloco vazio ali significa esconder justamente o que a pessoa precisa clicar para escolher a imagem. E era desnecessário: o próprio WordPress descarta um bloco de Imagem sem src na hora de exibir a página. No site não sobra nada; no editor o espaço continua clicável, com a biblioteca de mídia. */ /* O apoio gráfico das páginas internas: sem arquivo, a coluna fica vazia e o texto ao lado continua no lugar. */ .hero-interno__grafico img { width: 100%; height: auto; } /* ---- MOLDURA DA IMAGEM, COMO ESTILO DE BLOCO ---- Registrado em functions.php, aparece na barra lateral do editor em Estilos, com duas opções: Com moldura e Sem moldura. A moldura é SEMPRE explícita: só existe com is-style-moldura no bloco. Sem a classe, a imagem é solta. Foi essa a escolha porque o contrário poria caixa branca em volta de toda foto do blog e do gráfico do hero, que nunca tiveram nenhuma. Serve para captura de tela: um retângulo chapado precisa de borda para não flutuar. Não serve para mockup nem ilustração recortada, que já trazem sombra própria. */ .wp-block-image.is-style-moldura { background-color: var(--wp--preset--color--branco); border-radius: var(--wp--custom--raio--grande); padding: var(--wp--preset--spacing--20); box-shadow: var(--wp--preset--shadow--media); line-height: 0; } .wp-block-image.is-style-moldura img { display: block; width: 100%; height: auto; border-radius: var(--wp--custom--raio--medio); } /* SEM MOLDURA: o tema não pode acrescentar nada. A regra é explícita, e não apenas a ausência da outra, porque este estilo é escolha declarada de quem edita. Se amanhã alguma regra de seção resolver pintar fundo ou sombra numa imagem, esta aqui desfaz. */ .wp-block-image.is-style-sem-moldura, .wp-block-image.is-style-sem-moldura img { background: none; background-color: transparent; box-shadow: none; border: 0; padding: 0; border-radius: 0; } /* -------------------------------------------------------------------------- 11. PATTERNS DA HOME -------------------------------------------------------------------------- */ /* ---- HERO ---- */ .hero__botoes { margin-block-start: var(--wp--preset--spacing--60); } /* A sobrelinha vem DEPOIS dos botões e fecha o conjunto, por isso a linha fina acima dela em vez de margem solta. */ .hero__sobrelinha { margin-block-start: var(--wp--preset--spacing--70); padding-block-start: var(--wp--preset--spacing--30); border-top: 1px solid currentColor; display: inline-block; opacity: 0.85; } /* Indicador de rolagem no rodapé do hero. O traço desce e some, em laço. */ .hero__role { display: flex; align-items: center; gap: var(--wp--preset--spacing--30); margin-block-start: var(--wp--preset--spacing--80); font-size: var(--wp--preset--font-size--etiqueta); letter-spacing: var(--wp--custom--espaco-letra--etiqueta); text-transform: uppercase; opacity: 0.7; } .hero__role-traco { display: block; width: 1px; height: 2.5rem; background-color: currentColor; transform-origin: top; animation: mark-role 2s var(--wp--custom--easing) infinite; } @keyframes mark-role { 0% { transform: scaleY(0); opacity: 0; } 40% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } } /* ---- BARRA DE NÚMEROS ---- Sem ícone, sem divisória vertical. O respiro é que separa. */ .numeros { padding-block: var(--wp--preset--spacing--100); } .numeros__grade { gap: var(--wp--preset--spacing--90); } /* O traço amarelo abaixo de cada número. */ .numero__valor::after { content: ""; display: block; width: 3rem; height: 3px; background-color: var(--wp--preset--color--amarelo); margin-block-start: var(--wp--preset--spacing--30); } /* ---- MÉTODO EM TRÊS MOVIMENTOS ---- */ .metodo__grade { margin-block-start: var(--wp--preset--spacing--80); gap: var(--wp--preset--spacing--80); } /* A numeração é elemento gráfico, não informação: fica em cinza claro, grande, e recuada para trás do título. */ .movimento__numero { display: block; font-family: var(--wp--preset--font-family--titulo); font-size: clamp(3rem, 6vw, 4.5rem); font-weight: 700; /* Entrelinha 1 fazia a caixa da linha ficar MENOR que o glifo, e o topo do número era cortado. 1.15 dá folga. O padding protege contra fontes com ascendente alto. */ line-height: 1.15; padding-block-start: 0.08em; color: var(--wp--preset--color--cinza-borda); margin-block-end: var(--wp--preset--spacing--10); position: relative; z-index: 0; } .movimento > * + * { position: relative; z-index: 1; } /* Linha fina vertical separando as colunas. Some no celular, onde as colunas viram empilhadas e uma linha vertical não separaria nada. */ @media (min-width: 782px) { .metodo__grade > .wp-block-column + .wp-block-column { border-left: 1px solid var(--wp--preset--color--cinza-borda); padding-left: var(--wp--preset--spacing--60); } } /* ---- CARDS DE SEGMENTO ---- TRANSIÇÃO DO HOVER, documentada: fundo branco -> azul 250ms texto preto -> branco 250ms borda cinza -> azul 250ms sombra sutil -> média 250ms card sobe 4px 250ms seta entra deslizando 12px 250ms, com atraso de 50ms Todas usam a curva única do tema. A seta sai depois das outras de propósito: o atraso faz o movimento parecer uma coisa só, e não cinco coisas piscando juntas. */ .segmentos__grade { gap: var(--wp--preset--spacing--50); margin-block-start: var(--wp--preset--spacing--70); } .cartao-segmento { position: relative; background-color: var(--wp--preset--color--branco); border: 1px solid var(--wp--preset--color--cinza-borda); border-radius: var(--wp--custom--raio--medio); box-shadow: var(--wp--preset--shadow--sutil); padding: var(--wp--preset--spacing--50); transition: background-color var(--wp--custom--duracao--media) var(--wp--custom--easing), border-color var(--wp--custom--duracao--media) var(--wp--custom--easing), box-shadow var(--wp--custom--duracao--media) var(--wp--custom--easing), transform var(--wp--custom--duracao--media) var(--wp--custom--easing); } /* O card inteiro vira área clicável, mas o link continua sendo UM só, o do título. Leitor de tela anuncia um link com texto claro, em vez de vários links repetidos por card. */ .cartao-segmento .wp-block-heading a { text-decoration: none; color: var(--wp--preset--color--preto); } .cartao-segmento .wp-block-heading a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .cartao-segmento__seta { display: inline-block; margin-block-start: var(--wp--preset--spacing--40); font-size: var(--wp--preset--font-size--titulo-3); color: var(--wp--preset--color--amarelo); opacity: 0; transform: translateX(-0.75rem); transition: opacity var(--wp--custom--duracao--media) var(--wp--custom--easing) 50ms, transform var(--wp--custom--duracao--media) var(--wp--custom--easing) 50ms; } /* ---- QUEM REAGE AO MOUSE, E QUEM NÃO ---- O card só se comporta como clicável se ELE FOR clicável. A condição é :has( .wp-block-heading a ), ou seja, existe link no título. Isso é automático de propósito. A alternativa seria uma classe que alguém precisa lembrar de pôr e de tirar, e a memória falha na hora errada: no dia em que a página de Criação de Sites nascer, quem ligar o link não vai lembrar de trocar classe nenhuma. Com :has(), ligar o link JÁ é ligar o comportamento. O link do título é o alvo certo, e não um qualquer: por desenho, o card tem UM link só, o do título, e é o ::after dele que estica a área clicável até as bordas. Link dentro da descrição, se houver, não torna o card clicável e não deve enganar esta regra. */ .cartao-segmento:has( .wp-block-heading a ):hover, .cartao-segmento:has( .wp-block-heading a ):focus-within { background-color: var(--wp--preset--color--azul); border-color: var(--wp--preset--color--azul); box-shadow: var(--wp--preset--shadow--media); transform: translateY(-4px); } .cartao-segmento:has( .wp-block-heading a ):hover .wp-block-heading a, .cartao-segmento:has( .wp-block-heading a ):focus-within .wp-block-heading a, .cartao-segmento:has( .wp-block-heading a ):hover p, .cartao-segmento:has( .wp-block-heading a ):focus-within p { color: var(--wp--preset--color--branco); } .cartao-segmento:has( .wp-block-heading a ):hover .cartao-segmento__seta, .cartao-segmento:has( .wp-block-heading a ):focus-within .cartao-segmento__seta { opacity: 1; transform: translateX(0); } /* ---- CARD SEM DESTINO ---- O TRATAMENTO VISUAL FOI REMOVIDO. Os sete serviços passaram a ter página, então nenhum card fica sem destino e a diferença de elevação não tinha mais o que diferenciar. O que NÃO foi removido é a trava do :has() nas regras de hover, logo acima. Ela está dormente: com todos os cards ligados, não muda um pixel. Existe para o dia em que alguém acrescentar um card antes de a página existir, e o card não prometer um clique que não acontece. Foi isso que aconteceu antes, e tirar a trava seria reabrir a porta. */ /* ---- CARD LEVE ---- Mesma estrutura e mesmo hover do card normal, sem a elevação. Existe por causa da home. Os cards de segmento vêm logo acima, brancos e com sombra sobre fundo cinza. Repetir o mesmo peso na grade de serviços logo abaixo faria duas fileiras de caixas brancas disputando a mesma atenção, e o visitante leria as duas como uma coisa só. Sem fundo e sem sombra, a grade de serviços vira uma lista organizada em vez de uma vitrine, que é o papel dela ali: dizer os nomes e levar para a página de cada um. O hover completo continua, porque os sete são clicáveis. */ .cartao-segmento--leve { background-color: transparent; box-shadow: none; } /* Texto de apoio logo abaixo do cabeçalho da seção. Alinha à esquerda com o título, e não com a coluna de leitura centralizada, senão fica deslocado em relação ao que ele está apoiando. */ .secao__apoio { margin-block-start: var(--wp--preset--spacing--40); } .secao__apoio p { max-width: 60ch; margin: 0; } /* ---- PORTAL DO CLIENTE ---- */ .portal__lista { list-style: none; padding: 0; margin-block: var(--wp--preset--spacing--50); display: grid; gap: var(--wp--preset--spacing--30); } .portal__lista li { padding-left: var(--wp--preset--spacing--50); position: relative; } /* Marcador em traço amarelo, no lugar do ponto padrão. */ .portal__lista li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: var(--wp--preset--spacing--30); height: 2px; background-color: var(--wp--preset--color--amarelo); } /* ---- LINK CONTEXTUAL DEPOIS DA GRADE ---- Ele ficava logo abaixo do último card, sem respiro, e encostado na coluna de leitura em x=352. Lido rápido, parecia um item da grade que tinha ficado pela metade. Numa caixa própria, alinhado com a grade e com respiro dos dois lados, ele volta a ser o que é: um caminho para outra página. */ .secao__link { margin-block-start: var(--wp--preset--spacing--80); } .secao__link .link-seta { margin: 0; } .link-seta a { text-decoration: none; font-weight: 600; border-bottom: 1px solid currentColor; padding-block-end: 2px; } .link-seta__icone { display: inline-block; transition: transform var(--wp--custom--duracao--rapida) var(--wp--custom--easing); } .link-seta a:hover .link-seta__icone { transform: translateX(4px); } /* Moldura da captura de tela: borda clara e sombra suave, para dar a impressão de janela flutuando sobre o azul. */ /* A MOLDURA SAIU DAQUI. Este grupo pintava fundo branco, respiro, sombra e cantos arredondados em volta do que estivesse dentro. Funcionava para captura de tela e destruía qualquer PNG recortado: um mockup de monitor, que já traz sombra e perspectiva, ganhava uma caixa branca em volta. A moldura virou estilo do bloco de Imagem, escolhido na barra lateral do editor. Este grupo ficou só como gancho da animação de entrada (.mark-reveal) e como referência de posição. */ .portal__moldura { min-width: 0; } /* MOLDURA SEM IMAGEM: apaga o desenho, não o elemento. Aqui também havia display:none, e o efeito colateral era pior: como este CSS roda dentro do editor, a moldura sumia lá, e com ela o bloco de Imagem que mora dentro. Não dava para clicar no que não existe. Tirando fundo, sombra e respiro, a moldura não pinta nada no site, porque a imagem vazia não ocupa espaço. No editor ela continua no lugar, clicável. Mesmo resultado visual, sem esconder elemento. */ .portal__moldura:not(:has( img[src] )) { background: none; box-shadow: none; padding: 0; } .portal__captura { margin: 0; line-height: 0; } .portal__captura img { width: 100%; height: auto; border-radius: var(--wp--custom--raio--medio); display: block; } /* ---- FAIXA DE LOGOS, com movimento contínuo ---- A marcação já está pronta. O JS da Fase 4 duplica o conteúdo da trilha e adiciona .marquee--ativo no elemento pai. Sem JS, a faixa fica parada e continua legível, que é o comportamento correto de reserva. */ /* A faixa precisa atravessar a tela inteira. Sem isto ela herda a largura de leitura de 46rem do bloco que a envolve, e o overflow:hidden corta a trilha em quatro logos, que foi o que apareceu na tela. O truque de 100vw com margem negativa vaza da caixa do pai sem exigir mudança no conteúdo das páginas já publicadas. */ /* A faixa sangra de borda a borda saindo da coluna de leitura. A forma clássica disso é margin-inline: calc(50% - 50vw). Aqui ela não funciona, e o motivo é do WordPress: .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { margin-left: auto !important; margin-right: auto !important } Com !important, a margem negativa nunca chegava a valer. A faixa então nascia na borda esquerda da coluna e estourava a tela pela direita, no exato tamanho do respiro lateral da seção. left + translateX faz o mesmo deslocamento por outro caminho, que o !important do core não alcança, e evita um segundo !important no tema. */ .marquee { overflow: hidden; width: 100vw; max-width: 100vw; position: relative; left: 50%; transform: translateX(-50%); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee__trilha { list-style: none; padding: 0; margin: 0; display: flex; align-items: center; gap: var(--wp--preset--spacing--70); width: max-content; } .marquee--ativo .marquee__trilha { animation: mark-marquee 40s linear infinite; } .marquee--ativo:hover .marquee__trilha { animation-play-state: paused; } @keyframes mark-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Sem movimento para quem pediu menos animação no sistema. */ @media (prefers-reduced-motion: reduce) { .marquee--ativo .marquee__trilha { animation: none; } .hero__role-traco { animation: none; opacity: 1; } } /* ---- FECHAMENTO ---- */ .fechamento__grade { gap: var(--wp--preset--spacing--80); } .fechamento .wp-block-buttons { margin-block-start: var(--wp--preset--spacing--50); } /* -------------------------------------------------------------------------- 12. PATTERNS DE PÁGINA INTERNA -------------------------------------------------------------------------- */ /* Hero interno: menor que o da home. Quem chegou aqui já sabe o que quer. */ .hero--interno { min-height: 60vh; } /* ---- HERO INTERNO SEM IMAGEM ---- O hero é de duas colunas, 60% de texto e 40% de imagem. Enquanto o arquivo não chega, a coluna da direita fica com 493px de nada e o texto se espreme em 60% de uma tela de 1440. Aqui ele se adapta ao que existe: sem imagem escolhida, vira coluna única, o texto usa a largura de leitura confortável e a altura mínima cai, porque não há mais o que equilibrar do outro lado. É automático nos dois sentidos. No dia em que a imagem for enviada, o :has() deixa de casar e o layout de duas colunas volta sozinho. */ .hero--interno:not(:has( .wp-block-column img[src] )) .wp-block-columns { display: block; } .hero--interno:not(:has( .wp-block-column img[src] )) .wp-block-column { flex-basis: auto !important; width: 100%; } /* A coluna da imagem vazia não ocupa lugar nenhum. */ .hero--interno:not(:has( .wp-block-column img[src] )) .wp-block-column:last-child { display: none; } .hero--interno:not(:has( .wp-block-column img[src] )) { min-height: 0; padding-block: var(--wp--preset--spacing--100) var(--wp--preset--spacing--90); } /* Sem a coluna ao lado, o texto ganha largura, mas não a largura toda: título de 1248px de linha é ilegível. */ .hero--interno:not(:has( .wp-block-column img[src] )) h1 { max-width: 20ch; } .hero--interno:not(:has( .wp-block-column img[src] )) .hero__apoio { max-width: 58ch; } /* ---- BLOCO DE DIAGNÓSTICO ---- O texto começava em x=352 e o título da seção em x=96: 256px de deslocamento, com uma faixa vazia do tamanho da própria coluna de leitura à esquerda. Parecia erro porque era. A causa: o cabeçalho da seção é alignwide, ou seja, 78rem centralizados e começando em 96. O parágrafo, sem alinhamento, recebe do layout constrained a largura de leitura de 46rem TAMBÉM centralizada, e o centro de 46rem não coincide com a borda de 78rem. São duas restrições diferentes e por isso precisam de dois elementos: um alignwide que fixa a margem esquerda, e dentro dele um limite de medida de leitura. É o que .diagnostico__corpo faz. Entrelinha maior que o resto do site, porque é o único bloco de leitura longa da página. */ .diagnostico__corpo { margin-block-start: var(--wp--preset--spacing--60); } .diagnostico__corpo p { max-width: 46rem; margin-inline: 0; } .diagnostico p { line-height: 1.8; } .diagnostico p + p { margin-block-start: var(--wp--preset--spacing--50); } /* ---- COMO OPERAMOS, grade de seis ---- Sem caixa. A separação é espaço mais uma linha fina de 1px. */ /* ---- GRADE QUE NÃO DEIXA BURACO ---- Cinco itens em três colunas dão 3 mais 2, e sobra um vazio no canto direito da segunda linha. Sete páginas de serviço, umas com cinco itens e outras com seis: uma grade rígida acerta em metade delas. A troca de grade por flex resolve para qualquer quantidade. Os itens têm largura fixa de um terço, então todos medem igual, e a última linha incompleta é CENTRALIZADA em vez de ficar encostada à esquerda com um buraco ao lado. Dois itens centralizados leem como decisão; dois itens com um vazio ao lado leem como erro. As larguras por faixa de tela repetem o que as media queries do fim do arquivo já faziam com a grade: três, duas e uma coluna. */ /* O seletor repete a classe de propósito, para somar 0-2-0. O WordPress gera, num