/* ===================================================================== PRODUCT — cópia INDEPENDENTE da página Sobre Nós (mesmo design). Escopada em .eco* → NÃO afeta navbar, footer, demais seções nem o JS. Reaproveita os mesmos SVGs de logo já presentes no projeto. ===================================================================== */ /* Canvas (raiz ) branco: as seções de conteúdo da About são claras. O rodapé é o componente COMPARTILHADO (igual ao da Home) — ele pinta o próprio fundo (seção escura + card branco), então não é estilizado aqui. Escopado à About (só ela carrega este arquivo) → a Home não muda. */ html { background: var(--page-background); } /* O Hero (.eco*) foi extraído para o componente compartilhado assets/css/product-hero.css + assets/js/product-hero.js (fonte única, reutilizado na Home e em Product). Não há mais estilos .eco* aqui. */ /* O rodapé agora é o componente novo .a44f-* (assets/css/footer-a44.css + assets/js/footer.js). Página branca; o rodapé traz a própria faixa escura. */ body { background: var(--page-background); } /* ===================================================================== PRODUCT — Seção "Complete AI Customer Support Ecosystem" (reprodução fiel da referencia.png). TODA escopada em .cae* → não afeta navbar, footer, hero (.eco*), nem o JS. Sem imagens: janela de app, ícones e detalhes são 100% HTML/CSS/SVG. ===================================================================== */ .cae { position: relative; width: 100%; /* SEM fundo próprio: o #f8f8f8 vem do html/body. Se cada .cae pintasse o seu, a seção de baixo (também position:relative) cobriria a sombra que a de cima projeta — e o corte reapareceria na emenda. Transparente = uma cor chapada só, e a sombra atravessa e some suavemente. */ background: transparent; font-family: 'Inter', sans-serif; padding: 120px 40px; /* + respiro superior/inferior (equilíbrio premium) */ /* Corta SÓ na horizontal (os ícones flutuantes sangram pros lados e gerariam scroll lateral). Na vertical fica visível: a sombra da .cae-win passa de 96px e, com o padding menor do mobile (72/52px), o `overflow: hidden` a decepava rente à borda — virava uma LINHA RETA de mudança de cor entre as seções. `clip` permite `visible` no outro eixo (o `hidden` não: forçaria `auto` e criaria scroll). A 1ª linha é o fallback p/ Safari < 16, que ignora a 2ª e mantém o comportamento antigo. */ overflow: hidden; overflow: clip visible; } /* Aproxima APENAS o 1º bloco Grok do Hero (headline+descrição) — junto com a redução do padding-bottom do Hero (.eco em product-hero.css), reduz ~40% do espaço vazio entre as duas seções. Escopo `.eco + .cae` → só afeta a seção logo abaixo do Hero na Product; não toca no .cae--flip, na Home, no Footer, nem no padding compartilhado de .cae. Só o padding-top desta 1ª seção muda. */ .eco + .cae { padding-top: 72px; } /* 120 → 72 (com pb do Hero 40→24: gap 160 → 96 ≈ −40%) */ /* Fundo BRANCO PURO liso — sem linhas, grid, pattern, textura ou gradientes. */ .cae-lines { display: none; } /* Conjunto centralizado no viewport: os dois blocos formam UM bloco único, contido e centrado horizontalmente (margin:auto) e verticalmente entre si (align-items:center). Mesma distância entre eles (gap) preservada. */ .cae-inner { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; display: grid; /* 460px (era 420): o titulo em 800/58px so cabia em UMA linha no ingles. Medido na Inter ExtraBold real: "Database" 257px, mas "Banco de dados" 430px — estourava 420 e quebrava em duas, virando um titulo de 4 linhas. Com 460 sobram 30px de folga na pior lingua. */ grid-template-columns: minmax(0, 460px) minmax(0, 1fr); align-items: center; gap: 56px; } /* -------------------------- LADO ESQUERDO ------------------------- */ .cae-left { min-width: 0; } .cae-title { margin: 0; } /* Linha de apoio acima do título. Usava Playfair Display itálico — uma serifada destoando do Inter do título e do parágrafo. Agora é a MESMA família: a hierarquia vem de tamanho, peso e cor, não de troca de tipo. Com isso o Playfair deixou de ser usado no projeto e o dele saiu do HTML. */ .cae-title__script { display: block; font-family: 'Inter', sans-serif; font-style: normal; font-weight: 500; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.25; letter-spacing: -0.01em; color: #6b6b6b; margin-bottom: 12px; } .cae-title__bold { display: block; font-family: 'Inter', sans-serif; font-weight: 800; font-size: clamp(33px, 4.1vw, 58px); line-height: 1.02; letter-spacing: -0.035em; color: #0a0a0a; } .cae-desc { margin: 22px 0 0; max-width: 400px; font-size: 15px; line-height: 1.55; color: #4c4c4c; } .cae-desc strong { font-weight: 700; color: #111; } /* -------------------------- LADO DIREITO -------------------------- */ .cae-right { position: relative; min-width: 0; } /* card que espia por trás da janela (topo) */ .cae-peek { position: absolute; top: -15px; left: 13%; width: 58%; height: 42px; background: #ffffff; border-radius: 14px; box-shadow: 0 10px 24px rgba(20, 20, 30, .10); z-index: 0; } /* janela de aplicação — contida na coluna (sem sangria): o conjunto fica centralizado e equilibrado. Componente/altura/sombras inalterados. */ .cae-win { position: relative; z-index: 1; width: 100%; background: #ffffff; border: 1px solid rgba(0, 0, 0, .05); border-radius: 16px; overflow: hidden; box-shadow: 0 40px 80px -24px rgba(28, 28, 40, .30), 0 10px 24px rgba(0, 0, 0, .06); } /* cabeçalho */ .cae-win__bar { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 15px; background: #fbfbfb; border-bottom: 1px solid rgba(0, 0, 0, .05); } .cae-dots { display: inline-flex; gap: 7px; } .cae-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; } .cae-dot--r { background: #ff5f57; } .cae-dot--y { background: #febc2e; } .cae-dot--g { background: #28c840; } .cae-bar-ic svg { width: 18px; height: 18px; display: block; } .cae-bar-nav { display: inline-flex; gap: 4px; } .cae-bar-nav svg { width: 17px; height: 17px; } .cae-contrast { margin-left: auto; } .cae-contrast svg { width: 16px; height: 16px; display: block; } .cae-url { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-right: auto; min-width: 230px; padding: 6px 14px; background: #ffffff; border: 1px solid rgba(0, 0, 0, .07); border-radius: 9px; font-size: 12px; color: #8a8a8a; } .cae-url svg { width: 12px; height: 12px; } .cae-url em { font-style: normal; } /* corpo */ .cae-win__body { display: flex; min-height: 430px; } /* Variante com screenshot no lugar do mockup de UI: a imagem define a própria altura pela proporção, então o min-height do mockup sairia como faixa vazia embaixo — por isso vai a 0. `display:block` evita o flex esticar a imagem. */ .cae-win__body--shot { display: block; min-height: 0; } /* Variante DESFOCADA (2ª seção): o produto está em desenvolvimento, então a UI não deve ser legível. A moldura do browser (semáforo + URL) continua nítida, porque só o corpo é borrado. O scale(1.05) é necessário: blur() esmaece as bordas do próprio elemento e, com o overflow:hidden da .cae-win, sobraria uma moldura clara em volta. O scale empurra essa borda esmaecida para fora do recorte. pointer-events/user-select desligados: não dá para clicar nem selecionar um texto que ninguém deveria ler. */ .cae-win__body--blur { filter: blur(8px); transform: scale(1.05); transform-origin: center; pointer-events: none; user-select: none; } .cae-shot { display: block; /* remove o espaço de linha-base do inline */ width: 100%; height: auto; /* preserva a proporção original */ } /* ---- sidebar ---- */ .cae-side { width: 212px; flex: 0 0 212px; background: #fafafa; border-right: 1px solid rgba(0, 0, 0, .05); padding: 16px 12px 12px; display: flex; flex-direction: column; } .cae-brand { display: flex; align-items: center; gap: 8px; padding-left: 4px; margin-bottom: 18px; } .cae-brand__mk svg { width: 20px; height: 20px; display: block; } .cae-brand strong { font-size: 15px; font-weight: 700; color: #111; } .cae-side__label { margin: 8px 0 6px 6px; font-size: 9.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: #b2b2b2; } .cae-side__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; } .cae-item { display: flex; align-items: center; padding: 7px 10px; border-radius: 8px; font-size: 12.5px; color: #56585c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cae-item--sel { background: #ffffff; color: #111; font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .08), inset 2px 0 0 #111; justify-content: space-between; } .cae-item__chev { width: 14px; height: 14px; margin-left: auto; } .cae-item--proj { gap: 8px; } .cae-pdot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; } .cae-item--proj span { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; } .cae-item--proj b { font-weight: 500; font-size: 11px; color: #b4b4b4; } .cae-side__foot { margin-top: 16px; display: flex; flex-direction: column; gap: 1px; } .cae-item--ico svg { width: 15px; height: 15px; margin-right: 9px; flex: 0 0 auto; } .cae-user { margin-top: auto; display: flex; align-items: center; gap: 9px; padding-top: 12px; margin-top: auto; border-top: 1px solid rgba(0, 0, 0, .06); } .cae-user__av { width: 27px; height: 27px; border-radius: 50%; flex: 0 0 auto; background: linear-gradient(140deg, #d9d9d9, #b7b7b7); } .cae-user__txt { display: flex; flex-direction: column; min-width: 0; } .cae-user__txt strong { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: #222; white-space: nowrap; } .cae-verified { width: 12px; height: 12px; flex: 0 0 auto; } .cae-user__txt em { font-style: normal; font-size: 11px; color: #9a9a9a; overflow: hidden; text-overflow: ellipsis; } .cae-user__chev { width: 14px; height: 14px; margin-left: auto; flex: 0 0 auto; } /* ---- painel principal ---- */ .cae-main { flex: 1 1 auto; min-width: 0; background: #ffffff; display: flex; flex-direction: column; } .cae-hero { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; padding: 24px; } .cae-hero > * { width: 100%; max-width: 430px; margin-inline: auto; } .cae-hero__mk svg { width: 30px; height: 30px; display: block; } .cae-hero__h { margin: 12px 0 3px; font-size: 20px; font-weight: 700; color: #141414; } .cae-hero__sub { margin: 0 0 18px; font-size: 12.5px; color: #9c9c9c; } .cae-input { background: #f3f3f4; border: 1px solid rgba(0, 0, 0, .04); border-radius: 16px; padding: 14px 15px; display: flex; flex-direction: column; gap: 22px; } .cae-input__top { display: flex; align-items: center; gap: 9px; } .cae-tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; background: #ffffff; border: 1px solid rgba(0, 0, 0, .06); border-radius: 7px; font-size: 11px; color: #565656; } .cae-tag svg { width: 13px; height: 13px; } .cae-input__ph { font-size: 13px; color: #a7a7a7; } .cae-input__bot { display: flex; align-items: center; justify-content: space-between; } .cae-clip { width: 18px; height: 18px; } .cae-send { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #e9e9ea; } .cae-send svg { width: 15px; height: 15px; } .cae-pills { display: flex; justify-content: center; gap: 18px; margin-top: 16px; } .cae-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: #565656; white-space: nowrap; } .cae-pill svg { width: 14px; height: 14px; } .cae-foot { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; padding: 14px 16px 18px; } .cae-foot span { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: #a7a7a7; } .cae-foot svg { width: 13px; height: 13px; } /* ------------------- ícones flutuantes ------------------- */ .cae-float { position: absolute; display: grid; place-items: center; border-radius: 15px; background: #ffffff; box-shadow: 0 14px 30px rgba(20, 20, 30, .20); z-index: 6; } .cae-float svg { display: block; } /* A janela tem dois SLOTS de ícone flutuante e a posição vive neles, não no ícone: --top (canto superior) e --bottom (canto inferior). As classes antes levavam nome de marca (--gmail/--notion), o que deixou de fazer sentido quando os ícones viraram banco de dados (1ª seção) e desenvolvimento (2ª). */ .cae-float--top { width: 58px; height: 58px; padding: 13px; top: -24px; right: 34px; transform: rotate(9deg); } .cae-float--bottom { width: 62px; height: 62px; padding: 11px; bottom: 26px; left: -28px; transform: rotate(-16deg); } .cae-float svg { width: 100%; height: 100%; } /* ============================ RESPONSIVO ========================== */ /* Tablet largo: mantém o conjunto centrado e contido (sem sangria). */ @media (max-width: 1120px) { .cae { padding: 104px 36px; } .eco + .cae { padding-top: 62px; } /* 104 → 62 (mantém ~−40% do gap) */ .cae-inner { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 48px; } } /* Tablet / Mobile: empilha — texto em cima, janela abaixo (proporcional). */ @media (max-width: 900px) { .cae { padding: 72px 26px; } .eco + .cae { padding-top: 43px; } /* 72 → 43 (mantém ~−40% do gap) */ .cae-inner { grid-template-columns: minmax(0, 1fr); gap: 64px; } .cae-win { width: 100%; } .cae-right { max-width: 680px; width: 100%; margin: 0 auto; } .cae-float--top { right: 22px; } .cae-float--bottom { left: -18px; } } /* Mobile: mantém o mesmo desenho da janela, apenas mais compacto. */ @media (max-width: 640px) { .cae { padding: 52px 18px; } .eco + .cae { padding-top: 31px; } /* 52 → 31 (mantém ~−40% do gap) */ .cae-inner { gap: 48px; } .cae-win__body { min-height: 380px; } .cae-win__body--shot { min-height: 0; } /* screenshot: altura = proporção */ .cae-side { width: 150px; flex-basis: 150px; padding: 12px 8px 10px; } .cae-brand strong { font-size: 13px; } .cae-item { font-size: 11px; padding: 6px 8px; } .cae-side__label { font-size: 8.5px; } .cae-hero { padding: 16px; } .cae-hero__h { font-size: 17px; } .cae-pills { gap: 12px; } .cae-pill { font-size: 10.5px; } .cae-foot { gap: 12px; padding: 12px 10px 14px; } .cae-foot span { font-size: 9.5px; } .cae-float--top { width: 50px; height: 50px; top: -18px; } .cae-float--bottom { width: 52px; height: 52px; bottom: 18px; } } /* Muito estreito: reduz ainda mais para não quebrar o layout da janela. */ @media (max-width: 460px) { .cae-side { width: 122px; flex-basis: 122px; } .cae-item--proj b { display: none; } .cae-url { min-width: 0; } .cae-title__bold { font-size: clamp(28px, 8vw, 40px); } } /* ===================================================================== .cae--flip → CÓPIA ESPELHADA da seção .cae (browser à esquerda, texto à direita). Reutiliza TODOS os estilos .cae*; só inverte a composição. Escopo apenas no desktop (>900px) → no tablet/mobile o empilhamento é idêntico ao da 1ª seção (texto em cima, browser abaixo). Mesmos espaçamentos, gaps, colunas e sombras — nada mais muda. ===================================================================== */ @media (min-width: 901px) { /* inverte a ordem das colunas mantendo a MESMA grade (larguras/gap) em todos os breakpoints, sem duplicar grid-template-columns */ .cae--flip .cae-inner { direction: rtl; } .cae--flip .cae-left, .cae--flip .cae-right { direction: ltr; } /* conteúdo permanece LTR */ /* espelha a sangria da janela: agora vaza para a ESQUERDA (borda direita da janela alinha com a coluna) — auto-ajusta a qualquer largura de sangria */ .cae--flip .cae-right { display: flex; justify-content: flex-end; } .cae--flip .cae-win { flex: none; } /* espelha os elementos flutuantes e o card que espia */ .cae--flip .cae-peek { left: auto; right: 13%; } .cae--flip .cae-float--top { right: auto; left: 34px; transform: rotate(-9deg); } .cae--flip .cae-float--bottom { left: auto; right: -28px; transform: rotate(16deg); } } /* ===================================================================== ANIMAÇÕES DE ENTRADA (premium) — reveal ao entrar no viewport. Só transform/opacity (via @keyframes → NÃO interferem nas transições de hover dos componentes). Disparadas UMA vez pela classe .in (IntersectionObserver em main.js). Easing: cubic-bezier(.22,1,.36,1). ===================================================================== */ .cae-title, .cae-desc, .cae-right { opacity: 0; /* estado inicial: oculto até revelar */ will-change: transform, opacity; } @keyframes caeRevealL { /* entra da esquerda */ from { opacity: 0; transform: translateX(-80px); } to { opacity: 1; transform: translateX(0); } } @keyframes caeRevealR { /* entra da direita */ from { opacity: 0; transform: translateX(80px); } to { opacity: 1; transform: translateX(0); } } @keyframes caeRevealBrowserR { /* browser: da direita + scale */ from { opacity: 0; transform: translateX(80px) scale(.96); } to { opacity: 1; transform: translateX(0) scale(1); } } @keyframes caeRevealBrowserL { /* browser: da esquerda + scale */ from { opacity: 0; transform: translateX(-80px) scale(.96); } to { opacity: 1; transform: translateX(0) scale(1); } } /* ---- SEÇÃO 1: texto entra da esquerda (com stagger) ---- */ .cae.in .cae-title, .cae.in .cae-desc { opacity: 1; transform: none; } .cae.in .cae-title { animation: caeRevealL 900ms cubic-bezier(.22, 1, .36, 1) 120ms backwards; } .cae.in .cae-desc { animation: caeRevealL 900ms cubic-bezier(.22, 1, .36, 1) 240ms backwards; } /* ---- SEÇÃO 1: browser entra da direita (1000ms) ---- */ .cae.in .cae-right { opacity: 1; transform: none; animation: caeRevealBrowserR 1000ms cubic-bezier(.22, 1, .36, 1) 0ms backwards; } /* ---- SEÇÃO 2 (invertida): só troca a DIREÇÃO (mantém stagger/durações) ---- */ .cae--flip.in .cae-title, .cae--flip.in .cae-desc { animation-name: caeRevealR; } /* texto entra da direita */ .cae--flip.in .cae-right { animation-name: caeRevealBrowserL; } /* browser entra da esquerda */ /* Acessibilidade: sem movimento → conteúdo visível imediatamente. */ @media (prefers-reduced-motion: reduce) { .cae-title, .cae-desc, .cae-right { opacity: 1 !important; transform: none !important; animation: none !important; } }