/* CH Builder — Base + Componentes (leve, mobile-first) */ /* ── Reset mínimo ── */ *, *::before, *::after { box-sizing: border-box; } body.chb-site { margin: 0; font-family: var(--chb-font); font-size: var(--chb-text-base); line-height: 1.65; color: var(--chb-ink); background: var(--chb-paper); -webkit-font-smoothing: antialiased; } .chb-site img { max-width: 100%; height: auto; display: block; } /* Seletor de elemento puro (baixa especificidade) de propósito: uma única classe como .chb-btn--primary precisa vencer este default sem depender da ordem no arquivo. Com ".chb-site a" (classe+elemento) isso não valia. */ a { color: var(--chb-primary-text, var(--chb-primary)); text-decoration: none; } .chb-site h1, .chb-site h2, .chb-site h3 { line-height: 1.2; margin: 0 0 var(--chb-space-2); } /* ── Layout ── */ .chb-shell { max-width: var(--chb-shell); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); } .chb-shell--narrow { max-width: var(--chb-shell-narrow); } .chb-shell--narrow-lg { max-width: 1100px; } .chb-section { padding-block: var(--chb-section-y); } .chb-embed__content { max-width: 100%; overflow-x: auto; } .chb-embed__content > * { max-width: 100%; } .chb-section--alt { background: var(--chb-paper-alt); border-top: 1px solid var(--chb-line); border-bottom: 1px solid var(--chb-line); } .chb-section--tight-bottom { padding-bottom: calc(var(--chb-section-y) / 2); } /* Inversão de cores — fundo na cor secundária da marca, texto claro. Mais forte que o alt_bg, para destacar uma seção específica (ex.: teaser institucional em fundo escuro). Cobre os elementos internos mais comuns; tipos de seção mais específicos herdam o texto claro por padrão. */ .chb-section--invert { background: var(--chb-secondary); color: rgba(255, 255, 255, .85); border-color: rgba(255, 255, 255, .12); } .chb-section--invert .chb-section__title { color: #fff; } .chb-section--invert .chb-section__lead { color: rgba(255, 255, 255, .75); } .chb-section--invert .chb-prose p, .chb-section--invert .chb-prose li { color: rgba(255, 255, 255, .82); } .chb-section--invert .chb-prose h2, .chb-section--invert .chb-prose h3 { color: #fff; } .chb-section--invert .chb-card, .chb-section--invert .chb-testi, .chb-section--invert .chb-faq__item { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); } .chb-section--invert .chb-card__title, .chb-section--invert .chb-testi__author strong { color: #fff; } .chb-section--invert .chb-card__text, .chb-section--invert .chb-testi__quote { color: rgba(255, 255, 255, .75); } .chb-section--invert .chb-btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .5); } .chb-section--invert .chb-btn--ghost:hover { background: rgba(255, 255, 255, .12); } /* Seção "só pop-up": some da rolagem normal, mas continua no HTML pra o fetch() do modal encontrar — e volta a aparecer quando clonada pra dentro do próprio modal. */ .chb-embed-only { display: none; } .chb-modal__body .chb-embed-only { display: block; } .chb-section__eyebrow { font-family: var(--chb-font-condensed); font-weight: 600; letter-spacing: 2.5px; font-size: 12px; text-transform: uppercase; color: var(--chb-accent-text, var(--chb-accent)); margin-bottom: 10px; } .chb-section__title { font-family: var(--chb-font-display); font-size: var(--chb-text-3xl); font-weight: var(--chb-title-weight); letter-spacing: var(--chb-title-tracking); } .chb-section__lead { font-size: var(--chb-text-lg); color: var(--chb-ink-soft); max-width: 60ch; } .chb-section-header { margin-bottom: var(--chb-space-4); text-align: center; } .chb-section-header .chb-section__lead { margin-inline: auto; } /* Layouts com conteúdo ao lado de mídia (imagem) leem melhor com o cabeçalho alinhado à esquerda, acompanhando o texto abaixo dele. */ .chb-stats--split .chb-stats__content .chb-section-header, .chb-text-image__content .chb-section-header, .chb-text-cards__content .chb-section-header { text-align: left; } .chb-stats--split .chb-stats__content .chb-section-header .chb-section__lead, .chb-text-image__content .chb-section-header .chb-section__lead, .chb-text-cards__content .chb-section-header .chb-section__lead { margin-inline: 0; } .chb-section__cta { text-align: center; margin-top: var(--chb-space-4); } .chb-page-title { font-family: var(--chb-font-display); font-size: var(--chb-text-3xl); font-weight: var(--chb-title-weight); letter-spacing: var(--chb-title-tracking); } /* ── Prose ── */ .chb-prose p { margin: 0 0 1em; color: var(--chb-ink-soft); } .chb-prose h2, .chb-prose h3 { color: var(--chb-ink); margin-top: 1.5em; } .chb-prose ul, .chb-prose ol { color: var(--chb-ink-soft); padding-left: 1.4em; } .chb-prose img { border-radius: var(--chb-radius); } .chb-prose blockquote { margin: 1.4em 0; padding-left: 1.1em; border-left: 4px solid var(--chb-accent); font-family: var(--chb-font-display); font-weight: 600; font-size: var(--chb-text-lg); line-height: 1.35; color: var(--chb-ink); font-style: normal; } .chb-prose blockquote p { color: inherit; margin: 0; } .chb-section--invert .chb-prose blockquote { color: #fff; } /* ── Botões ── */ .chb-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: .7em 1.4em; border-radius: var(--chb-radius); border: 2px solid transparent; font-weight: 600; font-size: var(--chb-text-base); text-decoration: none; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; } .chb-btn--primary { background: var(--chb-primary); color: var(--chb-primary-ink, #fff); } .chb-btn--primary:hover { background: var(--chb-primary-dark); color: var(--chb-primary-ink, #fff); } .chb-btn--ghost { background: transparent; color: var(--chb-primary-text, var(--chb-primary)); border-color: currentColor; } .chb-btn--ghost:hover { background: rgba(var(--chb-primary-rgb), .08); } .chb-btn--lg { padding: .85em 1.8em; font-size: var(--chb-text-lg); } .chb-btn--sm { padding: .5em 1.1em; font-size: var(--chb-text-sm); } .chb-btn--full { width: 100%; } .chb-link-arrow { font-weight: 600; text-decoration: none; } .chb-link-arrow:hover { text-decoration: underline; } /* ── Header ── */ .chb-header { position: sticky; top: 0; z-index: 100; background: var(--chb-header-bg, rgba(255, 255, 255, .92)); backdrop-filter: blur(8px); border-bottom: 1px solid var(--chb-line); } .chb-header__inner { display: flex; align-items: center; gap: var(--chb-space-3); min-height: 68px; } .chb-header__logo { display: flex; align-items: center; text-decoration: none; font-family: var(--chb-font-display); font-weight: var(--chb-title-weight); letter-spacing: var(--chb-title-tracking); font-size: var(--chb-text-lg); color: var(--chb-header-text, var(--chb-ink)); } .chb-header__logo img { max-height: 44px; width: auto; } .chb-nav { margin-left: auto; } .chb-nav__list { display: flex; gap: var(--chb-space-2); list-style: none; margin: 0; padding: 0; } .chb-nav__list a { display: block; padding: .4em .6em; border-radius: 6px; color: var(--chb-header-text, var(--chb-ink-soft)); text-decoration: none; font-weight: 500; } .chb-nav__list a:hover, .chb-nav__list a[aria-current] { color: var(--chb-accent-text, var(--chb-accent)); } .chb-nav__list .chb-nav-cta a { background: var(--chb-primary); color: var(--chb-primary-ink, #fff); font-weight: 800; padding: 11px 22px; border-radius: 2px; font-size: 13px; } .chb-nav__list .chb-nav-cta a:hover { background: var(--chb-primary-dark); color: var(--chb-primary-ink, #fff); } /* Megamenu do item "Produtos" — categorias escolhidas pelo cliente no /painel (ver CHB_Panel_Menu), injetadas via filtro no item do menu. Portado do fork bluideias2026 (ver README, Fase 12). */ .chb-nav__item--megamenu { position: relative; } .chb-megamenu { /* position:fixed (não absolute) porque o item "Produtos" que seria o ancestral posicionado é estreito (largura da própria palavra) — um painel absolute ancorado nele fica espremido nessa largura. Fixo + centralizado no viewport dá o retângulo largo pedido, independente da largura do item de menu que o abre. */ display: none; position: fixed; top: 69px; left: 50%; transform: translateX(-50%); width: min(80vw, 1100px); max-height: calc(100vh - 90px); overflow-y: auto; background: var(--chb-paper); border-top: 2px solid var(--chb-primary); border-radius: 0 0 var(--chb-radius) var(--chb-radius); box-shadow: var(--chb-shadow); z-index: 60; } @media (min-width: 769px) { /* is-open (não :hover puro): o painel agora é fixed e centralizado na tela, não mais colado embaixo do item "Produtos" — há um vão entre os dois, e :hover sozinho fecha o menu assim que o mouse cruza esse vão. JS (chb-frontend.js) controla is-open com um pequeno atraso pra fechar, dando tempo do mouse atravessar até o painel. */ .chb-nav__item--megamenu.is-open .chb-megamenu, .chb-nav__item--megamenu:focus-within .chb-megamenu { display: block; } } .chb-megamenu__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--chb-space-3); padding: var(--chb-space-4) var(--chb-space-4); } /* .chb-megamenu__grid > (em vez de só .chb-megamenu__cat): a regra geral ".chb-nav__list a { display:block }" tem mais especificidade (classe + tag) que ".chb-megamenu__cat" sozinha (só classe) e vencia, quebrando o flex — imagem ficava colada à esquerda em vez de centralizada. */ .chb-megamenu__grid > .chb-megamenu__cat { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; color: var(--chb-ink); text-align: center; font-size: var(--chb-text-sm); font-weight: 600; } .chb-megamenu__cat img, .chb-megamenu__cat-noimg { width: 64px; height: 64px; object-fit: cover; border-radius: 50%; background: var(--chb-paper-alt); border: 1px solid var(--chb-line); } .chb-megamenu__cat:hover { color: var(--chb-accent-text, var(--chb-accent)); } .chb-header__right { display: flex; align-items: center; gap: var(--chb-space-2); } .chb-header__search { display: flex; align-items: center; gap: 8px; flex: 1; max-width: 380px; background: var(--chb-paper-alt); border: 1px solid var(--chb-line); border-radius: 10px; padding: 0 12px; height: 40px; color: var(--chb-ink-mute); } .chb-header__search:focus-within { border-color: var(--chb-primary); background: var(--chb-paper); } .chb-header__search input[type="search"] { border: 0; background: transparent; flex: 1; font: inherit; font-size: var(--chb-text-sm); color: var(--chb-ink); outline: none; height: 100%; } .chb-header__search-toggle { display: none; } /* só aparece <=768px, ver media query abaixo */ .chb-header__wa { display: inline-flex; align-items: center; gap: .4em; padding: .45em .9em; border-radius: 999px; background: #25D366; color: #17130a; font-weight: 600; font-size: var(--chb-text-sm); text-decoration: none; } .chb-header__wa:hover { background: #1EBE5B; color: #17130a; } /* ── Seletor de idioma ── */ .chb-lang-switcher { display: flex; align-items: center; gap: 2px; font-size: var(--chb-text-sm); font-weight: 700; } .chb-lang-switcher a { padding: .3em .5em; border-radius: 4px; text-decoration: none; color: var(--chb-header-text, var(--chb-ink-soft)); opacity: .6; } .chb-lang-switcher a:hover { opacity: 1; } .chb-lang-switcher a.is-current { opacity: 1; color: var(--chb-accent-text, var(--chb-accent)); } /* Hamburger */ .chb-hamburger { display: none; flex-direction: column; gap: 5px; padding: 10px; background: none; border: 0; cursor: pointer; } .chb-hamburger span { width: 22px; height: 2px; background: var(--chb-header-text, var(--chb-ink)); transition: transform .2s ease, opacity .2s ease; } .chb-hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .chb-hamburger.is-open span:nth-child(2) { opacity: 0; } .chb-hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 768px) { .chb-hamburger { display: flex; } /* Busca vira ícone (no lugar do campo inline, que não cabe) — toca, abre esse mesmo form como dropdown embaixo do cabeçalho. */ .chb-header__search { display: none; } .chb-header__search.is-open { display: flex; position: absolute; left: 0; right: 0; top: 100%; max-width: none; height: auto; margin: 0; padding: 12px var(--chb-space-3); border-radius: 0; border: 0; border-top: 1px solid var(--chb-line); background: var(--chb-paper); box-shadow: var(--chb-shadow); } .chb-header__search-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--chb-header-text, var(--chb-ink)); cursor: pointer; } /* No mobile o menu vira posição fixa (some do fluxo do flex) — sem isso o grupo à direita (WhatsApp + hambúrguer) gruda na logo. */ .chb-header__right { margin-left: auto; } .chb-nav { position: fixed; inset: 68px 0 auto 0; margin: 0; background: var(--chb-paper); border-bottom: 1px solid var(--chb-line); padding: var(--chb-space-2); display: none; /* O menu aberto vira um painel com o fundo normal da página, não a cor do cabeçalho — reseta o texto pro tom padrão do corpo. */ --chb-header-text: var(--chb-ink-soft); } .chb-nav.is-open { display: block; } /* .chb-header tem backdrop-filter (blur), o que cria um contexto de empilhamento próprio pro z-index:100 dele — .chb-nav (fixed) é filho e fica preso nesse nível, não no z-index global da página. A barra fixa do rodapé (.chb-mobile-bar, z-index 950, fora do header) e o botão flutuante do WhatsApp (.chb-wa-float, 999) ficam acima disso e cobrem o final do menu aberto por cima — "cortando" visualmente os últimos itens de um menu longo, mesmo ele calculando a própria altura direito (é problema de camada, não de tamanho). Enquanto o menu está aberto, sobe o header acima dessas duas camadas fixas. Achado/corrigido no projeto bluideias2026, 2026-09-16. */ .chb-header:has(#chb-nav.is-open) { z-index: 1000; } .chb-nav__list { flex-direction: column; gap: 0; } .chb-nav__list a { padding: .8em .6em; } .chb-header__wa span { display: none; } .chb-header__wa { padding: .55em; } /* No mobile o megamenu não é hover — é clique, com is-open ligado via JS (chb-frontend.js), e vira uma lista inline dentro do próprio item, não um dropdown flutuante (não cabe/não funciona bem sobre o menu já empilhado). Também não é o grid de 2 colunas com ícone centralizado do desktop — é uma listinha simples, ícone pequeno + nome numa linha só, alinhada à esquerda como o resto do menu (mesmo padrão do .chb-nav__list). Bem mais compacta na tela (cada categoria ocupa uma linha, não um bloco de ~90px). position:fixed vira static aqui, mas isso sozinho não desliga o left/transform/width do desktop (pensados pro painel centralizado flutuante) — "transform" funciona independente do "position" (diferente de left/top, que position:static já ignora sozinho), então sem resetar os três juntos o painel fica com metade da própria largura (min(80vw,1100px)) empurrada pra fora da tela à esquerda por causa do translateX(-50%) herdado. Achado/corrigido no fork bluideias2026, 2026-09-16 (ver README, Fase 12). */ .chb-megamenu { position: static; left: auto; transform: none; width: auto; box-shadow: none; border-top: none; border-left: 3px solid var(--chb-primary); margin: 4px 0 4px .6em; } .chb-nav__item--megamenu.is-open > .chb-megamenu { display: block; } /* .chb-megamenu__inner usa a classe .chb-shell (container central do site, com padding-inline e max-width próprios) — no desktop isso centra o painel flutuante largo, mas aqui dentro do menu já recolhido/indentado é padding em dobro (nav + margin do .chb-megamenu + o do shell). Zera pra a lista ficar alinhada com o resto do menu. */ .chb-megamenu__inner { padding-inline: 0; max-width: none; } .chb-megamenu__grid { display: flex; flex-direction: column; padding: var(--chb-space-1) 0 var(--chb-space-1) var(--chb-space-2); gap: 0; } .chb-megamenu__grid > .chb-megamenu__cat { flex-direction: row; align-items: center; justify-content: flex-start; text-align: left; gap: 10px; padding: .6em .4em; font-weight: 500; } .chb-megamenu__cat img, .chb-megamenu__cat-noimg { width: 28px; height: 28px; flex-shrink: 0; } /* Botões menores — tamanho "lg" vira o tamanho normal no celular. */ .chb-btn--lg { padding: .65em 1.3em; font-size: var(--chb-text-base); } } /* ── Hero ── */ .chb-hero { position: relative; display: flex; align-items: center; overflow: hidden; min-height: min(78vh, 640px); padding-block: var(--chb-section-y); background: var(--chb-hero-bg, none) center/cover no-repeat, var(--chb-secondary); color: #fff; } .chb-hero--plain { background: linear-gradient(135deg, var(--chb-secondary), var(--chb-primary-dark)); } .chb-hero--accent-border { border-top: 3px solid var(--chb-accent); border-bottom: 6px solid var(--chb-accent); } /* Hero mais baixo — páginas internas não precisam da altura de destaque da home. */ .chb-hero--compact { min-height: 0; padding-block: calc(var(--chb-section-y) * .56); } .chb-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .chb-hero__video--yt { border: 0; pointer-events: none; top: 50%; left: 50%; right: auto; bottom: auto; width: 177.78vh; height: 56.25vw; /* mantém proporção 16:9 preenchendo a seção */ min-width: 100%; min-height: 100%; transform: translate(-50%, -50%); } .chb-hero__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); } .chb-hero__inner { position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; } .chb-hero__title { font-family: var(--chb-font-display); font-size: var(--chb-text-hero); font-weight: var(--chb-title-weight); letter-spacing: var(--chb-title-tracking); max-width: 18ch; } .chb-hero__title-accent { color: var(--chb-accent); } .chb-hero__eyebrow { display: inline-block; font-family: var(--chb-font-condensed); font-weight: 700; letter-spacing: 2px; font-size: 13px; color: #fff; margin-bottom: 18px; text-align: center; background: rgba(var(--chb-primary-rgb), .28); padding: 8px 16px; border-radius: 100px; } .chb-hero__logo { width: min(63vw, 532px); height: auto; filter: drop-shadow(0 4px 30px rgba(0, 0, 0, .6)); } .chb-hero__sub { font-size: var(--chb-text-xl); opacity: .9; max-width: 50ch; margin: 0 0 var(--chb-space-3); } .chb-hero__text { font-size: var(--chb-text-lg); opacity: .85; max-width: 50ch; margin: 0 0 var(--chb-space-3); line-height: 1.7; } .chb-hero__actions { display: flex; flex-wrap: wrap; gap: var(--chb-space-2); justify-content: center; } .chb-countdown { display: flex; gap: var(--chb-space-2); flex-wrap: wrap; justify-content: center; margin: var(--chb-space-3) 0; } .chb-countdown__unit { display: flex; flex-direction: column; align-items: center; background: rgba(var(--chb-primary-rgb), .12); border: 1px solid rgba(var(--chb-accent-rgb), .4); border-radius: 4px; padding: 14px 20px; min-width: 82px; } .chb-countdown__value { font-family: var(--chb-font-display); font-size: 38px; line-height: 1; color: inherit; } .chb-countdown__label { font-family: var(--chb-font-condensed); font-size: 11px; font-weight: 700; letter-spacing: 1.5px; color: var(--chb-accent-text, var(--chb-accent)); margin-top: 4px; } .chb-hero .chb-btn--ghost { color: #fff; } .chb-hero .chb-btn--ghost:hover { background: rgba(255, 255, 255, .12); } /* ── Hero — layout "dividido" (texto de um lado, foto do outro) ── Opcional (campo "layout" + "Imagem lateral"); sem eles, o hero continua centralizado como sempre. No mobile sempre empilha, mesmo no modo dividido. */ .chb-hero__grid { width: 100%; } .chb-hero--split .chb-hero__grid { display: grid; gap: var(--chb-space-4); align-items: center; } .chb-hero--split .chb-hero__media { order: 2; position: relative; } .chb-hero__media img, .chb-hero__media .chb-media-placeholder { width: 100%; border-radius: var(--chb-radius-lg); display: block; } .chb-hero__badge { position: absolute; left: -16px; bottom: 20px; max-width: 80%; background: var(--chb-paper); color: var(--chb-ink); border-radius: var(--chb-radius); box-shadow: var(--chb-shadow); padding: 14px 18px; display: flex; flex-direction: column; gap: 2px; } .chb-hero__badge-title { font-family: var(--chb-font-display); font-weight: 600; font-size: var(--chb-text-sm); } .chb-hero__badge-text { font-size: 13px; color: var(--chb-ink-soft); } @media (min-width: 820px) { .chb-hero--split .chb-hero__grid { grid-template-columns: 1.05fr 0.95fr; } .chb-hero--split .chb-hero__inner { align-items: flex-start; } .chb-hero--split .chb-hero__content { text-align: left; width: 100%; } .chb-hero--split .chb-hero__eyebrow { text-align: left; } .chb-hero--split .chb-hero__title { margin-inline: 0; } .chb-hero--split .chb-hero__sub { margin-inline: 0; } .chb-hero--split .chb-hero__actions { justify-content: flex-start; } } /* ── Texto ── */ .chb-text--center .chb-shell--narrow { text-align: center; } /* ── Texto + Imagem ── */ .chb-text-image__grid { display: grid; gap: var(--chb-space-4); align-items: center; } @media (min-width: 820px) { .chb-text-image__grid { grid-template-columns: 1fr 1fr; } .chb-text-image--flip .chb-text-image__content { order: 2; } .chb-text-image--flip .chb-text-image__media { order: 1; } } .chb-text-image__media img, .chb-text-image__media .chb-media-placeholder { border-radius: var(--chb-radius-lg); box-shadow: var(--chb-shadow); min-height: 280px; } /* ── Cards ── */ .chb-cards__grid { display: grid; align-items: stretch; gap: var(--chb-space-3); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .chb-cards__grid--cols-2, .chb-cards__grid--cols-3, .chb-cards__grid--cols-4 { grid-template-columns: 1fr; } @media (min-width: 640px) { .chb-cards__grid--cols-2 { grid-template-columns: repeat(2, 1fr); } .chb-cards__grid--cols-3 { grid-template-columns: repeat(3, 1fr); } .chb-cards__grid--cols-4 { grid-template-columns: repeat(4, 1fr); } } .chb-card { height: 100%; box-sizing: border-box; padding: var(--chb-space-3); border: 1px solid var(--chb-line); min-width: 0; border-radius: var(--chb-radius-lg); background: var(--chb-paper); transition: box-shadow .15s ease, transform .15s ease; } .chb-card:hover { box-shadow: var(--chb-shadow); transform: translateY(-2px); } .chb-card__icon { font-size: 1.8rem; margin-bottom: var(--chb-space-1); } .chb-card__icon--image img { width: 48px; height: 48px; object-fit: contain; } .chb-card__eyebrow { font-family: var(--chb-font-condensed); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--chb-primary-text, var(--chb-primary)); margin-bottom: .5em; } .chb-card__title { font-family: var(--chb-font-display); font-size: var(--chb-text-xl); font-weight: var(--chb-title-weight); margin-bottom: .4em; letter-spacing: var(--chb-title-tracking); } .chb-card__text { margin: 0; color: var(--chb-ink-soft); font-size: var(--chb-text-sm); } .chb-card__link { display: inline-block; margin-top: var(--chb-space-2); font-family: var(--chb-font-display); font-weight: 600; font-size: var(--chb-text-sm); color: var(--chb-primary-text, var(--chb-primary)); } .chb-card__link:hover { color: var(--chb-primary-dark); } .chb-card--row { display: flex; gap: var(--chb-space-2); align-items: flex-start; } .chb-card--row .chb-card__icon { margin: 0; } .chb-card__btn { display: inline-flex; margin-top: var(--chb-space-1); } /* ── Texto + Cards ── */ .chb-text-cards__grid { display: grid; gap: var(--chb-space-4); align-items: start; } @media (min-width: 820px) { .chb-text-cards__grid { grid-template-columns: 1fr 1fr; } .chb-text-cards--flip .chb-text-cards__content { order: 2; } .chb-text-cards--flip .chb-text-cards__stack { order: 1; } } .chb-text-cards__stack { display: grid; gap: var(--chb-space-2); } /* ── CTA ── */ .chb-cta { position: relative; text-align: center; padding-block: var(--chb-section-y); background: var(--chb-cta-bg, none) center/cover no-repeat, var(--chb-primary); color: var(--chb-primary-ink, #fff); } /* Sobre uma imagem, o overlay é sempre escuro — texto claro, independente de a cor primária ser clara (ink) ou escura. */ .chb-cta--has-bg { color: #fff; } .chb-cta--radial { background: radial-gradient(circle at 50% 100%, rgba(var(--chb-secondary-rgb), .9), var(--chb-paper) 70%); color: var(--chb-ink); } .chb-cta__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); } .chb-cta__inner { position: relative; z-index: 1; } .chb-cta__title { font-family: var(--chb-font-display); font-size: var(--chb-text-3xl); font-weight: var(--chb-title-weight); letter-spacing: var(--chb-title-tracking); } .chb-cta__text { font-size: var(--chb-text-lg); opacity: .9; max-width: 55ch; margin: 0 auto var(--chb-space-3); } .chb-cta__actions { display: flex; gap: var(--chb-space-2); flex-wrap: wrap; justify-content: center; margin-bottom: var(--chb-space-3); } .chb-cta--radial .chb-btn--ghost { color: var(--chb-ink); border-color: rgba(var(--chb-primary-rgb), .5); } .chb-cta__footnote { margin: var(--chb-space-3) 0 0; font-family: var(--chb-font-condensed); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; opacity: .7; } .chb-cta__contact { display: flex; gap: var(--chb-space-4); flex-wrap: wrap; justify-content: center; margin-top: var(--chb-space-3); } .chb-cta__contact-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; color: var(--chb-accent); margin-bottom: 6px; } .chb-cta__contact a, .chb-cta__contact strong { font-size: 18px; font-weight: 600; color: inherit; text-decoration: none; } .chb-cta__contact a:hover { color: var(--chb-primary); text-decoration: none; } .chb-cta .chb-btn--primary { background: #fff; color: var(--chb-primary-ink, var(--chb-primary)); } .chb-cta--radial .chb-btn--primary { background: var(--chb-primary); color: var(--chb-primary-ink, #fff); } .chb-cta--radial .chb-btn--primary:hover { background: var(--chb-primary-dark); } .chb-cta .chb-btn--primary:hover { background: var(--chb-paper-alt); } /* Cor personalizada do botão (campo "Botão — Cor") — variável CSS em vez de background inline direto: como a regra ":hover" acima também define "background", um style inline só resolveria o estado normal e o hover voltaria pra --chb-paper-alt. Com a variável, base E hover leem do mesmo lugar, então repetir aqui (com mais especificidade que as duas regras acima) cobre os dois estados de uma vez. */ .chb-cta .chb-btn--primary.chb-cta__btn--custom-color, .chb-cta .chb-btn--primary.chb-cta__btn--custom-color:hover { background: var(--chb-cta-btn-color); border-color: var(--chb-cta-btn-color); color: var(--chb-cta-btn-ink); } .chb-cta .chb-btn--primary.chb-cta__btn--custom-color:hover { filter: brightness(.92); } /* ── FAQ (details/summary — zero JS) ── */ .chb-faq__list { display: grid; gap: var(--chb-space-1); } .chb-faq__item { border: 1px solid var(--chb-line); border-radius: var(--chb-radius); background: var(--chb-paper); } .chb-faq__item[open] { border-color: var(--chb-primary); } .chb-faq__q { padding: var(--chb-space-2) var(--chb-space-3); cursor: pointer; font-weight: 600; list-style: none; position: relative; } .chb-faq__q::-webkit-details-marker { display: none; } .chb-faq__q::after { content: '+'; position: absolute; right: var(--chb-space-3); top: 50%; transform: translateY(-50%); font-size: 1.3em; color: var(--chb-primary-text, var(--chb-primary)); } .chb-faq__item[open] .chb-faq__q::after { content: '–'; } .chb-faq__a { padding: 0 var(--chb-space-3) var(--chb-space-2); color: var(--chb-ink-soft); } /* ── Galeria ── */ .chb-gallery__grid { display: grid; gap: var(--chb-space-2); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } .chb-gallery__item { margin: 0; overflow: hidden; border-radius: var(--chb-radius); border: 2px solid var(--chb-accent); box-shadow: 0 8px 20px rgba(0, 0, 0, .3); } .chb-gallery__item img, .chb-gallery__item .chb-media-placeholder { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .35s ease; } .chb-gallery__item:hover img { transform: scale(1.08); } /* ── Grade de Fotos ── */ .chb-media-grid__grid { display: grid; gap: var(--chb-space-3); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .chb-media-grid__grid--cols-2, .chb-media-grid__grid--cols-3, .chb-media-grid__grid--cols-4 { grid-template-columns: 1fr; } @media (min-width: 640px) { .chb-media-grid__grid--cols-2 { grid-template-columns: repeat(2, 1fr); } .chb-media-grid__grid--cols-3 { grid-template-columns: repeat(3, 1fr); } .chb-media-grid__grid--cols-4 { grid-template-columns: repeat(4, 1fr); } } .chb-media-grid__item { margin: 0; min-width: 0; } .chb-media-grid__item img, .chb-media-grid__item .chb-media-placeholder { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--chb-radius-lg); } .chb-media-grid__item figcaption { margin-top: .6em; font-weight: 600; font-size: var(--chb-text-sm); } /* Legenda sobreposta, com degradê escuro — estilo "categoria em destaque". */ .chb-media-grid--overlay .chb-media-grid__item { position: relative; overflow: hidden; border-radius: var(--chb-radius-lg); } .chb-media-grid--overlay .chb-media-grid__item img, .chb-media-grid--overlay .chb-media-grid__item .chb-media-placeholder { border-radius: 0; } .chb-media-grid--overlay .chb-media-grid__item::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, 0) 55%); } .chb-media-grid--overlay .chb-media-grid__item figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; margin: 0; padding: var(--chb-space-2) var(--chb-space-3); color: var(--chb-accent); font-family: var(--chb-font-display); font-weight: var(--chb-title-weight); text-transform: uppercase; letter-spacing: var(--chb-title-tracking); font-size: var(--chb-text-lg); } /* ── Cards com foto e link (link-cards) ── */ .chb-link-cards__filter { display: flex; flex-wrap: wrap; gap: .5em; margin-bottom: var(--chb-space-3); } .chb-link-cards__chip { min-height: 40px; padding: 0 1.1em; cursor: pointer; font-family: var(--chb-font-display); font-weight: 600; font-size: var(--chb-text-sm); background: var(--chb-paper); color: var(--chb-ink); border: 1px solid var(--chb-line); border-radius: var(--chb-radius); } .chb-link-cards__chip:hover { border-color: var(--chb-primary); } .chb-link-cards__chip.is-active { background: var(--chb-ink); color: var(--chb-paper); border-color: var(--chb-ink); } .chb-link-cards__grid { display: grid; align-items: stretch; gap: var(--chb-space-3); grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); } .chb-link-cards__grid--cols-2, .chb-link-cards__grid--cols-3, .chb-link-cards__grid--cols-4 { grid-template-columns: 1fr; } @media (min-width: 640px) { .chb-link-cards__grid--cols-2 { grid-template-columns: repeat(2, 1fr); } .chb-link-cards__grid--cols-3 { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 900px) { .chb-link-cards__grid--cols-4 { grid-template-columns: repeat(4, 1fr); } } .chb-link-card { display: flex; flex-direction: column; min-width: 0; background: var(--chb-paper); border: 1px solid var(--chb-line); border-radius: var(--chb-radius); overflow: hidden; text-decoration: none; color: inherit; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; } a.chb-link-card:hover { border-color: var(--chb-accent); transform: translateY(-2px); box-shadow: var(--chb-shadow); } .chb-link-card__media { position: relative; } .chb-link-card__media img, .chb-link-card__media .chb-media-placeholder { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: 0; } .chb-link-card__body { padding: var(--chb-space-3); display: flex; flex-direction: column; gap: .35em; flex: 1; } .chb-link-card__cat { margin: 0; font-family: var(--chb-font-condensed); font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--chb-accent-text, var(--chb-accent)); } .chb-link-card__title { font-family: var(--chb-font-display); font-size: var(--chb-text-xl); font-weight: var(--chb-title-weight); letter-spacing: var(--chb-title-tracking); margin: 0; } .chb-link-card__claim { margin: 0; font-family: var(--chb-font-display); font-weight: 600; font-size: var(--chb-text-sm); color: var(--chb-ink); } .chb-link-card__meta { margin: 0; font-family: var(--chb-font-condensed); font-size: .8rem; color: var(--chb-ink-mute); } .chb-link-card__text { margin: 0; color: var(--chb-ink-soft); font-size: var(--chb-text-sm); } .chb-link-card__cta { margin-top: auto; padding-top: .5em; font-family: var(--chb-font-display); font-weight: 600; font-size: var(--chb-text-sm); color: var(--chb-primary-text, var(--chb-primary)); } .chb-section--invert .chb-link-card { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); } .chb-section--invert .chb-link-card__title { color: #fff; } .chb-section--invert .chb-link-card__claim { color: rgba(255, 255, 255, .9); } .chb-section--invert .chb-link-card__text { color: rgba(255, 255, 255, .75); } .chb-section--invert .chb-link-cards__chip { background: rgba(255, 255, 255, .06); color: #fff; border-color: rgba(255, 255, 255, .22); } .chb-section--invert .chb-link-cards__chip.is-active { background: var(--chb-accent); color: #17130a; border-color: var(--chb-accent); } /* ── Notícias (blog) ── */ .chb-news-grid__grid { display: grid; gap: var(--chb-space-3); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .chb-news-grid__grid--cols-2, .chb-news-grid__grid--cols-3 { grid-template-columns: 1fr; } @media (min-width: 640px) { .chb-news-grid__grid--cols-2 { grid-template-columns: repeat(2, 1fr); } .chb-news-grid__grid--cols-3 { grid-template-columns: repeat(3, 1fr); } } .chb-news-card { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--chb-line); border-radius: var(--chb-radius-lg); background: var(--chb-paper); overflow: hidden; transition: box-shadow .15s ease, transform .15s ease; } .chb-news-card:hover { box-shadow: var(--chb-shadow); transform: translateY(-2px); } .chb-news-card__media { display: block; } .chb-news-card__media img, .chb-news-card__media .chb-media-placeholder { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; } .chb-news-card__body { padding: var(--chb-space-3); } .chb-news-card__date { display: block; font-size: var(--chb-text-sm); color: var(--chb-ink-mute); margin-bottom: .4em; } .chb-news-card__title { font-family: var(--chb-font-display); font-size: var(--chb-text-xl); font-weight: var(--chb-title-weight); letter-spacing: var(--chb-title-tracking); margin: 0 0 .4em; } .chb-news-card__title a { color: inherit; text-decoration: none; } .chb-news-card__title a:hover { color: var(--chb-primary-text, var(--chb-primary)); } .chb-news-card__excerpt { margin: 0; color: var(--chb-ink-soft); font-size: var(--chb-text-sm); } /* ── Blog nativo (templates/blog-index.php, templates/blog-single.php) ── */ .chb-blog-pagination { display: flex; gap: .5em; margin-top: var(--chb-space-4); flex-wrap: wrap; } .chb-blog-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 2.4em; height: 2.4em; padding: 0 .6em; box-sizing: border-box; border: 1px solid var(--chb-line); border-radius: var(--chb-radius); text-decoration: none; color: var(--chb-ink); font-size: var(--chb-text-sm); } .chb-blog-pagination .page-numbers.current { background: var(--chb-primary); color: var(--chb-primary-ink, #fff); border-color: var(--chb-primary); } .chb-blog-pagination .page-numbers.dots { border-color: transparent; } .chb-blog-pagination a.page-numbers:hover { background: var(--chb-paper-alt); } .chb-blog-single__meta { display: flex; align-items: center; gap: .8em; flex-wrap: wrap; margin-bottom: var(--chb-space-2); font-size: var(--chb-text-sm); color: var(--chb-ink-mute); } .chb-blog-single__cat { display: inline-flex; padding: .25em .7em; border-radius: 999px; background: var(--chb-paper-alt); color: var(--chb-primary-text, var(--chb-primary)); text-decoration: none; font-weight: 600; } .chb-blog-single__media { margin: var(--chb-space-3) 0; } .chb-blog-single__media img { width: 100%; border-radius: var(--chb-radius-lg); } /* ── Contato ── */ .chb-contact__grid { display: grid; gap: var(--chb-space-4); } @media (min-width: 820px) { .chb-contact__grid { grid-template-columns: 1fr 1.2fr; } } .chb-contact__list { list-style: none; margin: var(--chb-space-3) 0 0; padding: 0; display: grid; gap: var(--chb-space-2); } .chb-contact__list li { display: grid; gap: .15em; } .chb-contact__list strong { font-size: var(--chb-text-sm); color: var(--chb-ink-mute); text-transform: uppercase; letter-spacing: .04em; } .chb-contact__list a { text-decoration: none; font-weight: 500; } .chb-contact__form { padding: var(--chb-space-3); border: 1px solid var(--chb-line); border-radius: var(--chb-radius-lg); background: var(--chb-paper-alt); } .chb-form-row { display: grid; gap: var(--chb-space-2); } @media (min-width: 560px) { .chb-form-row { grid-template-columns: 1fr 1fr; } } .chb-form-field { margin-bottom: var(--chb-space-2); } .chb-form-field label { display: block; font-weight: 600; font-size: var(--chb-text-sm); margin-bottom: .35em; } .chb-form-field input, .chb-form-field textarea { width: 100%; padding: .65em .8em; border: 1px solid var(--chb-line); border-radius: var(--chb-radius); font: inherit; background: var(--chb-paper); } .chb-form-field input:focus, .chb-form-field textarea:focus { outline: none; border-color: var(--chb-primary); box-shadow: 0 0 0 2px rgba(var(--chb-primary-rgb), .2); } .chb-form-msg { padding: var(--chb-space-2); border-radius: var(--chb-radius); margin-bottom: var(--chb-space-2); font-weight: 500; } .chb-form-msg--success { background: #ECFDF5; color: #047857; border: 1px solid #A7F3D0; } .chb-form-msg--error { background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA; } .chb-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } /* ── Depoimentos ── */ .chb-testimonials__grid { display: grid; gap: var(--chb-space-3); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .chb-testi { display: flex; flex-direction: column; gap: 12px; min-width: 0; background: var(--chb-paper); border: 1px solid var(--chb-line); border-radius: var(--chb-radius-lg); padding: 24px; } .chb-testi__stars { color: var(--chb-accent-text, var(--chb-accent)); font-size: 15px; letter-spacing: 2px; } .chb-testi__quote { color: var(--chb-ink-soft); line-height: 1.6; flex: 1; } .chb-testi__author { font-size: 14px; margin: 0; } .chb-testi__author strong { color: var(--chb-ink); } .chb-testimonials__cta { text-align: center; margin-top: var(--chb-space-4); } /* Campo de nota (estrelas) do formulário — 5 radios, só CSS, sem JS. Truque clássico: DOM em ordem 5→1 + row-reverse deixa visual 1→5, e `:checked ~ label` (que seleciona IRMÃOS SEGUINTES no DOM) passa a marcar visualmente a estrela clicada e todas as anteriores. */ .chb-star-input { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; font-size: 26px; width: fit-content; } .chb-star-input input { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } .chb-star-input label { color: var(--chb-line); cursor: pointer; transition: color .1s ease; line-height: 1; } .chb-star-input label:hover, .chb-star-input label:hover ~ label, .chb-star-input input:checked ~ label { color: var(--chb-accent-text, var(--chb-accent)); } /* ── Footer ── */ /* --chb-footer-text (Identidade → "Cor do texto do rodapé customizada") sem override cai no branco de sempre — cor-mix() deriva as variantes translúcidas (borda dos ícones sociais, linha do copyright) da mesma cor base, então um projeto com rodapé de fundo claro só precisa trocar essa variável pra tudo (texto, links, bordas) reajustar junto. */ .chb-footer { background: var(--chb-footer-bg, var(--chb-secondary)); color: var(--chb-footer-text, rgba(255, 255, 255, .85)); margin-top: auto; } .chb-footer a { color: var(--chb-footer-text, #fff); text-decoration: none; } .chb-footer a:hover { color: var(--chb-accent); text-decoration: underline; } .chb-footer__grid { display: grid; gap: var(--chb-space-4); padding-block: var(--chb-space-5) var(--chb-space-4); } @media (min-width: 720px) { .chb-footer__grid--cols-2 { grid-template-columns: 2fr 1fr; } .chb-footer__grid--cols-3 { grid-template-columns: 2fr 1fr 1fr; } .chb-footer__grid--cols-4 { grid-template-columns: 1.4fr 1fr 1fr 1fr; } .chb-footer__grid--cols-5 { grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; } } .chb-footer__grid--cols-1 { justify-items: center; text-align: center; } .chb-footer__brand { text-align: center; } .chb-footer__logo { display: inline-flex; font-family: var(--chb-font-display); font-weight: var(--chb-title-weight); font-size: var(--chb-text-lg); letter-spacing: var(--chb-title-tracking); } .chb-footer__logo img { max-height: 40px; width: auto; margin-inline: auto; } .chb-footer__tagline { margin: var(--chb-space-1) 0 0; opacity: .75; font-size: var(--chb-text-sm); } .chb-footer__social { display: flex; justify-content: center; gap: .5em; margin-top: var(--chb-space-2); } .chb-footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--chb-footer-text, #fff) 25%, transparent); color: var(--chb-footer-text, #fff); transition: background .2s, border-color .2s; } .chb-footer__social a:hover { background: var(--chb-accent); border-color: var(--chb-accent); color: var(--chb-accent-ink, #fff); text-decoration: none; } .chb-footer h2 { font-size: var(--chb-text-sm); text-transform: uppercase; letter-spacing: .06em; opacity: .7; } .chb-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5em; font-size: var(--chb-text-sm); } .chb-footer__contact-list { text-align: left; } .chb-footer__contact-list li { display: flex; align-items: flex-start; gap: .6em; } .chb-footer__contact-list svg { flex-shrink: 0; margin-top: .15em; opacity: .8; } .chb-footer__grid--cols-1 .chb-footer__contact-list li { justify-content: center; } .chb-footer__links li { display: flex; align-items: center; gap: .55em; } .chb-footer__links li::before { content: ""; flex-shrink: 0; width: 13px; height: 13px; background-color: var(--chb-accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; } .chb-footer__bottom { border-top: 1px solid color-mix(in srgb, var(--chb-footer-text, #fff) 12%, transparent); padding-block: var(--chb-space-2); font-size: var(--chb-text-sm); opacity: .7; text-align: center; } .chb-footer__line { font-family: var(--chb-font-display); font-weight: var(--chb-title-weight); font-size: var(--chb-text-lg); letter-spacing: var(--chb-title-tracking); opacity: .9; margin: 0 0 .3em; } .chb-footer__copy { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4em; } .chb-footer__credit { display: inline-flex; align-items: center; gap: .35em; white-space: nowrap; } .chb-footer__credit img { vertical-align: middle; } /* ── WhatsApp flutuante ── */ .chb-wa-float { position: fixed; right: 20px; bottom: 20px; z-index: 999; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #17130a; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); transition: transform .15s ease, bottom .15s ease; } .chb-wa-float:hover { transform: scale(1.08); color: #17130a; } /* Padrão do plugin: o botão flutuante só faz sentido no desktop — no celular, a barra de navegação inferior (chb-bottom-nav) e/ou a barra de ações rápidas (chb-mobile-bar) já cobrem esse atalho sem flutuar por cima do conteúdo numa tela pequena. */ @media (max-width: 768px) { .chb-wa-float { display: none; } } /* ── Barra fixa de ações rápidas (mobile) ── */ .chb-mobile-bar { display: none; } @media (max-width: 768px) { body.chb-has-mobile-bar { padding-bottom: 68px; } .chb-mobile-bar { display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 950; background: var(--chb-paper); border-top: 1px solid var(--chb-line); padding: 10px max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); box-shadow: 0 -6px 20px rgba(0, 0, 0, .18); } .chb-mobile-bar__btn { flex: 1; text-align: center; text-decoration: none; padding: .7em .5em; border-radius: var(--chb-radius); font-weight: 700; font-size: 13px; border: 2px solid transparent; } .chb-mobile-bar__btn--primary { background: var(--chb-primary); color: var(--chb-primary-ink, #fff); } .chb-mobile-bar__btn--ghost { background: transparent; border-color: var(--chb-primary); color: var(--chb-primary-text, var(--chb-primary)); } /* Modo ícone + rótulo (até 5 botões) */ body.chb-has-mobile-bar { padding-bottom: 62px; } .chb-mobile-bar--icons { gap: 0; padding: 6px max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)); } .chb-mobile-bar--icons .chb-mobile-bar__btn { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 2px; border: 0; border-radius: 8px; background: none; color: var(--chb-secondary, var(--chb-ink)); font-size: 10px; font-weight: 600; } .chb-mobile-bar--icons .chb-mobile-bar__btn svg { flex: none; } .chb-mobile-bar--icons .chb-mobile-bar__btn span { line-height: 1; } .chb-mobile-bar--icons .chb-mobile-bar__btn--whatsapp { color: #15a862; } } /* ── Barra de navegação inferior (mobile) ── */ .chb-bottom-nav { display: none; } @media (max-width: 768px) { body.chb-has-bottom-nav { padding-bottom: 64px; } .chb-bottom-nav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 950; background: var(--chb-paper); border-top: 1px solid var(--chb-line); padding: 6px max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)); box-shadow: 0 -6px 20px rgba(0, 0, 0, .12); } .chb-bottom-nav__item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 2px; color: var(--chb-ink-soft); font-size: 11px; text-decoration: none; } .chb-bottom-nav__item svg { width: 22px; height: 22px; } .chb-bottom-nav__item.is-current { color: var(--chb-primary-text, var(--chb-primary)); } } /* ── Stats (números em destaque) ── */ .chb-stats__grid { display: grid; gap: var(--chb-space-4); align-items: center; } @media (min-width: 860px) { .chb-stats__grid { grid-template-columns: 1.1fr .9fr; } .chb-stats--flip .chb-stats__content { order: 2; } .chb-stats--flip .chb-stats__media { order: 1; } } .chb-stats__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--chb-space-2); margin-top: var(--chb-space-3); } .chb-stats--split .chb-stats__list { grid-template-columns: repeat(2, 1fr); } .chb-stats:not(.chb-stats--split) .chb-stats__list { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); text-align: center; } .chb-stats__item { padding: 22px 18px; border: 1px solid var(--chb-line); border-radius: var(--chb-radius); background: var(--chb-paper-alt); min-width: 0; } .chb-stats__value { font-family: var(--chb-font-display); font-size: 38px; line-height: 1; color: var(--chb-primary-text, var(--chb-primary)); } .chb-stats__label { font-size: 12px; font-weight: 600; letter-spacing: .5px; color: var(--chb-ink-soft); margin-top: 6px; text-transform: uppercase; } .chb-stats__media img { border-radius: var(--chb-radius-lg); width: 100%; border: 2px solid var(--chb-accent); box-shadow: 0 12px 32px rgba(0, 0, 0, .35); } .chb-stats--split .chb-stats__media img, .chb-stats--split .chb-stats__media .chb-media-placeholder { aspect-ratio: 4 / 5; object-fit: cover; } /* ── Texto + Linha do tempo (3/4 + 1/4) ── */ .chb-text-timeline__grid { display: grid; gap: var(--chb-space-4); } @media (min-width: 820px) { .chb-text-timeline__grid { grid-template-columns: 3fr 1fr; align-items: start; } .chb-text-timeline--flip .chb-text-timeline__content { order: 2; } .chb-text-timeline--flip .chb-text-timeline__rail { order: 1; } } .chb-text-timeline__rail { position: relative; padding-left: var(--chb-space-3); border-left: 2px solid var(--chb-line); display: grid; gap: var(--chb-space-3); } .chb-text-timeline__item { position: relative; } .chb-text-timeline__dot { position: absolute; left: calc(-1 * var(--chb-space-3) - 5px); top: 5px; width: 10px; height: 10px; border-radius: 999px; background: var(--chb-accent); } .chb-text-timeline__year { display: block; font-family: var(--chb-font-display); font-size: var(--chb-text-lg); color: var(--chb-primary-text, var(--chb-primary)); } .chb-text-timeline__label { display: block; font-size: var(--chb-text-sm); color: var(--chb-ink-soft); margin-top: 2px; } /* ── Cronograma ── */ .chb-schedule__grid { display: grid; gap: var(--chb-space-3); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .chb-schedule__day { background: var(--chb-paper-alt); border: 1px solid var(--chb-line); border-radius: var(--chb-radius-lg); padding: var(--chb-space-3); border-top: 4px solid var(--chb-accent); min-width: 0; } .chb-schedule__day-name { font-family: var(--chb-font-display); font-size: 26px; letter-spacing: var(--chb-title-tracking); } .chb-schedule__day-date { font-family: var(--chb-font-condensed); font-size: 14px; font-weight: 700; color: var(--chb-accent-text, var(--chb-accent)); letter-spacing: 1px; margin-bottom: var(--chb-space-2); } .chb-schedule__row { display: flex; gap: var(--chb-space-2); padding: 10px 0; border-top: 1px solid var(--chb-line); } .chb-schedule__time { font-weight: 800; font-size: 14px; color: var(--chb-ink-soft); min-width: 42px; flex-shrink: 0; } .chb-schedule__desc { font-size: 14px; color: var(--chb-ink-soft); line-height: 1.4; } /* ── Agenda (Google Agenda) ── */ .chb-gcal__search { margin-bottom: var(--chb-space-3); } .chb-gcal__search-input { width: 100%; padding: .75em 1em; border: 1px solid var(--chb-line); border-radius: var(--chb-radius); font: inherit; background: var(--chb-paper); appearance: none; } .chb-gcal__search-input:focus { outline: none; border-color: var(--chb-primary); box-shadow: 0 0 0 2px rgba(var(--chb-primary-rgb), .2); } .chb-gcal__search-input::-webkit-search-cancel-button { cursor: pointer; } .chb-gcal__item[hidden] { display: none; } .chb-gcal__list { display: flex; flex-direction: column; gap: var(--chb-space-2); } .chb-gcal__item { display: flex; align-items: center; gap: var(--chb-space-3); background: var(--chb-paper-alt); border: 1px solid var(--chb-line); border-radius: var(--chb-radius-lg); padding: var(--chb-space-2) var(--chb-space-3); } .chb-gcal__date { display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; width: 64px; min-height: 64px; border-radius: var(--chb-radius); background: var(--chb-paper); border: 1px solid var(--chb-line); border-top: 3px solid var(--chb-accent); } .chb-gcal__date-dow { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--chb-accent-text, var(--chb-accent)); } .chb-gcal__date-day { font-family: var(--chb-font-display); font-size: 22px; line-height: 1.1; color: var(--chb-ink); } .chb-gcal__date-mon { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--chb-ink-mute); } .chb-gcal__body { min-width: 0; } .chb-gcal__title { font-size: 17px; font-weight: 800; color: var(--chb-ink); } .chb-gcal__meta { font-size: 14px; color: var(--chb-ink-soft); margin-top: 2px; } .chb-gcal__empty { text-align: center; color: var(--chb-ink-soft); padding: var(--chb-space-3) 0; } /* ── Localização ── */ .chb-location__grid { display: grid; gap: var(--chb-space-4); align-items: center; } @media (min-width: 820px) { .chb-location__grid { grid-template-columns: 1fr 1.2fr; } } .chb-location__list { list-style: none; margin: var(--chb-space-3) 0 var(--chb-space-3); padding: 0; display: grid; gap: var(--chb-space-2); } .chb-location__list li { display: grid; gap: .15em; } .chb-location__list strong { font-size: var(--chb-text-sm); color: var(--chb-ink-mute); text-transform: uppercase; letter-spacing: .04em; } .chb-location__map { position: relative; aspect-ratio: 4 / 3; border-radius: var(--chb-radius-lg); overflow: hidden; box-shadow: var(--chb-shadow); } .chb-location__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .chb-location__map .chb-media-placeholder { position: absolute; inset: 0; } /* ── Unidades / Filiais ── */ .chb-locations__grid { display: grid; gap: var(--chb-space-3); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .chb-locations__grid--cols-2, .chb-locations__grid--cols-3, .chb-locations__grid--cols-4 { grid-template-columns: 1fr; } @media (min-width: 640px) { .chb-locations__grid--cols-2 { grid-template-columns: repeat(2, 1fr); } .chb-locations__grid--cols-3 { grid-template-columns: repeat(3, 1fr); } .chb-locations__grid--cols-4 { grid-template-columns: repeat(4, 1fr); } } .chb-location-card { display: flex; flex-direction: column; gap: var(--chb-space-1); min-width: 0; padding: var(--chb-space-3); border: 1px solid var(--chb-line); border-radius: var(--chb-radius-lg); background: var(--chb-paper); transition: box-shadow .15s ease, transform .15s ease; } .chb-location-card:hover { box-shadow: var(--chb-shadow); transform: translateY(-2px); } .chb-location-card__title { font-family: var(--chb-font-display); font-size: var(--chb-text-xl); font-weight: var(--chb-title-weight); letter-spacing: var(--chb-title-tracking); margin: 0; } .chb-location-card__address, .chb-location-card__meta { margin: 0; color: var(--chb-ink-soft); font-size: var(--chb-text-sm); } .chb-location-card__meta { display: flex; flex-wrap: wrap; gap: 0 .75em; } .chb-location-card__actions { display: flex; flex-wrap: wrap; gap: var(--chb-space-1); margin-top: auto; padding-top: var(--chb-space-1); } .chb-location-card__actions .chb-btn { font-size: var(--chb-text-sm); padding: .55em 1.1em; } /* ── Mapa ── */ .chb-map__grid { display: grid; gap: var(--chb-space-4); align-items: center; } @media (min-width: 860px) { .chb-map__grid { grid-template-columns: 3fr 1fr; } } .chb-map__media img { border-radius: var(--chb-radius-lg); width: 100%; aspect-ratio: 16 / 10; object-fit: cover; } .chb-map__legend { display: flex; flex-direction: column; gap: var(--chb-space-1); } .chb-map__legend-item { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: var(--chb-paper-alt); border: 1px solid var(--chb-line); border-radius: var(--chb-radius); font-weight: 600; font-size: 14px; min-width: 0; } .chb-map__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--chb-accent); flex-shrink: 0; } /* ── Cotas / Planos ── */ .chb-tiers__grid { display: grid; gap: var(--chb-space-3); grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); } .chb-tier { display: flex; flex-direction: column; min-width: 0; background: var(--chb-paper); border: 1px solid var(--chb-line); border-radius: var(--chb-radius-lg); overflow: hidden; } .chb-tier__head { padding: 16px 24px 12px; border-bottom: 3px solid var(--chb-accent); color: rgba(0, 0, 0, .82); } .chb-tier__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; } .chb-tier__name { font-family: var(--chb-font-display); font-size: 24px; letter-spacing: var(--chb-title-tracking); } .chb-tier__body { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; } .chb-tier__benefit { display: flex; gap: 10px; font-size: 13px; color: var(--chb-ink-soft); line-height: 1.4; } .chb-tier__arrow { color: var(--chb-primary-text, var(--chb-primary)); font-weight: 800; flex-shrink: 0; } .chb-tier__btn { margin-top: auto; text-align: center; font-size: 13px; font-weight: 800; letter-spacing: .5px; color: rgba(0, 0, 0, .82); padding: 13px; border-radius: 3px; text-decoration: none; } /* ── Ingressos ── */ .chb-tickets__grid { display: grid; gap: var(--chb-space-3); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .chb-ticket { position: relative; display: flex; flex-direction: column; min-width: 0; gap: 10px; background: var(--chb-paper); border: 1px solid var(--chb-line); border-radius: var(--chb-radius-lg); padding: 24px; } .chb-ticket--featured { border-color: var(--chb-primary); border-width: 2px; } .chb-ticket__badge { position: absolute; top: -12px; left: 24px; padding: 4px 12px; background: var(--chb-primary); color: var(--chb-primary-ink, #fff); border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .5px; } .chb-ticket__name { font-family: var(--chb-font-display); font-size: 22px; letter-spacing: var(--chb-title-tracking); } .chb-ticket__price { font-size: 28px; font-weight: 800; color: var(--chb-primary-text, var(--chb-primary)); } .chb-ticket__desc { display: flex; flex-direction: column; gap: 8px; flex: 1; } .chb-ticket__desc-item { display: flex; gap: 10px; font-size: 13px; color: var(--chb-ink-soft); line-height: 1.4; } .chb-ticket__arrow { color: var(--chb-primary-text, var(--chb-primary)); font-weight: 800; flex-shrink: 0; } .chb-ticket__btn { margin-top: auto; text-align: center; font-size: 13px; font-weight: 800; letter-spacing: .5px; color: rgba(0, 0, 0, .82); background: var(--chb-accent); padding: 13px; border-radius: 3px; text-decoration: none; } .chb-ticket--featured .chb-ticket__btn { background: var(--chb-primary); color: var(--chb-primary-ink, #fff); } /* Selo "Em breve" — genérico, reusado em cards de ingresso e botões de CTA. */ .chb-coming-soon { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--chb-ink); color: var(--chb-paper); font-size: 11px; font-weight: 700; letter-spacing: .5px; white-space: nowrap; } .chb-ticket__soon { position: absolute; top: -12px; right: 24px; } .chb-cta__btn-wrap { position: relative; display: inline-flex; } .chb-coming-soon--btn { position: absolute; top: -10px; right: -8px; z-index: 1; } /* ── Pop-up de conteúdo ── */ .chb-modal { border: none; border-radius: var(--chb-radius-lg); padding: 0; width: min(1080px, 95vw); max-height: 86vh; overflow: hidden; background: var(--chb-paper); color: var(--chb-ink); box-shadow: 0 24px 60px rgba(0, 0, 0, .5); } .chb-modal::backdrop { background: rgba(0, 0, 0, .65); backdrop-filter: blur(2px); } .chb-modal__close { position: sticky; top: 12px; float: right; margin: 12px 12px -40px 0; z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: none; background: rgba(0, 0, 0, .5); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } .chb-modal__close:hover { background: var(--chb-primary); } .chb-modal__body { overflow-y: auto; overflow-x: hidden; max-height: 86vh; } /* padding-inline não repetido aqui de propósito — .chb-shell (dentro da seção) já tem o próprio padding lateral; somar os dois espremia os cards mais do que precisava. */ .chb-modal__body .chb-section { padding-block: var(--chb-space-4); } .chb-modal__body .chb-shell { padding-inline: var(--chb-space-2); max-width: none; } /* O pop-up é mais estreito que a tela toda, mas as grades da página original calculam colunas em cima da largura da tela (minmax/vw) — dentro do modal isso pode estourar a lateral. Força 1 coluna aqui, sempre, com folga. */ .chb-modal__body .chb-tiers__grid, .chb-modal__body .chb-tickets__grid, .chb-modal__body .chb-cards__grid, .chb-modal__body .chb-stats__list, .chb-modal__body .chb-schedule__grid { grid-template-columns: 1fr; } /* ── Pop-up de boas-vindas (CHB_Popup — Configurações → Pop-up) ── Centralização via top/left/transform (não inset:0+margin:auto) — mais testada entre navegadores pra . IMPORTANTE: o UA stylesheet do Chrome pra já vem com "inset:0" embutido (as 4 bordas); sobrescrever só top/left deixa right/bottom "vazando" o valor 0 do navegador, e com bottom:0 + top:50% definidos (nenhum dos dois "auto"), a álgebra de posicionamento absoluto do CSS resolve a ALTURA como "altura do viewport − top − bottom" em vez de deixar o conteúdo decidir — ignora completamente o height:auto abaixo. Por isso right/bottom entram explícitos como "auto" aqui — sem isso o pop-up corta o próprio conteúdo (base do texto/botão invisível) numa altura arbitrária. Empilhado (mobile): flex-column, não grid. Testado e descartado: grid com linha "auto" + align-items:stretch (padrão) tem uma ambiguidade real de dimensionamento — um item de grid com aspect-ratio pode CALCULAR uma altura maior que a da própria linha e transborda pra cima do próximo, sobrepondo em vez de empurrar a linha pra baixo. Em fluxo normal (flex-column) isso não existe: cada item ocupa sua própria altura e o próximo sempre começa depois, nunca por cima. Grid só entra a partir de min-width:640px, quando o .chb-popup ganha altura FIXA e vira 1 única linha de 2 colunas — sem "auto" nenhum, sem ambiguidade. */ /* [open] no seletor principal de propósito: sem ele, "display:flex" é regra de autor e vence até a regra padrão do navegador que esconde o dialog fechado ("dialog:not([open]){display:none}") — a origem "author" sempre vence "user agent" no cascade, não importa a especificidade. Resultado real visto: dialog.close() rodava certinho (some o overlay, controlado por JS), mas a caixa do pop-up continuava visível porque nada aqui respeitava o atributo open ter sido removido. */ .chb-popup[open] { position: fixed; top: 50%; left: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); margin: 0; border: none; border-radius: var(--chb-radius-lg); padding: 0; width: min(720px, 92vw); height: auto; max-height: 88vh; overflow: hidden auto; background: var(--chb-paper); color: var(--chb-ink); box-shadow: 0 24px 60px rgba(0, 0, 0, .5); display: flex; flex-direction: column; /* showModal() já promove pra "top layer" do navegador, que por spec pinta acima de qualquer z-index do documento normal — na teoria nem precisaria de z-index aqui. Mesmo assim, um valor bem alto entra como reforço/fallback explícito: a admin bar do WordPress usa z-index:99999 quando logado, e plugins de terceiros (chat, cookie banner) também costumam brigar por valores altos — folga generosa acima disso. */ z-index: 999999; } /* Fundo escurecido: div comum controlada por JS (mostra/esconde junto com o dialog), não o ::backdrop nativo — ver comentário em CHB_Popup::render(). Some abaixo do dialog (que fica na "top layer" e sempre pinta por cima de qualquer elemento do documento normal, então não competem por z-index entre si). */ .chb-popup-overlay { position: fixed; inset: 0; z-index: 999998; background: rgba(0, 0, 0, .6); /* Puramente visual (overlay persistente — não fecha mais ao clicar fora). pointer-events:none garante que ela nunca intercepte cliques destinados ao dialog/botão de fechar, mesmo em algum caso de navegador onde a ordem de acerto entre a "top layer" do e um elemento normal por baixo não seja perfeitamente confiável. */ pointer-events: none; } .chb-popup-overlay[hidden] { display: none; } .chb-popup::backdrop { background: transparent; } .chb-popup__close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 32px; height: 32px; border-radius: 50%; border: none; background: rgba(0, 0, 0, .4); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } .chb-popup__close:hover { background: var(--chb-primary); } .chb-popup__media { position: relative; flex: none; aspect-ratio: 4 / 3; background: var(--chb-paper-alt); overflow: hidden; } .chb-popup__media img, .chb-popup__media .chb-media-placeholder { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 0; } .chb-popup__body { padding: var(--chb-space-4); display: flex; flex-direction: column; justify-content: center; gap: var(--chb-space-2); overflow-y: auto; min-height: 0; } .chb-popup__title { font-family: var(--chb-font-display); font-size: var(--chb-text-2xl); font-weight: var(--chb-title-weight); letter-spacing: var(--chb-title-tracking); margin: 0; } .chb-popup__text { color: var(--chb-ink-soft); margin: 0; } @media (min-width: 640px) { /* Altura fixa só entra quando as colunas ficam lado a lado — é o que precisa da altura igual nas duas (grid de 1 linha, sem "auto" — ver comentário acima). Empilhado (mobile) fica em flex, sem essa exigência. */ .chb-popup[open]:not(.chb-popup--no-media) { display: grid; grid-template-columns: 1fr 1fr; height: min(480px, 88vh); } .chb-popup__media { aspect-ratio: auto; } } /* No desktop o modal tem largura de sobra — 2 cotas/ingressos por linha. */ @media (min-width: 768px) { .chb-modal__body .chb-tiers__grid, .chb-modal__body .chb-tickets__grid { grid-template-columns: repeat(2, 1fr); } } .chb-modal__loading { padding: var(--chb-space-5); text-align: center; color: var(--chb-ink-soft); } /* ── 404 ── */ .chb-404 { padding-block: calc(var(--chb-section-y) * 1.4); } .chb-404__code { font-family: var(--chb-font-display); font-weight: var(--chb-title-weight); font-size: clamp(80px, 18vw, 160px); line-height: 1; letter-spacing: var(--chb-title-tracking); color: var(--chb-primary-text, var(--chb-primary)); opacity: .85; margin-bottom: var(--chb-space-2); } /* ── Placeholder de mídia pendente ── */ .chb-media-placeholder { width: 100%; height: 100%; min-height: 220px; border: 1px dashed var(--chb-line); border-radius: var(--chb-radius-lg); background: repeating-linear-gradient(135deg, var(--chb-paper-alt) 0px, var(--chb-paper-alt) 16px, var(--chb-paper) 16px, var(--chb-paper) 32px); display: flex; align-items: center; justify-content: center; padding: var(--chb-space-2); } .chb-media-placeholder span { font-family: monospace; font-size: 13px; text-align: center; color: var(--chb-ink-mute); padding: 14px 18px; border: 1px dashed var(--chb-line); border-radius: 6px; background: var(--chb-paper); } /* ── Ajustes finos de mobile (fica no fim do arquivo de propósito: precisa vir DEPOIS das regras base que sobrescreve — mesma especificidade, então a posição no arquivo decide quem vence, não a media query). ── */ @media (max-width: 768px) { /* Contador cabendo em uma linha só (+30% de novo, +69% no total sobre o primeiro ajuste) — apertei o gap/padding horizontal pra compensar o número maior e continuar cabendo em 349px de largura numa linha só. */ .chb-countdown { gap: 6px; flex-wrap: nowrap; justify-content: center; } /* flex:0 1 auto (não flex:1) — cada bloco fica do tamanho do próprio conteúdo, então "DIAS" (3 dígitos) não fica espremido só porque tem que dividir a mesma largura dos blocos de 2 dígitos; o padding aparece igual em todos. */ .chb-countdown__unit { min-width: 0; flex: 0 1 auto; padding: 12px 10px; } .chb-countdown__value { font-size: 32px; line-height: 1.1; } .chb-countdown__label { font-size: 12px; letter-spacing: .2px; margin-top: 2px; } /* Galeria com 2 colunas no celular, em vez de 1. */ .chb-gallery__grid { grid-template-columns: repeat(2, 1fr); } } /* ── Cabeçalho de seção com link à direita ("Ver todas →") — usado pelas seções WooCommerce-aware (categorias/produtos) em vez do botão abaixo da grade que as seções nativas usam. Ver chb_section_header_link(). ── */ .chb-section-header--split { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--chb-space-2); text-align: left; } .chb-section-header--split .chb-section__lead { margin-inline: 0; } .chb-section-header__link { flex: none; color: var(--chb-primary-text, var(--chb-primary)); font-weight: 600; font-size: var(--chb-text-sm); white-space: nowrap; transition: color .15s ease; } .chb-section-header__link:hover { color: var(--chb-primary-dark); } @media (max-width: 480px) { .chb-section-header--split { flex-direction: column; align-items: flex-start; gap: 6px; } } /* ── Categorias (WooCommerce) — carrossel ── */ .chb-carousel--category .chb-carousel__slide { flex: 0 0 calc(50% - var(--chb-space-3) / 2); } @media (min-width: 480px) { .chb-carousel--category .chb-carousel__slide { flex-basis: calc(33.333% - var(--chb-space-3) * 2 / 3); } } @media (min-width: 640px) { .chb-carousel--category .chb-carousel__slide { flex-basis: calc((100% - (var(--chb-carousel-cols, 4) - 1) * var(--chb-space-3)) / var(--chb-carousel-cols, 4)); } } .chb-category-card { position: relative; display: block; text-decoration: none; color: inherit; min-width: 0; border-radius: var(--chb-radius-lg); overflow: hidden; background: var(--chb-paper); border: 1px solid var(--chb-line); aspect-ratio: 1 / 1.12; transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; } .chb-category-card:hover { box-shadow: var(--chb-shadow); transform: translateY(-3px); border-color: rgba(var(--chb-primary-rgb), .35); } .chb-category-card:hover .chb-category-card__media img { transform: scale(1.06); } .chb-category-card__media { position: absolute; inset: 0; } .chb-category-card__media img, .chb-category-card__media .chb-media-placeholder { width: 100%; height: 100%; object-fit: cover; min-height: 0; transition: transform .4s ease; } .chb-category-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,30,40,.85) 0%, rgba(15,30,40,.15) 55%, transparent 100%); } .chb-category-card__body { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--chb-space-2); display: flex; flex-direction: column; gap: 2px; z-index: 1; } .chb-category-card__name { font-family: var(--chb-font-display); font-weight: var(--chb-title-weight); font-size: var(--chb-text-base); color: #fff; line-height: 1.2; } .chb-category-card__count { font-size: 12px; color: rgba(255,255,255,.85); } /* ── Produtos em destaque (WooCommerce) ── */ .chb-product-grid__grid { display: grid; gap: var(--chb-space-3); grid-template-columns: repeat(2, 1fr); } @media (min-width: 480px) { .chb-product-grid__grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } } @media (min-width: 640px) { .chb-product-grid__grid--cols-3 { grid-template-columns: repeat(3, 1fr); } .chb-product-grid__grid--cols-4 { grid-template-columns: repeat(4, 1fr); } } .chb-product-card { display: block; text-decoration: none; color: inherit; min-width: 0; border-radius: var(--chb-radius-lg); overflow: hidden; background: var(--chb-paper); border: 1px solid var(--chb-line); transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; } .chb-product-card:hover { box-shadow: var(--chb-shadow); transform: translateY(-3px); border-color: rgba(var(--chb-primary-rgb), .35); } .chb-product-card__media img, .chb-product-card__media .chb-media-placeholder { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; min-height: 0; background: var(--chb-paper-alt); } .chb-product-card__body { padding: var(--chb-space-2); display: flex; flex-direction: column; gap: 4px; } .chb-product-card__cat { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--chb-primary-text, var(--chb-primary)); } .chb-product-card__title { font-family: var(--chb-font-display); font-weight: 600; font-size: var(--chb-text-base); color: var(--chb-ink); line-height: 1.3; } .chb-product-card__price { font-weight: var(--chb-title-weight); color: var(--chb-primary-text, var(--chb-primary)); font-size: var(--chb-text-base); } .chb-product-card__price ins { text-decoration: none; } .chb-product-card__price del { opacity: .55; font-weight: 400; font-size: var(--chb-text-sm); margin-right: 4px; } .chb-product-card__quote { font-weight: 600; color: var(--chb-ink-soft); font-size: var(--chb-text-sm); } /* ── Opções de personalização do produto (WooCommerce) — chb_product_options_field() Base mínima só pra funcionar sem tema. O tema starter (generatepress-child) reskina isto na página de produto. ── */ .chb-product-options { display: flex; flex-direction: column; gap: var(--chb-space-3); } .chb-product-options__label { display: block; font-weight: 600; font-size: var(--chb-text-sm); margin-bottom: 8px; color: var(--chb-ink); } .chb-product-options__chosen { font-weight: 400; color: var(--chb-ink-mute); } .chb-product-options__chosen:not(:empty)::before { content: '· '; } .chb-product-options__choices { display: flex; flex-wrap: wrap; gap: 9px; } .chb-product-options__group--color .chb-product-options__choices { gap: 14px; } .chb-chip input, .chb-swatch input { position: absolute; width: 1px; height: 1px; opacity: 0; } .chb-chip { cursor: pointer; } .chb-chip span { display: block; padding: 9px 15px; border: 1.5px solid var(--chb-line); border-radius: var(--chb-radius); font-size: var(--chb-text-sm); font-weight: 500; color: var(--chb-ink-soft); background: var(--chb-paper); transition: .15s; } .chb-chip:hover span { border-color: var(--chb-primary); } .chb-chip input:checked + span { border-color: var(--chb-primary); background: rgba(var(--chb-primary-rgb), .08); color: var(--chb-primary-dark); } .chb-swatch { cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 5px; width: 54px; text-align: center; } .chb-swatch__dot { width: 38px; height: 38px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1.5px var(--chb-line); background: var(--chb-paper-alt); transition: .15s; } .chb-swatch:hover .chb-swatch__dot { box-shadow: 0 0 0 1.5px var(--chb-primary); } .chb-swatch input:checked ~ .chb-swatch__dot { box-shadow: 0 0 0 2.5px var(--chb-primary); } .chb-swatch__name { font-size: 11px; color: var(--chb-ink-mute); line-height: 1.2; } .chb-swatch input:checked ~ .chb-swatch__name { color: var(--chb-primary-dark); font-weight: 500; } /* ── Checkout via WhatsApp (WooCommerce) — CHB_Whatsapp_Checkout ── Card de destaque na página "Pedido recebido", reaproveitando .chb-card e .chb-btn (ver chb-order-whatsapp__card/__btn abaixo) em vez de estilo próprio, pra ficar visualmente igual ao resto do site sem CSS extra por projeto. */ .chb-order-whatsapp { padding-block: var(--chb-space-4); } .chb-order-whatsapp__card { max-width: 560px; margin-inline: auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--chb-space-2); } .chb-order-whatsapp__title { font-family: var(--chb-font-display); font-size: var(--chb-text-xl); margin: 0; } .chb-order-whatsapp__text { color: var(--chb-ink-soft); font-size: var(--chb-text-sm); margin: 0 0 var(--chb-space-1); } .chb-order-whatsapp__btn { display: inline-flex; align-items: center; gap: 10px; } /* ── Banners de campanha — carrossel rotativo ── */ .chb-banner { padding-block: var(--chb-space-4); } .chb-carousel--banner .chb-carousel__slide { flex: 0 0 100%; } .chb-banner__link { display: block; border-radius: var(--chb-radius-lg); overflow: hidden; } .chb-banner__picture { display: block; line-height: 0; position: relative; min-height: 160px; background: var(--chb-paper-alt); border-radius: var(--chb-radius-lg); overflow: hidden; } .chb-banner__picture img { width: 100%; height: auto; display: block; border-radius: var(--chb-radius-lg); position: relative; z-index: 1; } /* Aviso de carregamento: brilho animado atrás da imagem até o load disparar (data-chb-imgload em chb-frontend.js) — evita o banner aparecer "em branco" enquanto o arquivo (geralmente pesado) ainda está baixando. */ .chb-banner__picture::before { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, var(--chb-paper-alt) 25%, var(--chb-line) 37%, var(--chb-paper-alt) 63%); background-size: 400% 100%; animation: chb-shimmer 1.4s ease-in-out infinite; } .chb-banner__picture.is-loaded::before { animation: none; display: none; } @keyframes chb-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } /* ── Carrossel — motor genérico (banners, categorias, e o que mais precisar) ── Scroll-snap nativo: sem lib externa, funciona com touch/trackpad de graça, JS só cuida de setas/pontos/autoplay. Ver data-chb-carousel em chb-frontend.js. */ .chb-carousel { position: relative; } .chb-carousel__track { display: flex; gap: var(--chb-space-2); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0; padding: 0; list-style: none; } .chb-carousel__track::-webkit-scrollbar { display: none; } .chb-carousel__slide { scroll-snap-align: start; min-width: 0; } .chb-carousel__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--chb-line); background: var(--chb-paper); color: var(--chb-ink); font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--chb-shadow); transition: background .15s ease, color .15s ease; } .chb-carousel__arrow:hover { background: var(--chb-primary); color: var(--chb-primary-ink, #fff); } .chb-carousel__arrow--prev { left: -8px; } .chb-carousel__arrow--next { right: -8px; } .chb-carousel--banner .chb-carousel__arrow { background: rgba(255, 255, 255, .85); } .chb-carousel__dots { display: flex; justify-content: center; gap: 8px; margin-top: var(--chb-space-2); } .chb-carousel__dot { width: 8px; height: 8px; padding: 0; border-radius: 999px; border: 0; background: var(--chb-line); cursor: pointer; transition: background .15s ease, width .15s ease; } .chb-carousel__dot.is-active { background: var(--chb-primary); width: 22px; } @media (max-width: 640px) { .chb-carousel__arrow { display: none; } } /* ── Colunas com checklist ── */ .chb-columns-checklist__grid { display: grid; gap: var(--chb-space-4); grid-template-columns: 1fr; } @media (min-width: 700px) { .chb-columns-checklist__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .chb-columns-checklist__grid { grid-template-columns: repeat(var(--chb-cols-count, 4), 1fr); } } .chb-columns-checklist__head { display: flex; align-items: center; gap: 10px; margin-bottom: var(--chb-space-2); } .chb-columns-checklist__icon { font-size: 1.4em; line-height: 1; } .chb-columns-checklist__title { font-family: var(--chb-font-display); font-size: var(--chb-text-lg); font-weight: var(--chb-title-weight); margin: 0; } .chb-columns-checklist__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .chb-columns-checklist__list li { display: flex; align-items: flex-start; gap: 8px; font-size: var(--chb-text-sm); color: var(--chb-ink-soft); line-height: 1.5; } .chb-columns-checklist__check { color: var(--chb-accent-text, var(--chb-accent)); font-weight: 700; flex-shrink: 0; } /* ── Holding page ("Em Breve") ── */ @keyframes chb-holding-fade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes chb-holding-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } } .chb-holding { position: relative; min-height: 100vh; width: 100%; overflow: hidden; display: flex; flex-direction: column; font-family: var(--chb-font); color: #FCFAF5; background: radial-gradient(120% 140% at 20% 15%, var(--chb-secondary) 0%, var(--chb-primary-dark, var(--chb-primary)) 60%, var(--chb-primary) 100%); } .chb-holding__lines { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .28; pointer-events: none; } .chb-holding__pulse { animation: chb-holding-pulse 4s ease-in-out infinite; } @keyframes chb-holding-flow { to { stroke-dashoffset: -240; } } .chb-holding__lines path { stroke-dasharray: 10 7; animation: chb-holding-flow linear infinite; } .chb-holding__lines path:nth-child(1) { animation-duration: 16s; } .chb-holding__lines path:nth-child(2) { animation-duration: 19s; animation-direction: reverse; } .chb-holding__lines path:nth-child(3) { animation-duration: 22s; } .chb-holding__lines path:nth-child(4) { animation-duration: 25s; animation-direction: reverse; } .chb-holding__lines path:nth-child(5) { animation-duration: 28s; } .chb-holding__lines path:nth-child(6) { animation-duration: 31s; animation-direction: reverse; } .chb-holding__brand { position: relative; z-index: 2; display: flex; align-items: center; gap: 11px; padding: clamp(16px, 3vh, 34px) clamp(24px, 6vw, 80px) 0; font-weight: 800; letter-spacing: .24em; font-size: 12px; text-transform: uppercase; } .chb-holding__ring { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--chb-accent); position: relative; flex: 0 0 auto; display: block; } .chb-holding__ring span { position: absolute; left: 3px; right: 3px; top: 50%; height: 1px; background: var(--chb-accent); display: block; } .chb-holding__main { position: relative; z-index: 2; flex: 1; display: flex; align-items: center; padding: clamp(20px, 5vh, 90px) clamp(24px, 6vw, 80px); } .chb-holding__content { width: min(760px, 100%); animation: chb-holding-fade .9s cubic-bezier(.2, .7, .3, 1) both; } .chb-holding__eyebrow { text-transform: uppercase; letter-spacing: .18em; font-size: 11.5px; font-weight: 700; color: var(--chb-accent); margin: 0 0 14px; } .chb-holding__title { font-family: var(--chb-font-display); font-weight: var(--chb-title-weight); letter-spacing: var(--chb-title-tracking); font-size: clamp(32px, 5.5vw, 78px); line-height: 1.05; margin: 0 0 18px; } .chb-holding__title em { font-style: italic; color: var(--chb-accent); } .chb-holding__sub { font-size: clamp(15px, 1.5vw, 19px); line-height: 1.55; color: rgba(252, 250, 245, .72); max-width: 52ch; margin: 0 0 28px; } .chb-holding__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; } .chb-holding__cta, .chb-holding__ghost { display: inline-flex; align-items: center; gap: 10px; font-family: var(--chb-font); font-weight: 700; font-size: 14.5px; padding: 15px 26px; border-radius: 999px; text-decoration: none; } .chb-holding__cta { background: var(--chb-accent); color: #FCFAF5; transition: background .2s; } .chb-holding__cta:hover { background: color-mix(in srgb, var(--chb-accent) 80%, white); } .chb-holding__ghost { border: 1px solid rgba(255, 255, 255, .24); color: #FCFAF5; transition: .2s; } .chb-holding__ghost:hover { border-color: var(--chb-accent); color: var(--chb-accent); } .chb-holding__footer { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 16px 34px; align-items: baseline; justify-content: space-between; padding: 0 clamp(24px, 6vw, 80px) clamp(16px, 3vh, 38px); } .chb-holding__footer p { margin: 0; font-size: 12.5px; letter-spacing: .02em; color: rgba(252, 250, 245, .42); } .chb-holding__footer a, .chb-holding__footer-value { color: rgba(252, 250, 245, .72); } @media (max-width: 640px) { .chb-holding__footer { justify-content: flex-start; } } /* ── Acessibilidade / preferências ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } } /* ══════════════════════════════════════════════════════════════════════ SEÇÕES CINEMATOGRÁFICAS (scroll pin) — hero e lista cíclica. Efeitos de impacto, opt-in por projeto (ver ETAPA 3b da skill chb-site: máx. 2-4 pins por site). JS em assets/js/chb-scroll-fx.js, só enfileirado nas páginas que têm alguma destas seções (ver CHB_Plugin::enqueue_frontend). Nota: a variante "pin-cinema" do Portfólio (scroll horizontal) ainda não foi portada pra cá — dependia do antigo section/portfolio.php (repeater de itens), que foi substituído por portfolio-grid.php (cadastro via CHB_Catalog). Precisa de adaptação antes de virar seção registrada. ══════════════════════════════════════════════════════════════════════ */ :root { --chb-cine-cyan: #00aeef; --chb-cine-magenta: #ec008c; --chb-cine-yellow: #ffe000; } .chb-mono { font-family: ui-monospace, "SF Mono", "Cascadia Code", "Segoe UI Mono", Consolas, monospace; letter-spacing: .04em; } .chb-scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; z-index: 200; pointer-events: none; background: linear-gradient(90deg, var(--chb-cine-cyan), var(--chb-cine-magenta), var(--chb-cine-yellow)); } /* ── Hero Cinematográfico ── */ .chb-hero-cinema { height: 340vh; } .chb-hero-cinema__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--chb-paper); color: var(--chb-ink); /* .top (eyebrow+título+botões) fica sobreposto por cima via position:absolute e não empurra o notebook — sem esse respiro no topo, o notebook (centralizado na altura inteira) fica atrás dos botões em qualquer janela com menos de ~1030px de altura (ou seja, a maioria dos monitores/notebooks reais). */ padding-top: 320px; } .chb-hero-cinema__glow { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 60%, rgba(var(--chb-primary-rgb), .18), transparent 60%); } .chb-hero-cinema__top { position: absolute; top: 96px; left: 50%; transform: translateX(-50%); text-align: center; z-index: 2; width: 100%; padding: 0 20px; } .chb-hero-cinema__eyebrow { font-size: 12px; opacity: .6; margin-bottom: 10px; } .chb-hero-cinema__top .chb-hero-cinema__title { font-family: var(--chb-font-display); font-weight: var(--chb-title-weight); font-size: clamp(24px, 4.2vw, 50px); max-width: 30ch; margin: 0 auto; line-height: 1.15; } .chb-hero-cinema__accent { color: var(--chb-primary-text, var(--chb-primary)); } .chb-hero-cinema__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 22px; padding-bottom: var(--chb-space-3); } .chb-hero-cinema__hint { position: absolute; bottom: 44px; left: 50%; transform: translateX(-50%); font-size: 11px; opacity: .5; text-align: center; z-index: 2; } .chb-hero-cinema__arrow { display: block; margin-top: 8px; animation: chb-cine-bob 1.8s ease-in-out infinite; } @keyframes chb-cine-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } .chb-hero-cinema__caption { position: absolute; top: 14%; left: 50%; transform: translateX(-50%); text-align: center; z-index: 2; opacity: 0; width: 100%; padding: 0 20px; } .chb-hero-cinema__caption h2 { font-size: clamp(20px, 3.4vw, 38px); max-width: 32ch; margin: 0 auto; } .chb-hero-cinema__side { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; width: min(940px, 88vw); } .chb-hero-cinema__card { opacity: 0; flex: 1 1 230px; max-width: 280px; background: rgba(var(--chb-primary-rgb), .08); backdrop-filter: blur(6px); border: 1px solid var(--chb-line); border-radius: var(--chb-radius); padding: 22px 20px; font-size: 13px; line-height: 1.55; } .chb-hero-cinema__tag { color: var(--chb-primary-text, var(--chb-primary)); font-size: 10px; display: block; margin-bottom: 8px; letter-spacing: .06em; } .chb-hero-cinema__laptop { width: min(70vw, 760px); aspect-ratio: 16/10; position: relative; will-change: transform; transform-origin: center center; } .chb-hero-cinema__lid { position: absolute; inset: 0 0 12% 0; background: linear-gradient(160deg, #1c1c20, #0b0b0c); border-radius: 14px 14px 4px 4px; box-shadow: 0 40px 90px rgba(0, 0, 0, .55); padding: 2.6%; } .chb-hero-cinema__screen { width: 100%; height: 100%; border-radius: 4px; overflow: hidden; position: relative; background: #0b0b0c; } .chb-hero-cinema__shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; } .chb-hero-cinema__topbar { position: relative; z-index: 1; display: flex; gap: 6px; padding: 4% 5% 8%; background: linear-gradient(180deg, rgba(0, 0, 0, .6), transparent); } .chb-hero-cinema__topbar span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .55); } .chb-hero-cinema__base { position: absolute; left: -5%; right: -5%; bottom: 0; height: 5%; background: linear-gradient(180deg, #232327, #101012); border-radius: 0 0 10px 10px; } .chb-hero-cinema__base::after { content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 14%; height: 60%; background: #1a1a1c; border-radius: 0 0 6px 6px; } /* ── Lista Cíclica (soluções) ── */ .chb-pin-solucoes { height: 280vh; } .chb-pin-solucoes__pin { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--chb-paper); color: var(--chb-ink); } .chb-pin-solucoes__eyebrow { position: absolute; top: 100px; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--chb-primary-text, var(--chb-primary)); } .chb-pin-solucoes__list { position: relative; text-align: center; } .chb-pin-solucoes__item { font-family: var(--chb-font-display); font-weight: var(--chb-title-weight); text-transform: uppercase; font-size: clamp(18px, 4vw, 48px); opacity: .15; transform: scale(.9); color: var(--chb-ink); transition: opacity .25s ease, transform .25s ease, color .25s ease; margin: 6px 0; } .chb-pin-solucoes__item.is-active { opacity: 1; transform: scale(1); color: var(--chb-primary-text, var(--chb-primary)); } .chb-pin-solucoes__n { font-size: 12px; opacity: .5; margin-right: 14px; vertical-align: middle; text-transform: none; } /* ── Processo (linha desenhada) ── */ .chb-processo-linha__eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--chb-primary-text, var(--chb-primary)); margin-bottom: 12px; } .chb-processo-linha__wrap { max-width: 520px; margin: var(--chb-space-4) auto 0; position: relative; padding-left: 36px; } .chb-processo-linha__line { position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--chb-line); } .chb-processo-linha__fill { position: absolute; left: 0; top: 0; width: 100%; height: 0%; background: var(--chb-primary); transition: height 1.4s ease; } .chb-processo-linha__step { position: relative; padding-bottom: 46px; } .chb-processo-linha__step:last-child { padding-bottom: 0; } .chb-processo-linha__marker { position: absolute; left: -36px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--chb-paper); border: 2px solid var(--chb-line); } .chb-processo-linha__step.is-active .chb-processo-linha__marker { border-color: var(--chb-primary); background: var(--chb-primary); } .chb-processo-linha__n { font-size: 11px; color: var(--chb-primary-text, var(--chb-primary)); } .chb-processo-linha__step h4 { font-size: 17px; margin: 6px 0 6px; } .chb-processo-linha__step p { font-size: 13.5px; opacity: .65; margin: 0; line-height: 1.5; } /* Seções cinema — pin vira conteúdo estático empilhado no mobile, sem scroll-jacking (pin com vh gigante é frágil com a barra de endereço aparecendo/sumindo e custa bateria com o listener de scroll). */ @media (max-width: 768px) { .chb-hero-cinema, .chb-pin-solucoes { height: auto; } .chb-hero-cinema__pin { position: relative; height: auto; min-height: 100vh; padding: 120px 0 60px; display: block; } .chb-hero-cinema__glow { display: none; } .chb-hero-cinema__top { position: relative; top: 0; left: 0; transform: none !important; opacity: 1 !important; margin-bottom: 36px; } .chb-hero-cinema__caption { position: relative; top: 0; left: 0; transform: none !important; opacity: 1 !important; margin-bottom: 32px; } .chb-hero-cinema__side { position: relative; top: 0; left: 0; transform: none; flex-direction: column; width: auto; padding: 0 20px; margin-bottom: 20px; } .chb-hero-cinema__card { opacity: 1 !important; transform: none !important; flex: none; max-width: none; text-align: center; } .chb-hero-cinema__hint { display: none; } .chb-hero-cinema__laptop { width: min(84vw, 420px); margin: 0 auto; opacity: 1 !important; transform: none !important; } .chb-hero-cinema__lid { border-radius: 14px 14px 4px 4px !important; } .chb-hero-cinema__base, .chb-hero-cinema__topbar { opacity: 1 !important; } .chb-pin-solucoes__pin { position: relative; height: auto; padding: 90px 20px 60px; } .chb-pin-solucoes__eyebrow { position: relative; top: 0; display: block; text-align: center; margin-bottom: 24px; } .chb-pin-solucoes__item { opacity: 1 !important; transform: none !important; color: var(--chb-ink) !important; font-size: clamp(18px, 6vw, 30px) !important; } } /* Mesmo achatamento do pin usado no mobile acima, agora por preferência de movimento reduzido (pode acontecer em qualquer largura de tela). */ @media (prefers-reduced-motion: reduce) { .chb-hero-cinema, .chb-pin-solucoes { height: auto; } .chb-hero-cinema__pin { position: relative; height: auto; min-height: 100vh; padding: 120px 0 60px; display: block; } .chb-hero-cinema__glow { display: none; } .chb-hero-cinema__top { position: relative; top: 0; left: 0; transform: none !important; opacity: 1 !important; margin-bottom: 36px; } .chb-hero-cinema__caption { position: relative; top: 0; left: 0; transform: none !important; opacity: 1 !important; margin-bottom: 32px; } .chb-hero-cinema__side { position: relative; top: 0; left: 0; transform: none; flex-direction: column; width: auto; padding: 0 20px; margin-bottom: 20px; } .chb-hero-cinema__card { opacity: 1 !important; transform: none !important; flex: none; max-width: none; text-align: center; } .chb-hero-cinema__hint { display: none; } .chb-hero-cinema__laptop { width: min(84vw, 420px); margin: 0 auto; opacity: 1 !important; transform: none !important; } .chb-hero-cinema__lid { border-radius: 14px 14px 4px 4px !important; } .chb-hero-cinema__base, .chb-hero-cinema__topbar { opacity: 1 !important; } .chb-pin-solucoes__pin { position: relative; height: auto; padding: 90px 20px 60px; } .chb-pin-solucoes__eyebrow { position: relative; top: 0; display: block; text-align: center; margin-bottom: 24px; } .chb-pin-solucoes__item { opacity: 1 !important; transform: none !important; color: var(--chb-ink) !important; font-size: clamp(18px, 6vw, 30px) !important; } }