. Sem isto, a margem do
somava-se
a' da .ptLead e a seccao abria mais do que no desenho. */
.ptLead > p { margin: 0; }
.ptLead > p + p { margin-top: 12px; }
/* Cabecalho de seccao centrado. */
.ptCabecalho {
max-width: 820px;
margin: 0 auto 64px;
text-align: center;
}
/* ======================================================================
Botoes
====================================================================== */
.ptBotao {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 17px 30px;
border: 1px solid transparent;
border-radius: var(--pt-raio);
font-family: var(--pt-titulos);
font-size: 16px;
font-weight: 500;
text-decoration: none;
cursor: pointer;
transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.ptBotao--primario {
background: var(--pt-lima);
color: #FFFFFF;
}
.ptBotao--primario:hover,
.ptBotao--primario:focus-visible {
background: var(--pt-lima-hover);
color: #FFFFFF;
}
.ptBotao--contorno {
background: transparent;
color: #FFFFFF;
border-color: rgba(255, 255, 255, 0.45);
}
.ptBotao--contorno:hover,
.ptBotao--contorno:focus-visible {
border-color: var(--pt-lima);
color: var(--pt-lima);
}
.ptBotao--escuro {
background: var(--pt-texto);
color: #FFFFFF;
}
.ptBotao--escuro:hover { background: #000000; }
/* Seta desenhada em CSS — o design usa duas em vez de um icone. */
.ptSeta {
display: block;
position: relative;
width: 18px;
height: 1.5px;
background: currentColor;
flex-shrink: 0;
}
.ptSeta::after {
content: "";
position: absolute;
right: 0;
top: -3.5px;
width: 8px;
height: 8px;
border-top: 1.5px solid currentColor;
border-right: 1.5px solid currentColor;
transform: rotate(45deg);
}
/* ======================================================================
Icones — Material Symbols Outlined, como no design.
====================================================================== */
.ptIcone {
font-family: "Material Symbols Outlined";
font-weight: normal;
font-style: normal;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: "liga";
-webkit-font-smoothing: antialiased;
}
/* ======================================================================
Revelacao ao scroll — substitui o motion/react do design.
Accionada por media/js/politermica.js (IntersectionObserver).
Se o JS nao correr, .ptRevelar nunca ganha .is-visivel e o conteudo
ficaria invisivel para sempre. Por isso o estado escondido so e aplicado
quando o tem a classe .pt-js, que o proprio script poe logo no
inicio. Sem JS, tudo aparece normalmente.
====================================================================== */
.pt-js .ptRevelar {
opacity: 0;
transform: translateY(24px);
transition: opacity .6s ease, transform .6s ease;
will-change: opacity, transform;
}
.pt-js .ptRevelar.is-visivel {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.pt-js .ptRevelar {
opacity: 1;
transform: none;
transition: none;
}
}
/* ======================================================================
Responsivo — pontos de quebra alinhados com o CSS do site principal
(1100 / 992 / 680), mais um a 1280 para as grelhas largas do design.
====================================================================== */
@media (max-width: 1280px) {
:root { --pt-seccao-y: 90px; }
.ptTitulo { font-size: 44px; line-height: 52px; }
}
@media (max-width: 992px) {
:root { --pt-gutter: 28px; --pt-seccao-y: 72px; }
.ptTitulo { font-size: 36px; line-height: 44px; }
.ptCabecalho { margin-bottom: 44px; }
}
@media (max-width: 680px) {
:root { --pt-gutter: 20px; --pt-seccao-y: 56px; }
.ptTitulo { font-size: 30px; line-height: 38px; }
.ptEyebrow { font-size: 14px; }
.ptLead { font-size: 16px; line-height: 26px; }
.ptBotao { padding: 15px 24px; font-size: 15px; }
}
/* ==================================================================
Alinhar o header e o footer com o corpo da pagina
==================================================================
O header e o footer vieram de politermica.pt, onde o conteudo vive
dentro de `padding: 0 110px` e nao tem largura maxima. As seccoes
desta pagina seguem o design: `max-width: 1440px` centrado, com
`40px` de folga. Sao dois sistemas diferentes, por isso o logotipo e
o texto do hero nunca ficavam na mesma vertical:
ecra 1920 -> logotipo a 110px, texto do hero a 240px
ecra 1440 -> logotipo a 110px, texto do hero a 40px
O design (_design_reference/SiteHeader.dc.html) poe o header no MESMO
contentor do corpo — max-width 1440, folga de 40 — e e' por isso que
la' o logotipo assenta em cima do texto. E' esse o comportamento que
se repoe aqui.
PORQUE E' NESTE FICHEIRO E NAO NO politermica-header.css
Esses dois sao gerados por _main_assets/extract_css.py a partir do
site principal; qualquer alteracao la' desaparece na proxima vez que
o script correr. Este ficheiro carrega depois deles, por isso ganha
sem precisar de !important.
So' se mexe na folga LATERAL. O espacamento vertical, as cores e todo
o resto do header e do footer ficam exactamente como estao.
================================================================== */
.header-politermica {
padding-left: var(--pt-gutter);
padding-right: var(--pt-gutter);
}
.header-container {
max-width: var(--pt-max);
margin-left: auto;
margin-right: auto;
}
#footer.containerHomepage {
padding-left: var(--pt-gutter);
padding-right: var(--pt-gutter);
}
#footer > .footer-main,
#footer > .footer-contact,
#footer > .footer-bottom {
max-width: var(--pt-max);
margin-left: auto;
margin-right: auto;
}
/* Fica fora do #footer no markup, mas e' a mesma faixa visual. */
.footerLogos {
max-width: calc(var(--pt-max) + (var(--pt-gutter) * 2));
margin-left: auto;
margin-right: auto;
padding-left: var(--pt-gutter);
padding-right: var(--pt-gutter);
}
/* ==================================================================
Paginas sem hero: fundo escuro por baixo do header
==================================================================
O logotipo do site principal e' uma imagem de UMA SO' COR — branco puro,
266x60, sem versao escura disponivel. Funciona porque o header assenta
sempre por cima da fotografia escura do hero.
Nas paginas que nao tem hero — o agradecimento do formulario e as de erro
— o fundo e' branco e o logotipo desaparece. Parece que o header nao
carregou; foi assim que deu por isto.
A classe vem do views/politermica.tpl, que sabe quando esta' a mostrar
uma mensagem em vez de conteudo.
Nao se escureceu o logotipo com filter: brightness(0) porque isso da' um
logotipo PRETO, e a marca e' azul; e o ficheiro nao tem cor nenhuma para
recuperar, e' branco a 100%.
================================================================== */
body.politermica--semHero .header-politermica {
background: var(--pt-navy);
}
/* O header e' absolute e nao ocupa espaco: sem hero por baixo, o conteudo
passava-lhe por tras. */
body.politermica--semHero main {
padding-top: 140px;
}
body.politermica--semHero main .messages {
padding-top: 60px;
}
@media (max-width: 992px) {
body.politermica--semHero main { padding-top: 120px; }
}
/* ======================================================================
Pagina de erro 404
----------------------------------------------------------------------
O 500 nao usa nada disto: o views/error.tpl leva o seu proprio CSS
embutido, para nao depender de ficheiro nenhum. Ver o cabecalho de la'.
A .ptErro__caixa assenta no mesmo elemento que a .ptContentor: herda dela
as goteiras e o `margin: 0 auto`, e so' aperta a largura maxima.
====================================================================== */
.ptErro {
display: flex;
align-items: center;
min-height: 46vh;
/* O body.politermica--semHero ja' poe 140px de topo no