/*
* ArtEco — detalhes visuais que o theme.json não consegue representar.
*
* Todo valor vem de um token declarado no theme.json. Nada é redeclarado aqui:
* se um número precisar mudar, ele muda no theme.json, não neste arquivo.
*/
/* --------------------------------------------------------------
Rótulos e ações — tracking e caixa alta
Aplicados por classe porque são papéis de texto, não blocos.
-------------------------------------------------------------- */
/* Rótulo de lugar do hero: 12px, tracking 3px */
.arteco-eyebrow {
font-size: var(--wp--preset--font-size--tag);
font-weight: 500;
line-height: 1.5;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--wp--preset--color--tinta);
}
/*
* No Figma o rótulo abre 18px acima do título, enquanto o resto da coluna
* respira 45px. É a única exceção ao ritmo da coluna.
*/
.arteco-eyebrow + * {
margin-block-start: var(--wp--preset--spacing--30);
}
/* Rótulo numerado das entradas: 10px, tracking 3px */
.arteco-label {
font-size: var(--wp--preset--font-size--micro);
font-weight: 400;
line-height: 1.5;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--wp--preset--color--ardosia-700);
}
/* Caixa alta aplicada por CSS, nunca digitada no conteúdo */
.arteco-caps {
text-transform: uppercase;
}
/* Ações textuais: no hero em tinta, nas entradas em terracota */
.arteco-action,
.arteco-more {
font-size: var(--wp--preset--font-size--ui);
font-weight: 600;
line-height: 1.4285;
text-transform: uppercase;
}
.arteco-action {
letter-spacing: 0.7px;
}
.arteco-more {
letter-spacing: 1.4px;
}
.arteco-action a {
color: var(--wp--preset--color--tinta);
}
/* A seta é decorativa: fica fora da árvore de acessibilidade */
.arteco-action a::after,
.arteco-more a::after {
content: "\2192";
margin-inline-start: 0.6em;
}
/* --------------------------------------------------------------
Margem lateral fluida da Home
-------------------------------------------------------------- */
/*
* Sem esta regra a margem lateral cai de 100px em 1440 para ZERO em 1240, e o
* conteúdo encosta nas duas bordas numa faixa de 458px de viewport.
*
* 6.94vw reproduz a proporção do Figma (100 / 1440). O teto é 92px e não 100
* de propósito: com barra de rolagem clássica o viewport de layout são 1425px,
* e um teto de 100 deixaria só 1225 de espaço, comprimindo o conteúdo aprovado
* de 1240. Com 92 o conteúdo mantém os 1240 e a centralização devolve a margem
* — 100px exatos onde a barra é sobreposta, 92,5 onde ela ocupa espaço, que é
* o que a Home já entregava. O desktop aprovado não muda.
*
* Vive no CSS e não como padding do bloco `main` para ficar ao lado das regras
* de cabeçalho e rodapé, que usam a mesma fórmula: as três faixas precisam
* alinhar entre si, e uma fórmula só num lugar só é mais fácil de manter.
*/
.home main.wp-block-group {
padding-inline: clamp(24px, 6.94vw, 92px);
}
/* --------------------------------------------------------------
Hero — deslocamento assimétrico do texto
-------------------------------------------------------------- */
/*
* No Figma a coluna de texto começa 100px abaixo do topo da imagem. O valor
* vive aqui, e não como padding inline no pattern, porque precisa responder a
* media query — atributo de bloco não responde.
*/
.arteco-hero__texto {
padding-top: 100px;
}
/* --------------------------------------------------------------
Hero — área de imagem
-------------------------------------------------------------- */
/*
* A área de imagem do hero é um core/cover, não um core/image. O cover é o
* único bloco do core que permanece no site quando ainda não tem mídia:
* render_block_core_image() devolve '' se o não tiver src, enquanto
* render_block_core_cover() devolve o conteúdo intacto. Vazio, o cover mostra
* a caixa reservada; preenchido, a imagem ocupa exatamente a mesma área, com
* object-fit e ponto focal nativos do bloco.
*
* A proporção aprovada no Figma vive aqui, no tema, e não como atributo do
* bloco: é decisão de design, e assim não pode ser deformada por engano na
* edição. O min-height zera o padrão de 430px do cover para que a proporção
* seja quem manda.
*/
.arteco-hero .wp-block-cover {
aspect-ratio: 608 / 584;
min-height: 0;
}
/*
* Assim que existe imagem, o lavado de 20% que servia de placeholder sai de
* cena. Uma sobreposição escolhida deliberadamente na edição, com outro valor
* de opacidade, continua valendo.
*/
.arteco-hero .wp-block-cover:has(.wp-block-cover__image-background) .wp-block-cover__background.has-background-dim-20 {
opacity: 0;
}
/* --------------------------------------------------------------
Seção de entradas — a grade é o componente
-------------------------------------------------------------- */
.arteco-entradas .wp-block-column {
display: flex;
flex-direction: column;
border-inline-end: 1px solid var(--wp--custom--hairline);
}
.arteco-entradas .wp-block-column:last-child {
border-inline-end: 0;
}
/*
* A separação de 40px entre o texto e o CTA é garantida pelo padding-bottom
* do grupo de conteúdo, no pattern — como no Figma, onde é um padding
* declarado e não sobra de distribuição. O auto abaixo apenas alinha os três
* CTAs na base quando as colunas têm alturas diferentes.
*/
.arteco-entradas .arteco-more {
margin-block-start: auto;
}
/* ==============================================================
Camada responsiva
--------------------------------------------------------------
Dois pontos de corte, ambos medidos e não convencionais:
1024px — onde a medida de leitura das Entradas deixa de
funcionar. O texto útil cai de 374px (~40 caracteres)
para 302px (~32) e, em 782px, para 221px (~24), com o
parágrafo em 13 linhas.
781px — constante do próprio WordPress. Em
wp-includes/blocks/columns/style.css o core empilha as
colunas com flex-basis:100% !important abaixo de 782px
e impõe flex-wrap:nowrap !important acima. Adotar outro
valor significaria brigar com o core em duas frentes.
============================================================== */
@media (max-width: 1024px) {
/*
* Três colunas viram uma. Grid em vez de flex porque o
* flex-wrap:nowrap !important do core vale acima de 782px —
* sob grid a regra deixa de se aplicar, sem !important de volta.
*/
.arteco-entradas .wp-block-columns {
display: grid;
grid-template-columns: 1fr;
}
/* O dispositivo dos fios não sai de cena: gira 90 graus */
.arteco-entradas .wp-block-column {
border-inline-end: 0;
border-block-end: 1px solid var(--wp--custom--hairline);
}
.arteco-entradas .wp-block-column:last-child {
border-block-end: 0;
}
/* Sem teto a linha chegaria a cerca de 105 caracteres */
.arteco-entradas .wp-block-group {
max-width: 640px;
}
/*
* Sem colunas irmãs não existe base comum para ancorar o CTA.
* A separação de 40px continua garantida pelo padding-bottom
* do grupo de conteúdo, declarado no pattern.
*/
.arteco-entradas .arteco-more {
margin-block-start: 0;
}
}
@media (max-width: 781px) {
/* Empilhado, o deslocamento de 100px vira vazio sem função */
.arteco-hero__texto {
padding-top: 0;
}
/*
* A imagem passa a ocupar 100% da coluna: em 768px isso daria
* 738px de altura. O teto limita apenas a escala — a proporção
* 608/584 e o recorte do cover permanecem intactos.
*/
.arteco-hero .wp-block-cover {
max-width: 520px;
}
/*
* O rótulo do botão pede 315px e a área útil em 360px é de 312.
* Ocupando a largura disponível, o rótulo não estoura.
*/
.arteco-hero .wp-block-buttons,
.arteco-hero .wp-block-button,
.arteco-hero .wp-block-button__link {
width: 100%;
}
}
/* ==============================================================
Componentes globais — cabeçalho e rodapé
============================================================== */
/*
* As duas faixas atravessam a largura toda e carregam o fio; o conteúdo fica
* contido em 1240 (cabeçalho) e 392 (rodapé) pelo layout do próprio bloco.
* A margem lateral usa a mesma fórmula da Home, para que logo e menu alinhem
* com o hero e com as entradas.
*/
.arteco-header,
.arteco-footer {
padding-inline: clamp(24px, 6.94vw, 92px);
}
.arteco-header {
border-block-end: 1px solid var(--wp--custom--hairline);
}
/*
* Vão mínimo entre logo e menu — o piso, não o vão desenhado.
*
* A linha do cabeçalho é `space-between`: o vão que aparece é a sobra da
* faixa, e o blockGap de 120px da raiz age apenas como piso. Enquanto a sobra
* é maior que o piso, o piso não é lido — em português a sobra é 121px, e é
* ela que está desenhada hoje.
*
* O piso só passa a valer quando a sobra encolhe, e aí ele decide entre
* apertar o vão ou quebrar a linha. Com 120px de piso, o menu em inglês
* (1075) mais o logo (88) deixavam 77px de sobra numa faixa de 1240: menos
* que o piso, e a linha quebrava — o menu descia para baixo do logo e a faixa
* passava de 186 para 338px. Nenhuma viewport corrigia isso, porque a faixa
* tem teto de 1240 e não cresce mais.
*
* 56px é piso suficiente para as duas línguas caberem nesse teto com folga, e
* baixo o bastante para nunca ser lido em português: lá a sobra segue sendo
* 121px e o cabeçalho renderiza pixel a pixel como hoje. Só o inglês passa a
* usar o vão apertado — 77px — em vez de quebrar a linha.
*/
.arteco-header > .wp-block-group {
column-gap: 56px;
}
.arteco-footer {
border-block-start: 1px solid var(--wp--custom--hairline);
}
/*
* Os rótulos do rodapé são menores e mais espaçados que os do menu principal:
* 12px com tracking de 3px, contra os 14px do cabeçalho.
*/
.arteco-footer .wp-block-navigation {
font-size: var(--wp--preset--font-size--tag);
font-weight: 500;
line-height: 1.5;
letter-spacing: 3px;
text-transform: uppercase;
}
/*
* A faixa do rodapé: logo, as duas colunas de links e as redes, na mesma
* linha. O `space-between` do bloco distribui as quatro áreas e encosta as
* redes na borda direita; o `align-items` de topo é o que faz as três
* primeiras alinharem pela primeira linha de texto, e não pelo centro de
* alturas diferentes.
*
* O ponto separador em terracota saiu daqui junto com a composição que o
* pedia: ele existia para separar links numa linha só. Empilhados um por
* linha, cada item já se separa sozinho, e um "·" ao fim de cada linha viraria
* ruído. A decoração era do CSS, então some sem tocar no menu.
*/
/*
* Dois níveis de classe porque o layout flex do bloco gera
* `.wp-container-… { align-items: … }` a partir do alinhamento vertical, com
* uma classe só, e o WordPress imprime esse CSS depois do da folha do tema.
* Com uma classe a regra empatava e perdia por ordem — medi o `flex-start`
* teimando no lugar do `center` do mobile.
*/
.arteco-footer .arteco-footer__faixa {
align-items: flex-start;
}
/* O logo não estica junto com as colunas — mantém os 88 do bloco */
.arteco-footer__logo {
flex: 0 0 auto;
}
/*
* As colunas ficam alinhadas à esquerda, uma linha por link. A orientação
* vertical vem do próprio bloco de navegação; aqui só se garante que a lista
* não estique e que o tracking de 3px não empurre o último caractere para
* fora da medida.
*/
.arteco-footer__coluna {
flex: 0 1 auto;
}
.arteco-footer__coluna .wp-block-navigation-item__content {
display: block;
}
/* As redes encostam na direita e não quebram entre si */
.arteco-footer__redes {
flex: 0 0 auto;
}
/* Ícones sociais em tinta, sem pastilha de fundo */
.arteco-footer .wp-block-social-link {
color: var(--wp--preset--color--tinta);
}
/*
* Abaixo de 782 a faixa empilha — o mesmo ponto de corte que o resto do
* sistema usa, e o mesmo em que as quatro áreas deixam de caber: somadas dão
* 594px de conteúdo contra os 673 disponíveis, e os três intervalos de 45
* estouram a linha. Deixadas por conta do `wrap`, elas quebravam em duas ou
* três fileiras irregulares; empilhadas, viram a sequência que o rodapé
* sempre teve — logo, institucional, jurídico, redes.
*
* Centralizado, como o rodapé era antes desta reorganização: numa coluna
* estreita o alinhamento à esquerda deixaria o logo solto num canto. As duas
* colunas de links precisam de dois níveis de classe para virar o
* `align-items` que o bloco de navegação declara a partir da orientação
* vertical.
*/
@media (max-width: 781px) {
.arteco-footer .arteco-footer__faixa {
flex-direction: column;
align-items: center;
text-align: center;
}
.arteco-footer__faixa .wp-block-navigation__container {
align-items: center;
}
}
/* ==============================================================
Seções de página de largura total
============================================================== */
/*
* As seções das páginas internas são alignfull porque pelo menos uma delas
* carrega faixa de fundo que precisa sangrar até a borda. Isso impede que a
* margem lateral venha do `main`: padding ali cancelaria o sangramento.
* Mesma fórmula da Home, com teto de 80px — é a margem que o Figma usa nesta
* página, e é o que deixa a grade de 1280 dos Três Campos caber inteira.
*/
.arteco-secao {
padding-inline: clamp(24px, 5.56vw, 80px);
}
/* ==============================================================
Página editorial — tipografia fluida
--------------------------------------------------------------
Os tamanhos vivem aqui, e não como atributo de bloco, pela mesma
razão do deslocamento do hero da Home: valor inline não responde
a media query e vence qualquer seletor de classe. Nenhum destes
tamanhos existe na escala do theme.json, que fica intocado.
============================================================== */
/*
* 5.83vw dá exatamente os 84px do Figma em 1440. O piso de 36px é o que
* mantém "ARTE-ECOLOGIA" inteiro na segunda linha até 360px de viewport —
* abaixo disso a palavra voltaria a quebrar no hífen.
*/
.arteco-manifesto h1 {
font-size: clamp(36px, 5.83vw, 84px);
font-weight: 400;
line-height: 1;
letter-spacing: -1px;
}
/*
* Equilíbrio de altura entre os três campos, como no frame: as colunas partem
* de 500px mesmo quando o texto é curto. O flex já as iguala entre si; este
* piso é o que aproxima a seção da altura do Figma.
*/
.arteco-campos .wp-block-columns {
min-height: 500px;
}
/* Citação de abertura: 1.94vw = 28px em 1440 */
.arteco-lead {
font-size: clamp(20px, 1.94vw, 28px);
font-weight: 300;
line-height: 1.4;
}
/* Citação de fecho: 2.92vw = 42px em 1440 */
.arteco-citacao {
font-family: var(--wp--preset--font-family--display);
font-size: clamp(24px, 2.92vw, 42px);
font-style: italic;
font-weight: 400;
line-height: 1.3;
}
/* Respiro da faixa de fecho: 9.79vw = 141px em 1440, piso no token de 57px */
.arteco-fecho {
padding-block: clamp(57px, 9.79vw, 141px);
}
/*
* Ritmo na emenda com a seção anterior.
*
* O blockGap de 120px da raiz é o ritmo certo entre seções que se encostam sem
* respiro próprio. Aqui as duas vizinhas já trazem o seu: 80px de padding
* inferior na coluna dos Campos e 141px de padding superior nesta faixa. Somados
* ao gap herdado davam 341px de vazio — um valor que ninguém decidiu, resultado
* de três espaçamentos independentes fazendo o mesmo trabalho no mesmo lugar.
*
* No Figma o vão equivalente é de ~281px. Com 57px o total fica em 278.
* O guard de :not(:first-child) evita empurrar a faixa quando ela abrir a página.
*/
.arteco-fecho:not(:first-child) {
margin-block-start: var(--wp--preset--spacing--70);
}
/* ==============================================================
Página "O Instituto"
--------------------------------------------------------------
Tipografia e proporções específicas desta página. A grade dos
Três Eixos vem inteira de .arteco-entradas — nenhuma grade nova.
============================================================== */
/*
* Área de imagem reservada. Mesma solução do hero da Home: core/cover,
* porque core/image sem src é descartado no site. Vazio mostra a caixa;
* preenchido, a imagem ocupa a mesma área com object-fit e ponto focal.
*/
.arteco-media {
min-height: 0;
}
/* Com imagem, o lavado de 20% que serve de placeholder sai de cena */
.arteco-media:has(.wp-block-cover__image-background) .wp-block-cover__background.has-background-dim-20 {
opacity: 0;
}
.arteco-instituto .arteco-media {
aspect-ratio: 608 / 584;
}
.arteco-origem .arteco-media {
aspect-ratio: 456 / 500;
}
.arteco-eixos .arteco-media {
aspect-ratio: 359.5 / 372.33;
}
/*
* H1 institucional: mesma regra do manifesto — Playfair 400, caixa mista.
* O frame desta página traz caixa alta, mas a decisão consolidada do sistema
* é caixa mista, e é ela que vale. 5.83vw dá os 84px do Figma em 1440.
*/
.arteco-instituto h1 {
font-size: clamp(36px, 5.83vw, 84px);
font-weight: 400;
line-height: 1;
}
/* O lead deste hero é 24/38,4, um pouco menor que o da abertura do manifesto */
.arteco-instituto .arteco-lead {
font-size: clamp(20px, 1.67vw, 24px);
line-height: 1.6;
}
/* Título da Origem: 48/60 no frame */
.arteco-origem h2 {
font-size: clamp(32px, 3.33vw, 48px);
font-weight: 400;
line-height: 1.25;
}
/* Corpo da Origem: 20/36 — o 20 é token, a entrelinha é desta seção */
.arteco-origem .wp-block-column p:not([class*="arteco"]) {
line-height: 1.8;
}
/* Títulos dos eixos: 28/42 no frame */
.arteco-eixos h3 {
font-size: clamp(22px, 1.94vw, 28px);
line-height: 1.5;
}
/* Corpo dos eixos: 17/28,9 no frame */
.arteco-eixos .wp-block-column p:not([class*="arteco"]) {
font-size: 17px;
line-height: 1.7;
}
/*
* Gutters dos Três Eixos.
*
* Estes 40px moravam no atributo de estilo das colunas, dentro do pattern.
* Estilo inline vence qualquer seletor de classe e nenhuma media query o
* alcança sem !important — foi o que impediu, até aqui, desligar o recuo
* quando as colunas empilham. Aqui produzem exatamente o mesmo desenho:
* 0/40, 40/40, 40/0, sobre um flex-basis de conteúdo de 29,03%.
*/
.arteco-eixos .wp-block-column {
padding-inline-end: 40px;
}
.arteco-eixos .wp-block-column + .wp-block-column {
padding-inline-start: 40px;
}
.arteco-eixos .wp-block-column:last-child {
padding-inline-end: 0;
}
/* ==============================================================
"O Instituto" — camada responsiva
--------------------------------------------------------------
Um único ponto de corte, 1024px, já aprovado no sistema. Abaixo
dele a página inteira vira uma coluna editorial — que é o que já
acontece nas Entradas da Home e nos Três Campos.
Medido: o corpo dos eixos chega a 31 caracteres em 1100px, o
mesmo limiar que justificou o corte nas Entradas. O lead do hero
cai a 34 caracteres em 900 e a 29 em 782; o corpo da Origem, a
35 em 782. Nenhum rebalanceamento de coluna recupera a faixa
782–900, então hero e Origem empilham junto com os eixos.
Abaixo de 781 esta página não pede nenhuma regra: os tetos de
imagem e o padding fluido de .arteco-secao já cobrem a faixa, e
o core empilha por conta própria.
============================================================== */
@media (max-width: 1024px) {
/*
* Grid em vez de flex, pela mesma razão das Entradas: o
* flex-wrap:nowrap !important do core vale acima de 782px.
* Os vãos de 77px e 100px não precisam ser redeclarados — o
* blockGap sai por classe wp-container-* gerada, e o grid a
* honra como row-gap. Os flex-basis inline das colunas são
* ignorados sob grid.
*/
.arteco-instituto .wp-block-columns,
.arteco-origem .wp-block-columns {
display: grid;
grid-template-columns: 1fr;
}
/*
* Medida única do bloco empilhado. 640px não é valor novo: é o
* teto que .arteco-entradas já usa desde a responsividade da
* Home. Aplicado também à imagem, é o que faz imagem e texto
* dividirem a mesma borda esquerda e direita.
*
* O teto limita apenas a escala máxima. A proporção declarada
* em cada seção, o recorte do cover e o ponto focal continuam
* intactos, e a área segue editável pela Biblioteca de Mídia.
*/
.arteco-instituto .wp-block-column,
.arteco-origem .wp-block-column,
.arteco-eixos .arteco-media {
max-width: 640px;
}
/*
* Empilhado não existe gutter horizontal: o recuo lateral sai
* de cena e as três colunas passam a partir da mesma borda.
* Os 80px que separavam as colunas giram 90 graus, como os
* fios já fazem, e viram o vão vertical entre os eixos.
*
* O segundo seletor não é redundante: a regra de desktop acima
* usa combinador de irmãos e carrega três classes. Sem ele, a
* regra de duas classes perderia por especificidade e as
* colunas 2 e 3 manteriam o recuo de 40px ao empilhar.
*/
.arteco-eixos .wp-block-column,
.arteco-eixos .wp-block-column + .wp-block-column {
padding-inline: 0;
padding-block: 40px;
}
.arteco-eixos .wp-block-column:first-child {
padding-block-start: 0;
}
.arteco-eixos .wp-block-column:last-child {
padding-block-end: 0;
}
}
/* ==============================================================
Página "Direção Artística"
--------------------------------------------------------------
Perfil institucional em três seções que se encostam: no frame o
fio da Trajetória nasce exatamente na emenda com o hero, e a
faixa da Bio na emenda seguinte.
Nenhuma grade nova. O hero repete a composição da Origem —
imagem à esquerda, texto centrado à direita — e a Trajetória é
uma coluna de rótulo ao lado de uma coluna de texto.
============================================================== */
/*
* Emenda com o cabeçalho.
*
* O blockGap de 120px da raiz separa cabeçalho, conteúdo e rodapé em todas as
* páginas, e é o valor certo para o rodapé — o frame pede exatamente 120px
* entre a última seção e o fio de baixo. No topo, porém, o frame abre com 80.
*
* O ajuste vive no `main` desta página, alcançado por :has() — o mesmo recurso
* que o placeholder de imagem já usa — para que o respiro passe a ser o
* padding declarado no pattern do hero e nenhuma outra página mude.
*/
main.wp-block-group:has(.arteco-direcao) {
margin-block-start: 0;
}
/*
* Emenda entre as seções.
*
* As três trazem o próprio respiro em padding, como no frame. O blockGap da
* raiz somaria 120px a cada emenda — 320px de vão onde o frame pede 200 — e
* empurraria os fios para fora do lugar. Duas classes no seletor porque a
* regra do core, `.wp-container-* > * + *`, já vale uma.
*/
.arteco-secao.arteco-trajetoria,
.arteco-secao.arteco-bio {
margin-block-start: 0;
}
/* --------------------------------------------------------------
Rótulos desta página
--------------------------------------------------------------
Os três sobem de 10 para 14px em semibold. O componente base
`.arteco-label` fica intocado: caixa alta, entrelinha e tracking
de 3px continuam vindo dele.
Os rótulos da Trajetória e da Bio são, além de rótulos, os
títulos das suas seções — h2 por semântica, rótulo por desenho.
Como h2 eles herdariam Playfair, 36px e cor tinta de
`:root :where(h2)`, que empata em especificidade com uma classe
só; por isso os dois seletores são de dois níveis e a família e
a entrelinha aparecem escritas.
-------------------------------------------------------------- */
.arteco-label--hero,
.arteco-trajetoria .arteco-label--lateral,
.arteco-bio .arteco-label--bio {
font-family: var(--wp--preset--font-family--body);
font-size: var(--wp--preset--font-size--ui);
font-weight: 600;
line-height: 1.5;
}
/* Só o rótulo do hero abre o tracking para 4px, e só ele é teal */
.arteco-label--hero {
letter-spacing: 4px;
color: var(--wp--preset--color--teal);
}
.arteco-trajetoria .arteco-label--lateral {
color: var(--wp--preset--color--ardosia-700);
}
/* A bio é chamada de imprensa, não rótulo de seção: terracota */
.arteco-bio .arteco-label--bio {
color: var(--wp--preset--color--terracota);
}
/* --------------------------------------------------------------
Hero — retrato e nome
-------------------------------------------------------------- */
/*
* Retrato vertical. Mesma área reservada do resto do sistema: core/cover com
* .arteco-media, que já traz o min-height zerado e o lavado de placeholder
* que sai de cena assim que existe imagem.
*/
.arteco-direcao .arteco-media {
aspect-ratio: 487.2 / 700;
}
/*
* Dessaturação do retrato — decisão desta página, não regra do sistema. O
* seletor é o que o cover cria quando há mídia; vazio, não há o que
* dessaturar. Nenhuma outra imagem do tema é alcançada.
*/
.arteco-direcao .arteco-media .wp-block-cover__image-background {
filter: grayscale(1);
}
/*
* No frame o parágrafo de apresentação para em 640, não nos 672,8 da coluna.
* O :not() é o mesmo da Origem: alcança o corpo sem tocar nos rótulos.
*/
.arteco-direcao .wp-block-column p:not([class*="arteco"]) {
max-width: 640px;
}
/* --------------------------------------------------------------
Trajetória & Formação
-------------------------------------------------------------- */
/*
* O fio de abertura da seção. No frame ele vem a 10% de opacidade; aqui usa o
* hairline do theme.json, que é o único fio declarado no sistema.
*/
.arteco-trajetoria {
border-block-start: 1px solid var(--wp--custom--hairline);
}
/* --------------------------------------------------------------
Bio curta
-------------------------------------------------------------- */
/*
* O contorno da faixa. O cinza de fundo é atributo do bloco, como já acontece
* na Citação de fecho — fica visível e editável na edição. Só a borda vive
* aqui, porque nenhuma UI do Gutenberg a alcança com o hairline do sistema.
*/
.arteco-bio {
border: 1px solid var(--wp--custom--hairline);
}
/*
* Citação da bio: Playfair itálico a 24/38,4. Não é `.arteco-citacao` — esta
* é menor, alinhada à esquerda e com entrelinha bem mais aberta (1,6 contra
* 1,3). O componente global fica intocado. 1.67vw devolve os 24px em 1440,
* a mesma fórmula que o lead do Instituto já usa.
*
* Os 1000px são a medida do frame — 83 caracteres por linha, contra os 103
* que os 1240 do container dariam. O max-width só funciona porque o pattern
* põe rótulo e citação dentro de um grupo de fluxo: filho direto do layout
* `constrained`, a citação receberia do core `max-width: 1240px` e
* `margin: auto !important`, que a limitariam e ainda a centralizariam. Um
* nível de aninhamento resolve os dois sem !important de volta.
*/
.arteco-bio-citacao {
font-family: var(--wp--preset--font-family--display);
font-size: clamp(20px, 1.67vw, 24px);
font-style: italic;
font-weight: 400;
line-height: 1.6;
max-width: 1000px;
}
/* ==============================================================
"Direção Artística" — camada responsiva
--------------------------------------------------------------
Um único ponto de corte, 1024px, já aprovado no sistema. Abaixo
de 781 esta página não pede nada: o teto de 640px e o padding
fluido de .arteco-secao já cobrem a faixa, e o H1 é o token de
72px que a Home já entrega sem redução até 360px de viewport.
============================================================== */
@media (max-width: 1024px) {
/*
* Grid em vez de flex, pela razão de sempre: o
* flex-wrap:nowrap !important do core vale acima de 782px.
*/
.arteco-direcao .wp-block-columns,
.arteco-trajetoria .wp-block-columns {
display: grid;
grid-template-columns: 1fr;
}
/*
* Medida única do bloco empilhado — os mesmos 640px que as
* Entradas e o Instituto já usam. Sem o teto, o corpo da
* Trajetória chegaria a 91 caracteres por linha em 1024, mais
* largo do que os 84 que o desktop já entrega.
*
* A proporção do retrato, o recorte do cover e o ponto focal
* permanecem intactos: o teto limita só a escala.
*/
.arteco-direcao .wp-block-column,
.arteco-trajetoria .wp-block-column {
max-width: 640px;
}
/*
* O retrato tem o seu próprio teto, mais baixo que o da coluna.
* Com 640px de largura, a proporção 487,2/700 devolve 919px de
* altura — mais alto que qualquer imagem do sistema e quase a
* tela inteira de um portátil. É a mesma medida que levou o hero
* da Home a limitar o cover em 520px abaixo de 781.
*
* 487,2 não é número novo: é a largura que o retrato tem no
* frame. Empilhado, ele volta exatamente ao tamanho desenhado —
* 487,2 por 700 — e a proporção, o recorte e o ponto focal
* seguem intactos, porque o teto limita só a escala.
*/
.arteco-direcao .arteco-media {
max-width: 487.2px;
}
/*
* Empilhado, o rótulo lateral vira cabeçalho da seção e os
* 100px que o separavam do texto viram vão vertical — respiro
* demais para um rótulo de 14px. Desce ao token de 24.
*/
.arteco-trajetoria .wp-block-columns {
row-gap: var(--wp--preset--spacing--40);
}
}
/* ==============================================================
Página "Obras"
--------------------------------------------------------------
Composição própria: no hero o texto pesa mais que a imagem, a
faixa é grade de três imagens sem texto e o fecho não tem faixa
de fundo. A grade das Entradas não serve a nenhuma das três —
ela traz fios verticais e colunas de 29,03%.
Como nas páginas anteriores, os tamanhos que não existem na
escala do theme.json vivem aqui, nunca como atributo de bloco:
valor inline não responde a media query.
============================================================== */
/*
* Ritmo vertical: nada a declarar.
*
* A primeira versão do frame encostava as seções umas nas outras, e o blockGap
* de 120px da raiz precisava ser anulado em três pontos — cabeçalho, faixa e
* fecho. A revisão do frame passou a abrir exatamente 120px nas quatro
* emendas, que é o que a raiz já entrega sozinha. As três regras saíram, e o
* respiro desta página passou a ser o do sistema.
*
* O padding interno do hero continua sendo o do frame: 80 no topo e 57 na
* base, que somados ao blockGap dão os 204 e 172 desenhados.
*/
/* --------------------------------------------------------------
Hero — tese e obra de capa
-------------------------------------------------------------- */
/*
* Obra de capa: 549 por 584 no frame, quase quadrada. Área reservada pelo
* mesmo core/cover com .arteco-media do resto do sistema — vazio mostra a
* caixa, preenchido a imagem ocupa a mesma área com recorte e ponto focal
* nativos. Sem ponto focal declarado: o centro é o padrão e é o que o frame
* mostra.
*/
.arteco-obras .arteco-media {
aspect-ratio: 549 / 584;
}
/*
* Medida do bloco de texto. No frame a coluna tem 672,8 mas o texto para em
* 640 — o mesmo teto que as Entradas, o Instituto e a Direção já usam. Vive
* no grupo, e não na coluna, para não encurtar o rótulo nem o título.
*/
.arteco-obras-corpo {
max-width: 640px;
}
/*
* Corpo da tese: 18/29,25 no frame. O primeiro parágrafo é o lead e fica com
* os 20/28 da raiz; do segundo em diante o texto desce para 18. O `p + p`
* também alcança um quarto parágrafo que a edição venha a acrescentar, que é
* o comportamento certo. O 18 não vira token: é medida desta seção.
*/
.arteco-obras-corpo p + p {
font-size: 18px;
line-height: 1.625;
}
/* --------------------------------------------------------------
Faixa de obras
-------------------------------------------------------------- */
/*
* Três áreas de mesma largura, sem flex-basis declarado — o core já divide o
* container em partes iguais. Com o vão de 32px cada uma fica com 392 dos 397
* do frame.
*
* A proporção é a do frame, 397 por 380. As três são iguais de propósito: os
* 388 da terceira imagem são lapso de composição, não hierarquia.
*/
.arteco-faixa-obras .arteco-media {
aspect-ratio: 397 / 380;
}
/* --------------------------------------------------------------
Fecho — meta institucional
-------------------------------------------------------------- */
/*
* Sem fio de abertura.
*
* A primeira versão do frame separava a vitrine do fecho com um hairline; a
* revisão o removeu e deu fundo próprio à faixa, que passou a se distinguir
* pelo tom e não por uma linha. O `border-block-start` saiu daqui.
*
* O fundo #e9e9e9 vive como atributo do bloco, no pattern, e não nesta folha —
* é a mesma escolha da Citação de fecho e da Bio curta: assim ele fica visível
* e editável no Gutenberg.
*/
/*
* Citação de meta: Playfair itálico a 24/41,6 — a revisão do frame baixou o
* corpo de 26 para 24 e manteve a entrelinha, que por isso abriu de 1,6 para
* 1,733. Não é .arteco-citacao, que é quase o dobro (42) e bem mais fechada
* (1,3), nem .arteco-bio-citacao, que tem o mesmo corpo mas é alinhada à
* esquerda e fecha em 1,6. Peso 400 e não o 500 do frame: o Google Fonts do
* tema carrega apenas 1,400 em itálico, e sintetizar peso muda o desenho da
* letra.
*
* 1.67vw devolve os 24px em 1440, a mesma fórmula do lead do Instituto e da
* citação da Bio.
*/
/*
* O pull quote do ensaio entra AQUI, e não numa regra própria: seria a quinta
* citação em Playfair itálico, todas variando só em tamanho e entrelinha. A
* medida desta serve exatamente ao corpo de 764 do post, então o seletor foi
* agrupado em vez de duplicado. A caixa do pull quote — os dois fios e a
* centralização — fica na seção do Blog, porque é layout, não tipografia.
*
* As quatro citações do tema seguem pendentes de consolidação num componente
* só com modificador de tamanho; este agrupamento é o primeiro passo.
*/
.arteco-obras-citacao,
.arteco-post-conteudo blockquote {
font-family: var(--wp--preset--font-family--display);
font-size: clamp(20px, 1.67vw, 24px);
font-style: italic;
font-weight: 400;
line-height: 1.733;
}
/* ==============================================================
"Obras" — camada responsiva
--------------------------------------------------------------
Os dois pontos de corte do sistema. Em 1024 o hero empilha; em
781 o core já empilha a faixa por conta própria e só o botão
pede ajuste.
============================================================== */
@media (max-width: 1024px) {
/*
* Grid em vez de flex, pela razão de sempre: o
* flex-wrap:nowrap !important do core vale acima de 782px. A ordem
* do DOM já entrega a tese e depois a obra de capa.
*
* Empilhados, os 18px de vão entre as colunas viram vão vertical
* entre um bloco de texto e uma imagem grande — pouco para essa
* emenda. Sobe ao token de 45.
*/
.arteco-obras .wp-block-columns {
display: grid;
grid-template-columns: 1fr;
row-gap: var(--wp--preset--spacing--60);
}
/* Mesma medida do bloco empilhado que Instituto e Direção usam */
.arteco-obras .wp-block-column {
max-width: 640px;
}
/*
* A obra de capa tem teto próprio, mais baixo que o da coluna: os
* 549px que ela tem no frame. Empilhada, volta exatamente ao
* tamanho desenhado, e a proporção, o recorte e o ponto focal
* seguem intactos — o teto limita só a escala.
*/
.arteco-obras .arteco-media {
max-width: 549px;
}
}
@media (max-width: 781px) {
/*
* A faixa empilha sozinha: o core zera o flex-basis das colunas
* abaixo de 782. Só o botão pede ajuste, e é o mesmo que o hero da
* Home já faz nesta largura.
*/
.arteco-citacao-obras .wp-block-buttons,
.arteco-citacao-obras .wp-block-button,
.arteco-citacao-obras .wp-block-button__link {
width: 100%;
}
}
/* ==============================================================
Página "Programas"
--------------------------------------------------------------
Índice editorial: rótulo e título, e abaixo uma linha por
programa — nome à esquerda, descrição e saída à direita,
separadas por fio. É a primeira página do sistema sem nenhuma
imagem, e a primeira a usar dourado como cor de rótulo e
ardosia-700 como cor de corpo de texto.
Nenhuma grade existente servia: as das Entradas, dos Campos e
dos Eixos são de três colunas com fios verticais; aqui são duas
colunas com fios horizontais.
============================================================== */
/*
* Rótulo do índice. Variante de .arteco-eyebrow, que já entrega os 12px em
* peso 500, a entrelinha de 1,5 e a caixa alta. A base fica intocada: só o
* tracking, que cai de 3 para 1,5, e a cor, que passa a dourado, moram aqui.
*/
.arteco-eyebrow--programas {
letter-spacing: 1.5px;
color: var(--wp--preset--color--dourado);
}
/*
* Vão entre rótulo e título.
*
* `.arteco-eyebrow + *` já reserva 18px — é a exceção do hero da Home, onde o
* rótulo abre mais perto do título que o resto da coluna. Aqui o frame pede
* 24, e as duas regras empatam em especificidade com o blockGap que o core
* gera por classe wp-container-*, de modo que a ordem de impressão decidiria
* o resultado. Três níveis de seletor tiram a dúvida.
*/
.arteco-programas .arteco-eyebrow--programas + * {
margin-block-start: var(--wp--preset--spacing--40);
}
/*
* Redução do título em telas estreitas.
*
* "Programas" é a primeira palavra do sistema que não cabe no token de 72px:
* mede 330,3px em Playfair e não tem onde quebrar. A largura útil é o viewport
* menos os 48px de margem lateral da seção, de modo que a palavra cabe até
* 390px de viewport (342 úteis) e passa a ser cortada em 375 (327) e em 360
* (312) — sem barra de rolagem, porque o excesso é clipado.
*
* O teto de 72px é o token e continua valendo em tudo acima de 400px: o termo
* em vw só passa à frente abaixo disso. Nada muda no desktop, no tablet nem na
* maior parte dos celulares, e o H1 global do theme.json fica intocado — a
* regra alcança apenas o título desta página.
*/
.arteco-programas h1 {
font-size: clamp(48px, 18vw, 72px);
}
/*
* Emenda entre o título e o índice. O respiro de 80px vive no padding do hero,
* como no frame; o blockGap de 120px da raiz somaria a ele e afastaria o
* primeiro fio. No topo e no rodapé da página o blockGap continua valendo: o
* frame pede 138px do fio do cabeçalho ao rótulo, que são os 120 da raiz mais
* os 18 de padding do hero, e 116 da última linha ao rodapé, que são os 120.
*/
.arteco-secao.arteco-programas-lista {
margin-block-start: 0;
}
/*
* Recuo do conteúdo em relação aos fios. No frame o fio mede 1242 e o texto
* 1194 — 24px de cada lado. Vive no CSS, e não como atributo de bloco, porque
* precisa colapsar em mobile, onde somaria à margem lateral da seção.
*
* O box-sizing é o que faz o rótulo e o título alinharem com as linhas.
* O WordPress não declara border-box globalmente: quem o traz são os blocos
* que embrulham conteúdo, como .wp-block-group — é o caso das linhas, para as
* quais esta declaração é redundante. O
e o
do rótulo, não. Sem ela,
* o `max-width: 1240px` do layout `constrained` limita a caixa de conteúdo
* deles, os 24px de recuo ficam do lado de fora, a caixa cresce para 1265 e o
* `margin: auto` do core perde a folga para centralizar — o texto do hero
* começava 12,5px à esquerda do texto das linhas em 1440.
*/
.arteco-programas > *,
.arteco-programa {
box-sizing: border-box;
padding-inline: var(--wp--preset--spacing--40);
}
/* --------------------------------------------------------------
Linha de programa
-------------------------------------------------------------- */
/*
* O fio de abertura de cada linha, no hairline do theme.json — o frame traz
* 0,25 de opacidade, mas 0,3 é o único fio declarado no sistema e a diferença
* não se vê. A borda mora no elemento da linha, que ocupa o container inteiro,
* então ela atravessa os 1240 enquanto o texto para nos 1192.
*
* O respiro de 45px é dos dois lados, e vive aqui e não no pattern porque a
* linha é feita para ser duplicada: em atributo de bloco, cada cópia poderia
* divergir da anterior sem que ninguém percebesse.
*/
.arteco-programa {
border-block-start: 1px solid var(--wp--custom--hairline);
padding-block: var(--wp--preset--spacing--60);
}
/*
* Nome do programa: 24/33 no frame, contra os 36/1,1111 que `:root :where(h2)`
* entrega. Peso 400 e família vêm de `elements.heading` e não se repetem aqui.
* Peso 500 do frame não é reproduzido: o Google Fonts do tema carrega apenas
* 400 e 700 em Playfair, e sintetizar peso muda o desenho da letra.
*
* 1.67vw devolve os 24px em 1440 — a mesma fórmula do lead do Instituto.
*/
.arteco-programa h2 {
font-size: clamp(20px, 1.67vw, 24px);
line-height: 1.375;
}
/*
* Corpo da descrição: 17/27,63 em peso 400 e ardosia-700. Os 17px já existem
* nos Três Eixos; o peso e a cor são desta página — é texto de índice, que
* pede mais presença que o corpo editorial em peso 300.
*/
.arteco-programa-texto {
font-size: 17px;
font-weight: 400;
line-height: 1.625;
color: var(--wp--preset--color--ardosia-700);
}
/*
* Saída da linha. Tratamento único para todos os links do índice — o frame
* traz dois, um em tinta com fio dourado e outro inteiro em teal, sem regra
* que explique a diferença.
*
* O sublinhado é text-decoration e não borda: acompanha a quebra de linha,
* recua do texto por text-underline-offset e não cria caixa. O foco continua
* vindo do outline dourado que o theme.json declara para links.
*/
.arteco-programa-link {
font-size: 15px;
font-weight: 500;
line-height: 1.5;
}
.arteco-programa-link a {
color: var(--wp--preset--color--tinta);
text-decoration: underline;
text-decoration-color: var(--wp--preset--color--dourado);
text-decoration-thickness: 1px;
text-underline-offset: 6px;
}
.arteco-programa-link a:hover {
text-decoration-thickness: 2px;
}
/*
* Status de programa sem destino. Não é link e não deve parecer um: sem
* sublinhado, sem cor de link e sem cursor de ponteiro. Terracota, caixa alta
* por CSS e 12px — o mesmo tamanho do rótulo do índice.
*/
.arteco-programa-status {
font-size: var(--wp--preset--font-size--tag);
font-weight: 500;
line-height: 1.5;
letter-spacing: 1.125px;
text-transform: uppercase;
color: var(--wp--preset--color--terracota);
}
/* ==============================================================
"Programas" — camada responsiva
============================================================== */
@media (max-width: 1024px) {
/*
* No frame sobram 218px vazios à direita da descrição — é o que dá
* medida de leitura ao texto em 1440. Abaixo disso o espaço faz
* falta, e a coluna de texto o absorve.
*
* O seletor é longo porque o do core também é: acima de 782px,
* `.wp-block-columns:not(.is-not-stacked-on-mobile) >
* .wp-block-column[style*=flex-basis]` zera o flex-grow de toda
* coluna com largura declarada, e são quatro níveis. Repetir o
* seletor de atributo e somar o filho direto leva a cinco, que
* decide sem depender da ordem de impressão das folhas.
*/
.arteco-programa .wp-block-columns > .wp-block-column[style*="flex-basis"]:last-child {
flex-grow: 1;
}
}
@media (max-width: 781px) {
/*
* Empilhado, o recuo de 24px somaria à margem lateral da seção e
* estreitaria o texto sem motivo. O fio continua atravessando o
* container inteiro; o conteúdo passa a alinhar com as pontas dele.
*
* A linha empilha sozinha — o core zera o flex-basis das colunas
* abaixo de 782 —, e a ordem do DOM já entrega nome, descrição e
* saída nessa sequência.
*/
.arteco-programas > *,
.arteco-programa {
padding-inline: 0;
}
}
/* ==============================================================
Página "Publicações"
--------------------------------------------------------------
Porta editorial da Editora Solano: uma seção só, em coluna
única alinhada à esquerda — rótulo, manifesto, parágrafo e
saída. É a segunda página do sistema sem nenhuma imagem, e a
mais simples de todas: quatro blocos e nenhuma grade.
O ritmo vertical é o da raiz. O frame abre 117px abaixo do fio
do cabeçalho e fecha 116 acima do rodapé — os 120 do blockGap,
com o arredondamento de sempre. A seção não declara padding.
============================================================== */
/*
* Rótulo da parceria editorial. Terceira variante de .arteco-eyebrow, que já
* entrega os 12px em peso 500, a entrelinha de 1,5 e a caixa alta. A base fica
* intocada: só o tracking, que cai de 3 para 2, e a cor, que passa a terracota.
*/
.arteco-eyebrow--publicacoes {
letter-spacing: 2px;
color: var(--wp--preset--color--terracota);
}
/*
* Vão entre rótulo e título — mesma disputa da página Programas.
* `.arteco-eyebrow + *` reserva 18px, exceção do hero da Home, e empata em
* especificidade com o blockGap que o core gera por classe wp-container-*.
* Três níveis de seletor decidem sem depender da ordem de impressão.
*/
.arteco-publicacoes .arteco-eyebrow--publicacoes + * {
margin-block-start: var(--wp--preset--spacing--50);
}
/*
* Medida de leitura desta página.
*
* A primeira versão do frame trazia só a coluna de texto, e a largura de 737
* precisava de um teto declarado nos filhos de um grupo em fluxo. A revisão do
* frame acrescentou a imagem à direita: agora são duas colunas, e os 737 são a
* própria coluna da esquerda — 59,44% dos 1240. O teto saiu; a medida passou a
* ser estrutural.
*
* O parágrafo continua parando antes do título, como no frame: 625 contra os
* 737 da coluna.
*/
.arteco-publicacoes-bloco > .arteco-publicacoes-texto {
max-width: 625px;
}
/*
* Área de imagem: 502 por 783 no frame — o retrato mais vertical do sistema,
* contra os 0,94 de Obras e os 0,696 da Direção. Área reservada pelo mesmo
* core/cover com .arteco-media do resto do tema: vazio mostra a caixa,
* preenchido a imagem ocupa a mesma área com recorte e ponto focal nativos.
* Sem filtro, sem dessaturação e sem sobreposição no resultado final — o
* lavado de 20% é só o placeholder, e .arteco-media já o desliga assim que
* existe mídia.
*/
.arteco-publicacoes .arteco-media {
aspect-ratio: 502 / 783;
}
/*
* Redução do título em telas estreitas — mesma regra e mesma razão da página
* Programas. Aqui o H1 é uma frase inteira, com quatro palavras longas em vez
* de uma: "Instituto", "pesquisa", "termina" e "parede". O teto de 72px é o
* token e continua valendo em tudo acima de 400px; o termo em vw só passa à
* frente abaixo disso. O H1 global do theme.json fica intocado.
*/
.arteco-publicacoes h1 {
font-size: clamp(48px, 18vw, 72px);
}
/* ==============================================================
"Publicações" — camada responsiva
============================================================== */
@media (max-width: 781px) {
/*
* O core empilha as colunas por conta própria, e a ordem do DOM
* já entrega o texto antes da imagem. Só o vão pede ajuste: no
* desktop as duas colunas se encostam de propósito, e na vertical
* esse zero grudaria a imagem no botão.
*/
.arteco-publicacoes .wp-block-columns {
row-gap: var(--wp--preset--spacing--60);
}
}
/* ==============================================================
Linha com fio — componente compartilhado
--------------------------------------------------------------
A página da Residência é construída quase inteira sobre um mesmo
desenho: informações em linhas separadas por fio horizontal.
Aparece quatro vezes — ficha do programa, cinco eixos, grade do
seminário e perguntas frequentes — em duas, três ou uma coluna.
Em vez de quatro implementações paralelas, uma base e três
modificadores, como .arteco-entradas já faz com as Entradas, os
Campos e os Eixos.
O fio de cada linha fica embaixo; o de cima é do primeiro irmão.
Assim a série abre e fecha com fio, como no frame, sem depender
de um elemento envoltório só para carregar a borda.
A base serve tanto a um core/columns quanto a um core/details: o
FAQ é a mesma linha, com a pergunta no lugar da primeira coluna.
O margin zerado desliga o 1.75em que o core reserva abaixo de
todo bloco de colunas.
============================================================== */
.arteco-linha {
border-block-end: 1px solid var(--wp--custom--hairline);
padding-block: var(--wp--preset--spacing--40);
margin-block-end: 0;
}
.arteco-linha:first-child {
border-block-start: 1px solid var(--wp--custom--hairline);
}
/* Os eixos respiram mais: 32 no frame, contra os 24 das demais */
.arteco-linha--eixo {
padding-block: var(--wp--preset--spacing--50);
}
/* O cabeçalho da grade é só rótulo: 16 no frame */
.arteco-linha--cabecalho {
padding-block: var(--wp--preset--spacing--30);
}
/*
* Rótulo de linha — a coluna da esquerda da ficha e o cabeçalho da grade do
* seminário. Não é .arteco-label nem .arteco-eyebrow: aqueles são rótulos de
* seção, este é rótulo de campo, e vive dentro da linha.
*/
.arteco-linha__rotulo {
font-size: var(--wp--preset--font-size--ui);
font-weight: 600;
line-height: 1.4285;
letter-spacing: 0.7px;
text-transform: uppercase;
color: var(--wp--preset--color--ardosia-700);
}
/* ==============================================================
Página "Residência Artecologia Berlim"
--------------------------------------------------------------
A página mais longa e mais estratégica do site: é o destino de
todos os CTAs da Residência. Cinco seções, nenhuma imagem.
O ritmo vertical é o da raiz. O frame traz vãos irregulares
entre as seções — de 68 a 208 —, mas os frames revisados de
Obras, Programas e Publicações convergiram todos para os 120 do
blockGap, e é esse o ritmo adotado aqui. Nenhuma seção declara
margem: só a faixa do programa tem padding próprio.
============================================================== */
/* --------------------------------------------------------------
Rótulos desta página
-------------------------------------------------------------- */
/*
* Duas variantes de .arteco-eyebrow. Diferente das de Programas e
* Publicações, que mexiam só em tracking e cor, estas também mudam peso e
* entrelinha: no frame os rótulos da Residência são 12/16 em semibold, contra
* os 12/18 em medium da base. A base continua intocada.
*/
.arteco-eyebrow--residencia,
.arteco-eyebrow--materiais {
font-weight: 600;
line-height: 1.3333;
letter-spacing: 1.2px;
}
.arteco-eyebrow--residencia {
color: var(--wp--preset--color--dourado);
}
.arteco-eyebrow--materiais {
color: var(--wp--preset--color--teal);
}
/*
* Vão depois do rótulo. `.arteco-eyebrow + *` reserva 18px — exceção do hero
* da Home — e empata em especificidade com o blockGap gerado pelo core. Três
* níveis decidem, como nas páginas Programas e Publicações.
*/
.arteco-residencia-hero .arteco-eyebrow--residencia + *,
.arteco-materiais .arteco-eyebrow--materiais + * {
margin-block-start: var(--wp--preset--spacing--40);
}
/* --------------------------------------------------------------
Cabeçalhos de seção — um só desenho
--------------------------------------------------------------
O frame alterna dois idiomas sem regra aparente: Ficha,
Apresentação e Eixos em Playfair Medium caixa mista; Inscrições,
Seminário e FAQ em Playfair Bold CAIXA ALTA, e o de Inscrições
ainda a 30 em vez de 24. Aqui todos viram o mesmo: Playfair 400,
caixa mista, 24/33 — peso e família herdados de elements.heading
no theme.json, que fica intocado.
Os seletores são de dois níveis porque `:root :where(h2)` empata
com uma classe só. O h4 dos eixos entra na mesma regra: o
theme.json não declara h4, e sem isto ele cairia no tamanho
padrão do navegador.
-------------------------------------------------------------- */
.arteco-ficha h2,
.arteco-residencia-programa h2,
.arteco-residencia-programa h3,
.arteco-residencia-materiais h3,
.arteco-residencia-fecho h2,
.arteco-linha--eixo h4 {
font-size: clamp(20px, 1.67vw, 24px);
line-height: 1.375;
}
/* --------------------------------------------------------------
Hero
-------------------------------------------------------------- */
/*
* Medida de leitura: 896 no frame, com a chamada parando antes, em 768. Mesma
* solução da página Publicações — a seção fica em 1240 e o grupo interno,
* filho direto do layout `constrained`, recebe dele a centralização que o põe
* na borda da grade; o teto desce para os filhos do grupo, que estão em fluxo
* e por isso alinham à esquerda. Sem !important de volta.
*/
.arteco-residencia-hero__bloco > * {
max-width: 896px;
}
.arteco-residencia-hero__bloco > .arteco-residencia-lead {
max-width: 768px;
}
/*
* Redução do título em telas estreitas. "Artecologia" tem onze caracteres e
* não quebra: é a palavra mais larga de todo o projeto, e por isso o piso e o
* termo em vw são mais agressivos que os de Programas e Publicações. O teto de
* 72px continua sendo o token do theme.json, que fica intocado.
*/
.arteco-residencia-hero h1 {
font-size: clamp(40px, 15vw, 72px);
}
/* Chamada: 24/39 no frame — 1.67vw devolve os 24 em 1440 */
.arteco-residencia-lead {
font-size: clamp(20px, 1.67vw, 24px);
font-weight: 400;
line-height: 1.625;
color: var(--wp--preset--color--ardosia-700);
}
/*
* Caixa de data, local e formato. É um core/group comum: o padding é atributo
* do bloco e fica editável; só a borda vive aqui, porque nenhuma UI do
* Gutenberg alcança o hairline do sistema — a mesma razão da Bio curta.
* O fit-content faz a caixa abraçar o texto no desktop e preencher a coluna
* quando o texto quebra.
*/
.arteco-datas {
width: fit-content;
max-width: 100%;
border: 1px solid var(--wp--custom--hairline);
}
.arteco-datas p {
font-size: 16px;
font-weight: 500;
line-height: 1.5;
}
/* --------------------------------------------------------------
Ficha do Programa
-------------------------------------------------------------- */
/* Valor do campo: 16/24 no frame. O 16 não vira token — é medida da linha */
.arteco-ficha .arteco-linha p:not([class*="arteco"]) {
font-size: 16px;
line-height: 1.5;
}
/* --------------------------------------------------------------
Faixa do programa — Apresentação e Cinco Eixos
-------------------------------------------------------------- */
/* Corpo da apresentação: 18/29,25, a mesma medida do corpo de Obras */
.arteco-apresentacao p {
font-size: 18px;
line-height: 1.625;
}
/*
* O fio que abre os Cinco Eixos, e o respiro de 65 do frame até o título. A
* borda mora no grupo, e não em um separador no conteúdo, para que a edição
* não a apague sem querer — mesma escolha da Trajetória e do fecho de Obras.
*/
.arteco-eixos-residencia {
border-block-start: 1px solid var(--wp--custom--hairline);
padding-block-start: var(--wp--preset--spacing--70);
}
/*
* Numeral do eixo: 20/28 em semibold e dourado, o único numeral do sistema.
*
* Pedia 700, que não está entre os pesos carregados do IBM Plex Sans — a
* requisição traz 300, 400, 500, 600 e o itálico 400. Medi o que o navegador
* fazia com isso: em vez de sintetizar um negrito falso, ele resolvia para o
* 600 disponível, e o numeral já vinha desenhado em 600 (larguras idênticas
* com 700 e com 600 pedidos). A regra passa a dizer o que sempre saiu, e a
* folha deixa de pedir um peso que ninguém entrega — aparência inalterada.
*
* Se o numeral tiver mesmo de ser 700, o caminho é o inverso: acrescentar o
* 700 à requisição de fontes, ao custo de mais um arquivo baixado.
*/
.arteco-eixo-numero {
font-size: var(--wp--preset--font-size--body);
font-weight: 600;
line-height: 1.4;
letter-spacing: 1px;
color: var(--wp--preset--color--dourado);
}
.arteco-linha--eixo p:not([class*="arteco"]) {
font-size: 16px;
line-height: 1.5;
color: var(--wp--preset--color--ardosia-700);
}
/* --------------------------------------------------------------
Materiais do ateliê e Seminário
-------------------------------------------------------------- */
/* O cinza da caixa é atributo do bloco; só o contorno vive aqui */
.arteco-materiais {
border: 1px solid var(--wp--custom--hairline);
}
/*
* Fala do ateliê. É a única citação do sistema em IBM Plex, e não em Playfair:
* decisão de conteúdo — é uma fala de processo, não uma citação institucional.
* A família vem da raiz e não se repete aqui.
*/
.arteco-materiais-citacao {
font-size: var(--wp--preset--font-size--body);
font-style: italic;
font-weight: 400;
line-height: 1.625;
}
/* No seminário o rótulo é menor que o da ficha: 12/16 contra 14/20 */
.arteco-seminario .arteco-linha__rotulo {
font-size: var(--wp--preset--font-size--tag);
line-height: 1.3333;
letter-spacing: 0.6px;
}
.arteco-seminario .arteco-linha p:not([class*="arteco"]) {
font-size: var(--wp--preset--font-size--ui);
line-height: 1.4285;
}
/* --------------------------------------------------------------
Inscrições e Perguntas Frequentes
-------------------------------------------------------------- */
.arteco-inscricoes p {
font-size: 16px;
line-height: 1.625;
color: var(--wp--preset--color--ardosia-700);
}
/*
* O FAQ é um core/details por pergunta — nativo, sem JavaScript e sem bloco
* personalizado. Fechado por padrão: `showContent` já nasce falso no core.
* O teclado, o foco e o anúncio de recolhido e expandido vêm do navegador;
* não há ARIA para escrever nem para errar.
*
* A pergunta ocupa a largura inteira do resumo, de modo que o alvo de toque
* seja a linha toda, e o triângulo padrão sai de cena em favor do sinal de
* mais e de menos — o triângulo do navegador destoa do editorial.
*/
.arteco-faq summary {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--wp--preset--spacing--40);
font-size: 18px;
font-weight: 500;
line-height: 1.5556;
list-style: none;
}
.arteco-faq summary::-webkit-details-marker {
display: none;
}
.arteco-faq summary::after {
content: "+";
flex: 0 0 auto;
font-size: var(--wp--preset--font-size--body);
font-weight: 400;
line-height: 1;
color: var(--wp--preset--color--ardosia-700);
}
/* U+2212 é o sinal de menos, não o hífen: tem a mesma largura do mais */
.arteco-faq details[open] summary::after {
content: "\2212";
}
/* O foco não vem de elements.link do theme.json: summary não é link */
.arteco-faq summary:focus-visible {
outline: 2px solid var(--wp--preset--color--dourado);
outline-offset: 2px;
}
.arteco-faq summary + * {
margin-block-start: var(--wp--preset--spacing--20);
}
.arteco-faq .arteco-linha p {
font-size: var(--wp--preset--font-size--ui);
line-height: 1.625;
color: var(--wp--preset--color--ardosia-700);
}
/* ==============================================================
"Residência" — camada responsiva
--------------------------------------------------------------
Um ponto de corte só. Em 1024 nada quebra: as linhas continuam
legíveis em duas e três colunas. Em 781 o core empilha as
colunas por conta própria, e só três coisas pedem ajuste.
============================================================== */
@media (max-width: 781px) {
/*
* Empilhadas, as colunas da linha ficariam coladas: o vão
* declarado é zero, porque no desktop elas se encostam de
* propósito. Na vertical, o zero vira texto grudado.
*/
.arteco-linha.wp-block-columns {
row-gap: var(--wp--preset--spacing--10);
}
/*
* O cabeçalho da grade do seminário só faz sentido enquanto há
* colunas. Empilhado, "Quando / Horário / O quê" viraria três
* linhas soltas antes dos dados. Sai do desenho, mas continua
* na árvore de acessibilidade — os leitores de tela seguem
* anunciando o rótulo de cada campo.
*/
.arteco-linha--cabecalho {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
border: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
/* Mesmo comportamento do hero da Home e do fecho de Obras */
.arteco-residencia-fecho .wp-block-buttons,
.arteco-residencia-fecho .wp-block-button,
.arteco-residencia-fecho .wp-block-button__link {
width: 100%;
}
}
/* ==============================================================
Campo de formulário — componente compartilhado
--------------------------------------------------------------
O tema não tinha nenhum estilo de campo até aqui: nem input,
nem textarea, nem label. Este é o primeiro, e vale para todo
formulário que o site vier a ter.
ATENÇÃO: esta classe é só a caixa. Não há , não há