/* =====================================================================
Anthares 44 — PRODUCT HERO (componente compartilhado · fonte única)
---------------------------------------------------------------------
Hero minimalista usado na Home (index.html) e em Product (product.html):
apenas headline OVERSIZED (palavras pretas + cinza claro) com o logo lima
central entre as palavras da 2ª linha. Sem CTA, ícones ou decorações.
Para alterar o Hero de TODAS as páginas, edite APENAS este arquivo e
assets/js/product-hero.js. Escopado em .eco* → não afeta navbar, footer
nem demais seções.
Uso na página:
(no )
(onde o hero entra)
(no )
===================================================================== */
.eco {
position: relative;
width: 100%;
background: var(--page-background, #f8f8f8);
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
text-align: center;
padding: 245px 24px 24px; /* topo: respiro navbar ↔ título | base: 40→24 (parte do espaço até a seção Grok — reduzido p/ aproximar as seções) */
overflow: hidden;
}
/* ---------------- CONTEÚDO CENTRAL: título OVERSIZED ----------------- */
/* Hero minimalista: SEM elementos decorativos — apenas headline + logo central,
tudo centralizado (flex column + text-align center). */
.eco-main {
position: relative;
z-index: 2;
max-width: 1320px;
margin: 0 auto;
animation: ecoFade .8s ease both;
}
/* Título grande, Inter 800, duas linhas — palavras pretas + cinza claro, com o
logo lima da Anthares centralizado entre as palavras da 2ª linha. */
.eco-title {
margin: 0;
font-weight: 800;
font-size: clamp(2.2rem, 5.2vw, 4.6rem);
line-height: 1.05;
letter-spacing: -0.04em;
color: #111111;
}
.eco-line { display: block; white-space: nowrap; }
.eco-line--2 {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 0.04em 0.24em; /* respiro horizontal entre palavras e logo */
}
.eco-muted { color: #BDBDBD; } /* palavras em cinza claro (= referência) */
/* imagem central pequena (logo lima) entre as palavras da 2ª linha */
/* Recorte justo da marca (553×270): largura acompanha a proporção, então a
altura em em controla o peso óptico dentro do título. */
.eco-mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: auto;
height: 0.62em;
flex-shrink: 0;
transform: translateY(0.02em);
}
.eco-mark svg { width: 100%; height: 100%; display: block; }
/* nova logo como glifo no hero (mesmo espaço do antigo) */
.eco-mark img.brand-glyph { width: auto; height: 100%; object-fit: contain; display: block; }
@keyframes ecoFade {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* ----------------------- ACESSIBILIDADE --------------------------- */
@media (prefers-reduced-motion: reduce) {
.eco-main { animation: none; }
}
/* ----------------------- RESPONSIVO ------------------------------- */
/* Tablet: o título é um item flex que dimensiona pelo max-content (linha
inteira) e estouraria a tela — travamos a largura em 100vw − padding lateral
(independe do dimensionamento dos ancestrais) e liberamos a quebra. */
@media (max-width: 900px) {
.eco { padding: 140px 22px 24px; } /* base 40→24 (aproxima da seção Grok) */
.eco .eco-main { width: 100%; max-width: calc(100vw - 44px); }
.eco .eco-title { max-width: calc(100vw - 44px); }
.eco .eco-line { white-space: normal; }
.eco .eco-line--2 { flex-wrap: wrap; }
}
/* Mobile: título menor (ainda oversized para a tela). */
@media (max-width: 620px) {
.eco { padding: 104px 20px 16px; } /* base 28→16 (aproxima da seção Grok) */
.eco .eco-title { font-size: clamp(1.5rem, 6.4vw, 2.3rem); max-width: calc(100vw - 40px); }
.eco .eco-main { max-width: calc(100vw - 40px); }
}