.hero { padding-top: calc(var(--space-6) + 24px); } .hero__subhead { font-size: clamp(1.05rem, 1.5vw + 0.85rem, 1.2rem); margin-bottom: var(--space-4); max-width: 52ch; } .hero__cta-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; } .hero__rating { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-3); } .hero__rating .trustbar__text { margin: 0; } /* split: texto de um lado, imagem do outro */ .hero--split .hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: center; } @media (min-width: 900px) { .hero--split .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } .hero--split .hero__media { position: relative; } .hero--split .hero__media img { /* --radius-md (não --radius-lg): mesmo motivo do .testimonial-card e do .results-card (ver testimonials.css/components.css) — em shape.radius:'pill' (--radius-lg: 9999px), uma foto 4:3 sem altura casada com a largura vira um "blob" oval em vez de cantos arredondados. */ border-radius: var(--radius-md); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; box-shadow: var(--shadow-soft); } /* Opcional (theme.heroImageRadius:'arch') — forma assimétrica tipo "vão de arco", mais orgânica que o radius uniforme padrão. O navegador limita automaticamente o raio a no máximo metade do lado menor da imagem, então o valor alto em px continua seguro em qualquer largura de tela. Seletor combinado (.hero--split.hero--arch, não ".hero--split .hero--arch") de propósito: precisa de mais especificidade que ".hero--split .hero__media img" de shapes.css (mesma contagem de classes+elemento), que é carregado depois de hero.css no e senão sobrescreveria este raio de volta para var(--radius-md) uniforme. */ .hero--split.hero--arch .hero__media img { border-radius: 200px 200px 24px 24px; } /* Opcional (images.heroGallery) — trio de fotos "em leque": a principal por cima, 2 fotos menores rotacionadas atrás. Precisa de espaço extra nas bordas (as fotos de trás/frente ficam parcialmente fora da caixa da foto principal), por isso overflow: visible aqui — diferente de body[data-organic="true"] .hero { overflow: hidden }, que corta só o blob decorativo do próprio ::before do hero, não o conteúdo de .hero__media. */ .hero__media--trio { overflow: visible; padding: 8% 10% 12%; } /* Prefixado com .hero--split (3 classes) de propósito: precisa vencer em especificidade ".hero--split .hero__media img" (2 classes + elemento, ver acima), que senão sobrescreveria o width: 55%/50% das fotos de trás/frente de volta pra 100%. */ .hero--split .hero__media--trio .hero__photo { /* --radius-md (não --radius-lg): mesmo motivo do .hero--split .hero__media img acima — as fotos de trás/frente ficam bem menores que a principal, então um raio de 9999px (shape.radius:'pill') as transformaria em blobs ovais em vez de cantos arredondados. */ border-radius: var(--radius-md); box-shadow: var(--shadow-soft); object-fit: cover; aspect-ratio: 4 / 3; } .hero--split .hero__media--trio .hero__photo--main { position: relative; width: 100%; z-index: 3; } .hero--split .hero__media--trio .hero__photo--back { position: absolute; top: 0; right: 0; width: 55%; z-index: 1; transform: rotate(7deg); } .hero--split .hero__media--trio .hero__photo--front { position: absolute; bottom: 0; left: 0; width: 50%; z-index: 2; transform: rotate(-6deg); } .hero__badge { position: absolute; left: var(--space-3); bottom: var(--space-3); max-width: 220px; padding: var(--space-2) var(--space-3); background: var(--color-secondary); color: #FFFFFF; border-radius: var(--radius-md); box-shadow: var(--shadow-soft); } .hero__badge strong { display: block; font-family: var(--font-heading); font-size: 1.5rem; line-height: 1.1; color: var(--color-accent); } .hero__badge span { display: block; margin-top: 2px; font-size: 0.85rem; opacity: 0.85; } /* fullBg: imagem de fundo com overlay escuro para legibilidade */ .hero--fullbg { position: relative; min-height: 90svh; display: flex; align-items: center; background-image: linear-gradient(180deg, rgba(15,23,42,0.55), rgba(15,23,42,0.7)), var(--hero-bg-image); background-size: cover; background-position: center; } .hero--fullbg .hero__content--overlay { max-width: 640px; } .hero--fullbg h1, .hero--fullbg .hero__subhead { color: #FFFFFF; } .hero--fullbg .eyebrow { color: var(--color-accent); } /* cardOverlay: imagem de fundo com um cartão claro contendo o texto */ .hero--cardoverlay { position: relative; min-height: 90svh; display: flex; align-items: center; background-image: var(--hero-bg-image); background-size: cover; background-position: center; } .hero__card { background: var(--surface); border-radius: var(--radius-lg); padding: var(--space-4); max-width: 560px; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.24); } /* typographic: sem imagem, tipografia grande centralizada */ .hero--typographic { text-align: center; padding-block: var(--space-7); } .hero--typographic .hero__content { max-width: 720px; margin-inline: auto; } .hero--typographic .hero__cta-row { justify-content: center; }