/*
Theme Name: Arantes Films
Template: blocksy
Version: 1.0.0
Text Domain: arantesfilms
*/
:root {
--af-bone: #F5F1EA; /* fundo. nunca #fff puro */
--af-graphite: #1F1D1B; /* texto */
--af-terracotta: #A85D42; /* acento, usar com parcimónia */
--af-terracotta-deep: #864A35; /* mesmo acento para TEXTO: 6,13:1 sobre osso */
--af-sand: #D9D3C9; /* placeholders e separadores */
--af-serif: 'Fraunces', Georgia, serif;
--af-sans: 'Inter', -apple-system, sans-serif;
--af-gap: 1.5rem;
--af-section-y: 4rem;
}
@media (min-width: 768px) {
:root { --af-gap: 2rem; --af-section-y: 7rem; }
}
body {
background: var(--af-bone);
color: var(--af-graphite);
/* !important pela mesma razão documentada abaixo para h1/h2/h3: a
folha estática do tema-pai, `ct-main-styles-css` (main.min.css),
tem um seletor agrupado que inclui `body` a definir font-family
com a mesma especificidade (0,0,1) e sai depois de
`arantesfilms-css` no . Sem !important o corpo do texto
herdava a fonte de sistema do Blocksy em vez de Inter. */
font-family: var(--af-sans) !important;
font-size: 1.0625rem;
line-height: 1.7;
}
h1, h2, h3 {
/* NOTA sobre o tamanho ótico da Fraunces.
A Fraunces tem eixo `opsz`: o desenho das letras muda consoante o
corpo a que são usadas. NÃO é preciso declará-lo aqui — o browser
aplica `font-optical-sizing: auto` por omissão e faz corresponder o
opsz ao font-size. Medido a 66px: com o ajuste automático a headline
mede 263px, com o eixo desligado mediria 286px.
Uma tentativa anterior de forçar `font-variation-settings: "opsz" 96`
foi removida por não ter efeito (o CSS dinâmico do Blocksy repõe
`font-variation-settings: normal` depois do nosso) e por ser
redundante. Se algum dia se quiser um desenho ainda mais fino do que
o automático, o caminho é o filtro em inc/blocksy-palette.php, não
uma regra aqui. */
/* !important necessário: a causa não é CSS dinâmico do Blocksy impresso
depois do nosso — o nosso já sai antes de tudo isso no . A causa
real é a folha ESTÁTICA do tema-pai, `ct-main-styles-css`
(main.min.css, o bundle do Blocksy), que a fila de estilos do
WordPress imprime depois de `arantesfilms-css` e que já traz, por
omissão, um seletor agrupado "h1,h2,h3,h4,h5,h6,label,..." a definir
font-family com a mesma especificidade (0,0,1) que o nosso `h1, h2,
h3`. Com especificidade igual, ganha quem sai depois no — daí
o !important. Isto não depende da paleta de cores, por isso a
correção da paleta do Blocksy não o resolve. */
font-family: var(--af-serif) !important;
font-weight: 400;
line-height: 1.15;
letter-spacing: -0.015em;
}
/* Mínimo a 1.75rem e não 2.25rem: a 375px a headline ocupava 360px, 44% do
ecrã, e empurrava o subtítulo e a imagem do hero para fora do primeiro
ecrã. A maioria dos noivos chega por telemóvel. */
h1 { font-size: clamp(1.75rem, 6vw, 4.5rem); }
/* Linha curta acima da headline, a dizer o que a headline não diz. */
.af-eyebrow {
font-family: var(--af-sans);
font-size: 0.8125rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
/* Terracota escuro e não --af-terracotta: o claro sobre osso dá 4,12:1 e
falha o mínimo de 4,5:1. Este dá 6,13:1. */
color: var(--af-terracotta-deep);
margin-bottom: 1rem;
}
h2 { font-size: clamp(1.75rem, 4vw, 3rem); }
/* Uma ideia por ecrã: respiração generosa entre secções. */
.af-section {
padding-block: var(--af-section-y);
padding-inline: var(--af-gap);
max-width: 68rem;
margin-inline: auto;
}
/* Frase de abertura de secção, maior que o corpo. */
.af-lede {
font-size: clamp(1.125rem, 2.5vw, 1.5rem);
line-height: 1.5;
max-width: 38ch;
}
/* Placeholder explícito: bloco cor de areia com a especificação escrita. */
.af-placeholder {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background: var(--af-sand);
color: var(--af-graphite);
font-family: var(--af-sans);
font-size: 0.875rem;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 2rem;
min-height: 14rem;
}
.af-placeholder--wide { aspect-ratio: 16 / 9; min-height: 0; }
.af-placeholder--tall { aspect-ratio: 4 / 5; min-height: 0; }
/* Grelha que não parte com 3 items nem com 30. */
.af-grelha {
display: grid;
grid-template-columns: 1fr;
gap: var(--af-gap);
margin-top: var(--af-section-y);
}
@media (min-width: 700px) {
.af-grelha { grid-template-columns: repeat(2, 1fr); }
}
.af-trabalho img { width: 100%; height: auto; display: block; }
.af-trabalho h2 { font-size: 1.375rem; margin-top: 0.75rem; }
.af-trabalho a { text-decoration: none; color: inherit; }
.af-filtros { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2rem; }
.af-filtro {
background: none;
border: 1px solid var(--af-sand);
color: var(--af-graphite);
font: inherit;
font-size: 0.9375rem;
/* 0.6rem e não 0.4rem: com a borda dá 44px de alto a 375px (Tarefa 11,
alvos de toque). Com 0.4rem media 39,5px. */
padding: 0.6rem 1rem;
border-radius: 2rem;
cursor: pointer;
}
.af-filtro.is-active {
background: var(--af-terracotta);
border-color: var(--af-terracotta);
/* Branco e não --af-bone: osso sobre terracota dá 4,33:1 e falha o mínimo
de 4,5:1. Branco dá 4,87:1, e é o mesmo tratamento dos outros botões.
A regra do projeto proíbe branco puro como FUNDO de secção, não como
texto sobre um fundo escuro. */
color: #FFFFFF;
}
/*
* Contraste do texto de placeholder do Fluent Forms (Tarefa 8).
*
* O CSS do próprio plugin (`fluent-forms-public.css`) define
* `.fluentform .ff-el-form-control::placeholder { color: #868e96 }` —
* #868E96 sobre --af-bone (#F5F1EA) mede 2,95:1, bem abaixo do mínimo de
* 4,5:1 do projeto. Isto não é uma opção do Blocksy (o placeholder é do
* plugin de formulários, não do tema-pai), por isso não há filtro
* `theme_mod_*` para o corrigir; a correção é uma regra CSS normal, sem
* `!important`, com um seletor um pouco mais específico do que o do
* plugin (`body .fluentform ...` vs. `.fluentform ...`) para ganhar por
* especificidade em vez de por força bruta.
*
* #5C5850 sobre --af-bone mede 6,29:1.
*/
body .fluentform .ff-el-form-control::placeholder {
color: #5C5850;
opacity: 1;
}
/*
* Alvos de toque do cabeçalho a 375px (Tarefa 11).
*
* O botão "Menu" (.ct-header-trigger, design "simple") não recebe
* nenhum padding do Blocksy — a área clicável é só o ícone SVG, 18x18px.
* Os botões "Close drawer"/"Close search modal" (.ct-toggle-close) têm
* 10px de padding por omissão, dando 32x32px. Ambos ficam abaixo do
* mínimo de 44px recomendado para alvos de toque.
*
* Não é preciso !important: o Blocksy aplica
* `padding: var(--toggle-button-padding, 0px) !important` no seu CSS
* estático. Para `.ct-header-trigger` (design "simple") o Blocksy nunca
* define essa variável, por isso basta um seletor de classe simples.
* Mas para `.ct-toggle-close` o Blocksy JÁ define
* `--toggle-button-padding: 10px` na sua própria folha estática
* (main.min.css, que sai depois de `arantesfilms-css` no ), com o
* seletor `.ct-panel-actions .ct-toggle-close` (especificidade 0,2,0).
* `body .ct-toggle-close` tem a MESMA especificidade (0,2,0) — ganha
* quem sai depois, ou seja, o Blocksy. Por isso aqui o seletor precisa
* de um grau extra de especificidade
* (`body .ct-panel-actions .ct-toggle-close`, 0,3,0), sem `!important`.
*/
.ct-header-trigger {
--toggle-button-padding: 13px; /* ícone 18px + 13px*2 = 44px */
}
body .ct-panel-actions .ct-toggle-close {
--toggle-button-padding: 16px; /* ícone 12px + 16px*2 = 44px */
}
/*
* Botão "Enviar" do Fluent Forms mede 40px de alto por omissão — abaixo
* dos 44px mínimos (Tarefa 11). A causa não é o CSS do próprio plugin
* (`.ff_btn_style`, 8px de padding), mas uma regra do Blocksy
* (`main.min.css`) que intercepta especificamente botões de submit do
* Fluent Forms: `.fluentform .ff-el-group button.ff-btn { padding:
* var(--theme-button-padding) }`, especificidade (0,3,1). Por isso o
* seletor aqui repete essa estrutura (`.ff-el-group button`) trocando
* `.ff-btn` por `.ff-btn-submit`, ficando com especificidade (0,3,2),
* sem `!important`.
*/
body .fluentform .ff-el-group button.ff-btn-submit {
padding-top: 10px;
padding-bottom: 10px;
}
/*
* Ícones sociais do rodapé (WhatsApp, Instagram, YouTube): o Blocksy
* (`.ct-social-box a`) não define padding nenhum, por isso a área
* clicável é só o SVG, ~15x15px — abaixo dos 44px mínimos (Tarefa 11).
* Como `.ct-social-box a` não tem regra de padding a disputar, chega um
* seletor de classe simples. O ícone visual não muda de tamanho — só a
* zona à volta que passa a responder ao toque, e o tipo "simple" nunca
* pinta fundo (ver comentário em `af_blocksy_footer_placements`), por
* isso o padding extra fica invisível.
*/
.ct-social-box a {
padding: 15px;
margin: -15px;
}
/*
* Esconde o nome do site em texto quando existe logótipo.
*
* Com `custom_logo` definido, o Blocksy continua a imprimir o nome do site
* em texto POR BAIXO da imagem (opção `has_site_title` do item `logo`, que
* vem 'yes' por omissão) — a marca aparecia duas vezes, empilhada, e o
* cabeçalho ficava com 120px de altura em vez de 82px.
*
* Foi tentado primeiro o padrão habitual deste projeto, um filtro em
* `theme_mod_header_placements`. Não funciona aqui: ao contrário de
* `colorPalette` ou `linkColor`, o `header_placements` ainda não é um
* array no momento em que o filtro corre (`blocksy_get_theme_mod` devolve
* boolean) — o Blocksy só constrói a estrutura do cabeçalho dentro do
* render do builder, e o valor que o item lê nunca passa por aqui.
*
* `display: none` e não `visibility: hidden`: além de esconder, tira o
* elemento da árvore de acessibilidade, para um leitor de ecrã não
* anunciar a marca duas vezes. O nome continua no `alt` do logótipo.
*/
.site-branding .site-title-container {
display: none;
}
/*
* Bloco da avaliação do Google.
*
* Substitui a secção de testemunhos, que ficou por preencher: o cliente
* trabalha sobretudo como subcontratado de fotógrafos, portanto não tem
* relação directa com os casais e não tem de quem recolher testemunhos.
* Um número verificável vale mais do que três citações genéricas.
*/
.af-avaliacao {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 0.5rem 1rem;
padding-block: 0.5rem;
}
.af-avaliacao strong {
font-family: var(--af-serif);
font-weight: 400;
font-size: clamp(2.5rem, 7vw, 3.75rem);
line-height: 1;
letter-spacing: -0.02em;
}
.af-avaliacao span {
font-size: 1.0625rem;
opacity: 0.75;
}
/*
* Vídeo com carregamento diferido — ver inc/video-facade.php.
* A miniatura é local; o iframe do YouTube só existe depois do clique.
*/
.af-video { position: relative; margin-block: var(--af-gap); }
.af-video__botao {
display: block;
width: 100%;
padding: 0;
border: 0;
background: var(--af-sand);
cursor: pointer;
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
}
.af-video__botao img { width: 100%; height: 100%; object-fit: cover; display: block; }
.af-video__play {
position: absolute;
inset: 0;
margin: auto;
width: 4.5rem;
height: 4.5rem;
border-radius: 50%;
background: var(--af-terracotta);
transition: transform .18s ease;
}
/* triângulo de play, centrado com um pequeno desvio óptico à direita */
.af-video__play::after {
content: "";
position: absolute;
inset: 0;
margin: auto;
width: 0;
height: 0;
border-style: solid;
border-width: 0.85rem 0 0.85rem 1.4rem;
border-color: transparent transparent transparent #FFFFFF;
transform: translateX(0.18rem);
}
.af-video__botao:hover .af-video__play,
.af-video__botao:focus-visible .af-video__play { transform: scale(1.08); }
.af-video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }
.af-video__nota {
font-size: 0.8125rem;
opacity: 0.7;
margin-top: 0.6rem;
}