/* ========================================================================== CMC Digital — site Paleta: skill design-cmc, linha "CMC Digital" + sistema de cor do Google nas seções que falam de produto Google. Cor SEMPRE em variável. Duas regras de layout deste arquivo: 1. Não existe card com borda. O que separa bloco é espaço, contraste de fundo e escala tipográfica. 2. Cada seção tem UM efeito próprio. Repetir o mesmo movimento na página inteira foi a crítica de 30/07/2026 — o mapa de quem usa o quê está comentado em cada bloco. ========================================================================== */ :root { /* Linha CMC */ --navy: #050E1A; --grafite: #0C141F; --borda: #1E2733; --neon: #22FC00; --neon-tinta: #010611; --aco: #06224D; --texto: #F1F6FC; --texto-suave: #8E99A8; /* Modo claro */ --claro-fundo: #FFFFFF; --claro-alt: #F4F7FB; --claro-texto: #0B1220; --claro-suave: #55636F; --claro-borda: #E3E9F0; /* Sistema de cor do Google — usado só onde o assunto é produto Google */ --g-azul: #4285F4; --g-vermelho: #EA4335; --g-amarelo: #FBBC04; --g-verde: #34A853; --fonte-display: 'DM Sans', system-ui, sans-serif; --fonte-corpo: 'Inter', system-ui, sans-serif; --largura: 1200px; --gutter: clamp(1.25rem, 4vw, 3.5rem); /* Escala de espaço — o "espaçamento feio" vinha de valores soltos */ --e-1: .5rem; --e-2: 1rem; --e-3: 1.75rem; --e-4: 3rem; --e-5: 5rem; --e-6: clamp(6rem, 5rem + 6vw, 11rem); --t-rapida: 200ms cubic-bezier(.4, 0, .2, 1); --t-media: 520ms cubic-bezier(.22, 1, .36, 1); --t-suave: 680ms cubic-bezier(.16, 1, .3, 1); } *, *::before, *::after { box-sizing: border-box; } /* A cor de fundo vive no , não no : assim o canvas do ambiente (fixed, z-index -1) pinta ACIMA do fundo da página e ABAIXO do conteúdo. Com a cor no body o canvas sumiria atrás dela. */ html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; background: var(--navy); } body { margin: 0; background: transparent; color: var(--texto); font-family: var(--fonte-corpo); font-size: clamp(1rem, .96rem + .2vw, 1.0625rem); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3, h4 { font-family: var(--fonte-display); margin: 0; font-weight: 700; } p { margin: 0; } a { color: inherit; } img, video, svg { max-width: 100%; display: block; } .container { width: 100%; max-width: var(--largura); margin-inline: auto; padding-inline: var(--gutter); } /* isolation + overflow para o canvas do fundo ambiente poder viver dentro */ .secao { padding-block: var(--e-6); position: relative; isolation: isolate; overflow: hidden; } .secao > .container { position: relative; z-index: 1; } /* -- Tipografia ---------------------------------------------------------- DM Sans em peso 1000 nos títulos grandes, com tracking negativo forte — é o que dá o "aperto" da tipografia do Google em tamanho grande. */ h1 { font-size: clamp(2.5rem, 1.5rem + 4.4vw, 5.2rem); font-weight: 1000; line-height: .98; letter-spacing: -.04em; } .titulo-xl { font-size: clamp(2.2rem, 1.4rem + 3.8vw, 4.6rem); font-weight: 1000; line-height: 1; letter-spacing: -.038em; max-width: 16ch; } .titulo-lg { font-size: clamp(1.9rem, 1.4rem + 2.6vw, 3.4rem); font-weight: 1000; line-height: 1.05; letter-spacing: -.032em; max-width: 18ch; } .titulo-xl--escuro, .titulo-lg--escuro { color: var(--claro-texto); } .titulo-xl--centro { max-width: 18ch; margin-inline: auto; text-align: center; } /* Rótulo em versalete espaçado — pegada da Trionn */ .rotulo { font-family: var(--fonte-display); font-size: .72rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--neon); margin-bottom: var(--e-3); } .rotulo--escuro { color: var(--claro-suave); } .lead { font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem); color: var(--texto-suave); max-width: 50ch; margin-top: var(--e-3); line-height: 1.65; } .lead--escura { color: var(--claro-suave); } .destaque { color: var(--neon); } /* Palavra a palavra: a externa mascara, a interna é o que o GSAP move. overflow-x hidden no título: as palavras do efeito cinético começam deslocadas lateralmente e furavam a margem em telas estreitas. */ .palavra { display: inline-block; overflow: hidden; padding-bottom: .1em; vertical-align: bottom; } .palavra__int { display: inline-block; will-change: transform, opacity, filter; } [data-kinetico] { overflow-x: clip; } .revela { opacity: 0; transform: translateY(24px); } .revela.visivel { opacity: 1; transform: none; transition: opacity .7s var(--t-suave), transform .7s var(--t-suave); } /* -- Botões --------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: .55rem; padding: 1rem 1.85rem; border-radius: 999px; font-family: var(--fonte-display); font-weight: 700; font-size: .98rem; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform var(--t-rapida), background var(--t-rapida), border-color var(--t-rapida), color var(--t-rapida), box-shadow var(--t-rapida); } .btn:hover { transform: translateY(-2px); } .btn:focus-visible { outline: 3px solid var(--neon); outline-offset: 3px; } .btn--primario { background: var(--neon); color: var(--neon-tinta); } .btn--primario:hover { background: #3dff20; box-shadow: 0 12px 34px color-mix(in srgb, var(--neon) 30%, transparent); } .btn--fantasma { background: transparent; color: var(--texto); border-color: color-mix(in srgb, var(--texto) 26%, transparent); } .btn--fantasma:hover { border-color: var(--neon); color: var(--neon); } .btn--fantasma-clara { color: var(--claro-texto); border-color: var(--claro-borda); } .btn--fantasma-clara:hover { border-color: var(--claro-texto); } .btn__seta { transition: transform var(--t-rapida); } .btn:hover .btn__seta { transform: translateX(4px); } .acoes { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: var(--e-4); } .acoes--centro { justify-content: center; } /* -- Cabeçalho + menu com abertura suave --------------------------------- */ .topo { position: fixed; inset: 0 0 auto 0; z-index: 100; transition: background var(--t-media), backdrop-filter var(--t-media); } .topo--fixo { background: color-mix(in srgb, var(--navy) 80%, transparent); backdrop-filter: blur(18px) saturate(1.2); } .topo__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 78px; max-width: var(--largura); margin-inline: auto; padding-inline: var(--gutter); } .marca { display: inline-flex; align-items: center; } .marca img { height: 26px; width: auto; } .nav__lista { display: flex; align-items: center; gap: 2.2rem; } .nav a { text-decoration: none; font-size: .92rem; color: var(--texto-suave); position: relative; padding-block: .35rem; transition: color var(--t-rapida); } .nav a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: var(--neon); transform: scaleX(0); transform-origin: right; transition: transform var(--t-media); } .nav a:hover { color: var(--texto); } .nav a:hover::after { transform: scaleX(1); transform-origin: left; } .topo__cta { display: inline-flex; padding: .68rem 1.35rem; font-size: .9rem; } /* Botão de menu: dois riscos que viram X, sem corte seco */ .menu-btn { display: none; background: none; border: 0; padding: .6rem; cursor: pointer; width: 42px; height: 42px; } .menu-btn__risco { display: block; height: 2px; width: 22px; background: var(--texto); border-radius: 2px; transition: transform var(--t-media), opacity var(--t-rapida); } .menu-btn__risco + .menu-btn__risco { margin-top: 6px; } .menu-btn[aria-expanded="true"] .menu-btn__risco:first-child { transform: translateY(4px) rotate(45deg); } .menu-btn[aria-expanded="true"] .menu-btn__risco:last-child { transform: translateY(-4px) rotate(-45deg); } @media (max-width: 940px) { .topo__cta { display: none; } .menu-btn { display: block; } .nav { position: fixed; inset: 78px 0 auto 0; background: color-mix(in srgb, var(--navy) 97%, transparent); backdrop-filter: blur(20px); /* Abertura suave: grid 0fr→1fr anima a altura sem precisar sabê-la. Exige UM filho só (.nav__lista) — com os links soltos, cada um vira uma linha e só a primeira colapsa. */ display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-suave); } .nav__lista { min-height: 0; overflow: hidden; flex-direction: column; align-items: flex-start; gap: 0; padding-inline: var(--gutter); } .nav--aberto { grid-template-rows: 1fr; } .nav--aberto .nav__lista { padding-block: 1.25rem 2rem; } .nav a { font-size: 1.3rem; font-family: var(--fonte-display); font-weight: 700; color: var(--texto); padding-block: .65rem; } .nav a::after { display: none; } } /* ========================================================================== HERO — EFEITO PRÓPRIO: scroll-scrub de sequência de imagens em