/* ========================================================================== JSB Ativore — Padrão do HERO (fonte única / single source of truth) -------------------------------------------------------------------------- Este arquivo é carregado POR ÚLTIMO no de cada página de conteúdo, então ele PREVALECE sobre as regras .hero antigas que ficaram inline em cada página. Para ajustar a tipografia do hero, edite SÓ AQUI. Aplica-se às páginas: about-us, approach, news, portfolio, team. (A home é a referência e mantém o próprio CSS; contact e páginas legais usam hero de título único, fora deste padrão.) Padrão (desktop): Título (h1/.bold) ... 58px / 800 / -0.025em / max-width 1040px Subtítulo (.light) .. clamp(26–40px) / 300 / bloco Parágrafo .......... 22px (.subtitle / .subhead) Padding do hero .... 120 / 64 / 96 / 64 ========================================================================== */ .hero h1{ font-family:'Open Sans',sans-serif; font-size:58px; font-weight:800; line-height:1.05; letter-spacing:-0.025em; max-width:1040px; margin-bottom:32px; } .hero h1 .bold{ font-weight:800; display:block; } /* Títulos dois-pesos (bold + light): a parte bold ganha +1px, porque o peso 800 faz a fonte parecer menor que a light ao lado. calc(1em + 1px) = tamanho herdado do título + 1px, então funciona em qualquer escala (h1 do hero e h2 de seção) sem precisar de número fixo. Não afeta .bold de corpo de texto (ex.: .strip-emphasis .text .bold), que não é h1/h2. */ .hero h1 .bold, h2 .bold{ font-size: calc(1em + 1px); } .hero h1 .light{ font-weight:300; display:block; font-size:clamp(26px,3.1vw,40px); margin-top:8px; } /* O parágrafo do hero precisa de !important para vencer a regra global de normalização (.subtitle/.subhead { font-size:16px !important }). */ .hero .subtitle, .hero .subhead{ font-size:22px !important; } .hero{ padding:120px 100px 96px 100px; } /* ---- Responsivo (preservado) ---- */ @media (max-width: 900px){ .hero h1{ font-size:40px; max-width:100%; } .hero h1 .light{ font-size:clamp(22px,5vw,30px); } .hero .subtitle, .hero .subhead{ font-size:18px !important; line-height:1.65 !important; } .hero{ padding:96px 24px 72px 24px; } /* Mobile: troca o tint diagonal por um escurecimento vertical ancorado na base, para o texto branco (sobretudo o parágrafo) ler em qualquer foto. */ .hero::after{ background: linear-gradient(to top, rgba(20,43,55,.92) 0%, rgba(20,43,55,.72) 35%, rgba(20,43,55,.42) 65%, rgba(20,43,55,.20) 100%) !important; } } @media (max-width: 560px){ .hero h1{ font-size:32px; } }