/* ========================================================= ENS — Marketing Digital & E-commerce | Landing Page Layout fiel ao wireframe · 100% responsivo ========================================================= */ :root { /* Brand */ --red: #E51E25; --red-dark: #C21319; --blue: #2B49B0; /* eyebrows / números / links */ --blue-deep: #16336B; /* botões azul-escuro */ --green: #17A34A; /* Dark sections (medidos no wireframe) */ --ink-950: #000811; /* encerramento + footer */ --ink-900: #000D1E; /* o problema */ --ink-850: #000E20; /* nosso objetivo */ --ink-800: #112349; /* Light sections — no wireframe TODAS sao a mesma cor */ --paper: #F5F6F7; --paper-2: #F5F6F7; /* Text */ --t-dark: #0E1A31; /* headings sobre claro */ --t-body: #2B374F; /* corpo sobre claro */ --t-muted: #5C6982; /* secundário claro */ --t-white: #FFFFFF; --t-light: #C7D1E4; /* corpo sobre escuro */ --t-dim: #8A98B8; /* secundário escuro */ /* Lines */ --line-l: #E2E7F0; --line-d: rgba(255,255,255,.12); /* System */ --radius: 10px; --radius-l: 16px; --shadow: 0 18px 40px -18px rgba(9,20,45,.28); --shadow-s: 0 8px 24px -12px rgba(9,20,45,.22); --wrap: 1180px; --ff: 'Inter', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif; } /* ---------- Reset / base ---------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; max-width: 100%; /* tipografia fluida: 16px @1300px, com teto em 17px. sem teto a fonte chegava a 22.8px em telas de 1850px — grande demais na pratica. piso de 16px: abaixo disso o corpo de texto fica ilegivel no celular e o iOS passa a aplicar zoom automatico nos campos. */ font-size: clamp(16px, 1.23vw, 17px); } body { margin: 0; font-family: var(--ff); color: var(--t-body); background: var(--paper-2); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* SEM overflow-x aqui. "overflow-x: hidden" faz o overflow-y virar "auto", ou seja, transforma o elemento em contentor de rolagem. Tendo isso no E no a pagina ganhava DUAS barras de rolagem, uma dentro da outra — e a de dentro escondia o rodape. A trava fica so no . */ } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; } h1,h2,h3,h4 { margin: 0; line-height: 1.15; color: var(--t-dark); letter-spacing: -.02em; font-weight: 800; } p { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); } /* ---------- Layout helpers ---------- */ /* container fluido: conteudo ocupa ~85% da largura em qualquer tela (igual wireframe) */ /* conteudo = ~85% da largura (igual wireframe) ate 1620px; acima disso para de crescer */ .wrap { width: 100%; max-width: 1620px; margin-inline: auto; padding-inline: clamp(20px, 7.5vw, 139px); } .section { padding-block: clamp(18px, 2vw, 42px); } section[id], [id].about, main[id] { scroll-margin-top: 84px; } .eyebrow { color: var(--blue); font-weight: 700; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 8px; } .text-red { color: var(--red); } .text-blue { color: var(--blue); } /* ---------- Icons ---------- */ .ico { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .ico--fill { fill: currentColor; stroke: none; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: .75rem 1.375rem; border-radius: var(--radius); font-weight: 700; font-size: .85rem; letter-spacing: -.01em; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease; text-align: center; line-height: 1.2; } .btn:hover { transform: translateY(-2px); } .btn { max-width: 100%; } .btn-red { background: var(--red); color: #fff; box-shadow: 0 14px 26px -12px rgba(229,30,37,.7); } .btn-red:hover { background: var(--red-dark); } .btn-blue { background: var(--blue-deep); color: #fff; box-shadow: 0 14px 26px -14px rgba(22,51,107,.75); } .btn-blue:hover { background: #0F2853; } .btn-outline { background: #fff; color: var(--t-dark); border: 1.5px solid #7E9AD6; } .btn-outline:hover { border-color: var(--blue); color: var(--blue); } .btn-ghost-play { display: inline-flex; align-items: center; gap: 12px; font-weight: 600; color: #fff; } .btn-ghost-play .play { width: 44px; height: 44px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.5); display: grid; place-items: center; transition: background .2s, border-color .2s; } .btn-ghost-play:hover .play { background: rgba(255,255,255,.12); border-color: #fff; } .btn-ghost-play .play .ico { width: 16px; height: 16px; margin-left: 2px; } /* ========================================================= LOGO (SVG lockup — transparente) ========================================================= */ /* logo original do cliente (fundo removido em assets/logo-ens.png) */ .logo { display: inline-flex; align-items: center; flex: none; } .logo img { display: block; height: 2.5rem; width: auto; } .logo--footer img { height: 2.3rem; } /* ========================================================= HEADER ========================================================= */ .header { position: fixed; top: 0; left: 0; right: 0; z-index: 60; background: transparent; border-bottom: 1px solid transparent; transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease; } .header.scrolled { background: rgba(6,12,26,.92); backdrop-filter: blur(10px); border-bottom-color: rgba(255,255,255,.08); } /* header mais largo que o container de conteudo (igual wireframe) */ .header .wrap { display: flex; align-items: center; height: 82px; /* acompanha o teto do .wrap para nao descolar do conteudo em telas largas */ max-width: 1620px; padding-left: clamp(20px, 5.4vw, 100px); padding-right: clamp(20px, 4.4vw, 82px); gap: clamp(18px, 3.6vw, 60px); } /* logo isolado a esquerda; nav + botao agrupados a direita */ .nav { display: flex; align-items: center; gap: clamp(18px, 3.9vw, 58px); margin-left: auto; } /* display:contents dissolve o wrapper: no desktop os continuam sendo filhos diretos do flex, entao o gap segue valendo entre eles. */ .nav-links { display: contents; } .nav a { color: var(--t-light); font-size: clamp(13px, 1vw, 15px); font-weight: 500; transition: color .2s; } .nav a:hover { color: #fff; } /* cromo exclusivo do painel off-canvas */ .nav-head, .nav-foot, .nav-eyebrow, .nav a .n, .nav a .ar { display: none; } .nav-scrim { display: none; } .header-cta { display: flex; align-items: center; gap: 14px; } .header-cta .btn { padding: 13px 20px; font-size: clamp(12.5px, .96vw, 14px); } .menu-toggle { display: none; width: 44px; height: 44px; color: #fff; } /* ========================================================= HERO ========================================================= */ .hero { position: relative; min-height: clamp(600px, 47.9vw, 900px); display: flex; align-items: center; background: #05070E; color: #fff; overflow: hidden; padding-top: 92px; } /* Foto full-bleed na lateral direita, fundida ao fundo preto */ .hero-photo { position: absolute; top: 0; right: 0; bottom: 0; width: 74%; background-image: url("assets/hero-web.jpg"); background-size: 110% auto; background-position: 50% 4%; /* com "110% auto" a altura da imagem sai menor que a do bloco em telas altas e o fundo ladrilhava: aparecia um segundo rosto sob o titulo. */ background-repeat: no-repeat; } .hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #05070E 0%, #05070E 19%, rgba(5,7,14,.88) 29%, rgba(5,7,14,.38) 42%, rgba(5,7,14,0) 58%), linear-gradient(270deg, rgba(5,7,14,.35) 0%, transparent 16%); } .hero-wrap { position: relative; z-index: 3; width: 100%; } .hero-text { max-width: 540px; } .hero h1 { color: #fff; font-size: clamp(1.95rem, 3.25vw, 3rem); line-height: 1.14; letter-spacing: -.02em; margin-bottom: 18px; overflow-wrap: break-word; } .hero-sub { font-weight: 600; font-size: clamp(1.18rem, 1.8vw, 1.72rem); line-height: 1.3; color: #EDF1FA; margin-bottom: 20px; overflow-wrap: break-word; } .hero .lead { color: #A0ABC4; font-size: clamp(.88rem, .95vw, .98rem); line-height: 1.6; max-width: 38ch; margin-bottom: 30px; overflow-wrap: break-word; } .hero-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } /* ========================================================= ASSINATURA DA MARCA ========================================================= */ .brand-line { background: var(--paper-2); text-align: center; padding-block: clamp(22px, 2.5vw, 50px); } .brand-line h2 { font-size: clamp(1.25rem, 2.3vw, 1.9rem); margin-bottom: clamp(16px, 1.8vw, 26px); } /* texto de contexto entre o titulo e os pilares */ .brand-intro { max-width: 62ch; margin: 0 auto clamp(22px, 2.6vw, 42px); } .brand-intro p { color: var(--t-muted); font-size: clamp(.9rem, 1.02vw, 1rem); line-height: 1.62; margin-bottom: .5rem; } .brand-intro p:last-child { margin-bottom: 0; } .brand-intro strong { color: var(--t-dark); font-weight: 700; } .pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; } .pillar { padding: 8px clamp(16px, 3vw, 40px); position: relative; } .pillar + .pillar::before { /* #E2E7F0 sobre #F5F6F7 quase nao se via; este tom marca sem pesar */ content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: #C6CEDC; } .pillar .p-ico { color: var(--t-dark); margin-bottom: 10px; display: grid; place-items: center; } .pillar .p-ico .ico { width: 1.875rem; height: 1.875rem; stroke-width: 1.6; } .pillar p { font-weight: 700; color: var(--t-dark); font-size: .92rem; } /* ========================================================= O PROBLEMA ========================================================= */ .problem { background: var(--ink-900); color: #fff; padding-block: clamp(26px, 3.1vw, 62px); } .problem .wrap { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(32px, 5vw, 100px); align-items: center; } .problem h2 { color: #fff; font-size: clamp(1.2rem, 2.08vw, 1.75rem); } .problem h2 .em { color: var(--red); display: block; } .problem .rule { width: 2.625rem; height: 3px; background: var(--red); border-radius: 3px; margin: .75rem 0 1rem; } .problem-lead { color: var(--t-light); font-size: .86rem; margin-bottom: .7rem; } .problem-cue { color: var(--t-dim); font-size: .82rem; font-weight: 600; margin-bottom: 1.1rem; } .problem-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } .p-item .pi-ico { color: #fff; margin-bottom: .625rem; } .p-item .pi-ico .ico { width: 1.625rem; height: 1.625rem; stroke-width: 1.7; } .p-item p { color: var(--t-light); font-size: .82rem; } .problem-aside { border-left: 1px solid var(--line-d); padding-left: clamp(24px, 3vw, 44px); } .problem-aside p { color: var(--t-light); margin-bottom: 5px; font-size: .86rem; } .problem-aside .strong { color: #fff; font-weight: 800; font-size: 1rem; display: block; margin-bottom: 18px; } /* caixa de contexto no topo do aside (o quadro do wireframe) */ .aside-note { border: 1px solid rgba(255,255,255,.14); border-left: 3px solid var(--red); border-radius: 12px; background: rgba(255,255,255,.035); padding: 15px 17px; margin-bottom: 20px; } .aside-note p { color: var(--t-light); font-size: .84rem; line-height: 1.55; margin-bottom: 6px; } .aside-note p:last-child { margin-bottom: 0; } /* ========================================================= COMO A ENS TRABALHA (timeline 5 passos) ========================================================= */ .method { background: var(--paper); padding-block: clamp(28px, 3.2vw, 64px); } .method-head { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; margin-bottom: clamp(22px, 2.6vw, 54px); flex-wrap: wrap; } .method-head h2 { font-size: clamp(1.2rem, 2.08vw, 1.75rem); max-width: 42ch; } .method-note { color: var(--t-muted); font-size: .86rem; margin-top: .5rem; } .method-note strong { color: var(--t-dark); font-weight: 700; } .method-head .sub { color: var(--t-muted); margin-top: 8px; font-size: .84rem; } .steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(14px, 1.9vw, 26px); position: relative; } /* linha pontilhada ligando os circulos (igual wireframe) */ .steps::before { content: ""; position: absolute; top: 2rem; left: 10%; right: 10%; border-top: 2px dotted #B9C3D6; z-index: 0; } .step { text-align: center; position: relative; z-index: 1; } .step-ico { width: 4rem; height: 4rem; border-radius: 999px; background: var(--ink-900); color: #fff; display: grid; place-items: center; margin: 0 auto .875rem; } .step-ico .ico { width: 2.06rem; height: 2.06rem; stroke-width: 1.7; } .step .num { color: var(--blue); font-weight: 800; font-size: .95rem; } /* titulos da copy tem 1 ou 2 linhas; reservar 2 mantem as descricoes alinhadas */ .step h3 { font-size: .92rem; line-height: 1.25; min-height: 2.5em; margin: 2px 0 6px; } .step p { color: var(--t-muted); font-size: .78rem; max-width: 18ch; margin-inline: auto; } /* ========================================================= NOSSO OBJETIVO ========================================================= */ .objective { background: var(--ink-850); color: #fff; } .objective .wrap { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(24px, 3.4vw, 70px); align-items: center; } .objective .o-left { display: flex; gap: 14px; align-items: flex-start; } .objective .o-ico { color: var(--blue); flex: none; } .objective .o-ico .ico { width: 2.5rem; height: 2.5rem; stroke: #4E7BEA; } .objective h2 { color: #fff; font-size: clamp(1.15rem, 1.9vw, 1.62rem); } .objective p { color: var(--t-light); font-size: .84rem; max-width: 44ch; } /* ========================================================= PARA QUEM É / NÃO É PARA ========================================================= */ .audience { background: var(--paper); padding-block: clamp(18px, 2.1vw, 44px); } .aud-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 100px); position: relative; } .aud-grid::before { content: ""; position: absolute; top: 6px; bottom: 6px; left: 50%; width: 1px; background: var(--line-l); } .aud-col h2 { font-size: clamp(1.1rem, 1.85vw, 1.55rem); margin-bottom: 14px; max-width: 27ch; } .check-list li { display: flex; gap: 9px; align-items: flex-start; padding: 2px 0; color: var(--t-body); font-size: .8rem; } .check-list .ci { flex: none; width: 1.25rem; height: 1.25rem; border-radius: 999px; display: grid; place-items: center; margin-top: 1px; } .check-list .ci .ico { width: .75rem; height: .75rem; stroke-width: 2.4; } .ci-yes { background: rgba(23,163,74,.12); color: var(--green); } .ci-no { background: rgba(229,30,37,.10); color: var(--red); } .aud-cta { text-align: center; margin-top: clamp(20px, 2.4vw, 34px); } /* ========================================================= COMO FUNCIONA (4 passos) ========================================================= */ .how { background: var(--paper-2); padding-block: clamp(18px, 2.1vw, 44px); } /* titulo a esquerda + passos ao lado (igual wireframe) */ .how-wrap { display: grid; grid-template-columns: minmax(190px, 26%) 1fr; gap: clamp(20px, 3vw, 44px); align-items: start; } .how h2 { font-size: clamp(1.15rem, 2vw, 1.7rem); max-width: 21ch; margin-bottom: 0; } .how-steps { --g: clamp(16px, 2.2vw, 32px); --ico: 3.7rem; /* diametro do circulo (medido no wireframe) */ --num-h: 1.48rem; /* altura da caixa do numero */ --ico-top: .3rem; /* respiro entre numero e circulo */ display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--g); position: relative; /* no wireframe o bloco de passos nao encosta na margem direita do conteudo */ margin-right: 5%; } /* linha pontilhada passando pelo CENTRO dos circulos, do 1o ao 4o. com 4 colunas iguais e gap G, o centro da 1a coluna fica em 12.5% - 0.375G */ .how-steps::before { content: ""; position: absolute; z-index: 0; top: calc(var(--num-h) + var(--ico-top) + var(--ico) / 2); left: calc(12.5% - .375 * var(--g)); right: calc(12.5% - .375 * var(--g)); border-top: 2px dotted #A3AFC8; } /* numero e circulo centralizados sobre o bloco de texto; texto alinhado a esquerda */ .how-step { position: relative; text-align: center; } .how-step .num { display: block; color: var(--blue); font-weight: 800; font-size: 1.41rem; line-height: var(--num-h); } .how-ico { width: var(--ico); height: var(--ico); border-radius: 999px; border: 1.6px solid var(--line-l); background: var(--paper-2); /* tampa a linha pontilhada por baixo */ position: relative; z-index: 1; display: grid; place-items: center; color: var(--t-dark); margin: var(--ico-top) auto .45rem; } .how-ico .ico { width: 2.15rem; height: 2.15rem; stroke-width: 2.1; } .how-step h3, .how-step p { max-width: 10.3rem; margin-inline: auto; text-align: left; } .how-step h3 { font-size: 1rem; margin-bottom: .3rem; } .how-step p { color: var(--t-muted); font-size: .9rem; line-height: 1.45; } /* ========================================================= SEGMENTOS + SOBRE ========================================================= */ .split { background: var(--paper); padding-block: clamp(16px, 1.8vw, 38px); } /* no wireframe as colunas NAO sao iguais: segmentos 34%, sobre ~63% */ .split .wrap { display: grid; grid-template-columns: 34% 1fr; column-gap: 3.1%; } .seg h2 { font-size: clamp(1.1rem, 1.85vw, 1.55rem); margin-bottom: clamp(16px, 2vw, 26px); } .seg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 12px; } .seg-item { text-align: center; } .seg-item .s-ico { color: var(--t-dark); display: grid; place-items: center; margin-bottom: 6px; } .seg-item .s-ico .ico { width: 1.9rem; height: 1.9rem; stroke-width: 1.6; } .seg-item span { font-size: .86rem; font-weight: 600; color: var(--t-body); } /* "E-commerce" quebrava no hifen ("E-" / "commerce"): as colunas do grid usam 1fr, cujo minimo e min-content, entao rotulos longos vizinhos roubavam largura desta coluna. Manter o rotulo inteiro e mais legivel que dividi-lo. */ .seg-item span.nao-quebra { white-space: nowrap; } .seg .more { margin-top: 18px; color: var(--blue); font-weight: 700; font-size: 1rem; } /* divisor vertical entre as duas colunas (existe no wireframe) */ .about { border-left: 1px solid var(--line-l); padding-left: 1.8rem; } .about h2 { font-size: clamp(1.1rem, 1.85vw, 1.55rem); margin-bottom: 14px; } /* foto = 28% da coluna, proporcao 124x141 medida no wireframe */ .about-body { display: grid; grid-template-columns: 28% 1fr; gap: 4.3%; align-items: start; } /* proporcao 124x141 medida no wireframe; o zoom reproduz o recorte do mock */ .about-photo { aspect-ratio: 124 / 141; overflow: hidden; border-radius: 10px; box-shadow: var(--shadow-s); } .about-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 84% 50%; transform: scale(1.35); transform-origin: 50% 35%; } /* max-width em `em`: no wireframe as linhas quebram por volta de 29 caracteres-em */ .about-body p { color: var(--t-body); font-size: .95rem; line-height: 1.45; margin-bottom: .55rem; max-width: 29.5em; } .about-body .accent { color: var(--blue); font-weight: 700; } /* ========================================================= ENCERRAMENTO ========================================================= */ .closing { background: var(--ink-950); color: #fff; padding-block: clamp(12px, 1.4vw, 30px); } .closing .wrap { display: flex; justify-content: space-between; align-items: center; gap: 30px; flex-wrap: wrap; } .closing-text p { color: var(--t-light); font-size: .86rem; max-width: 52ch; margin-top: .6rem; } .closing h2 { color: #fff; font-size: clamp(1.15rem, 2vw, 1.7rem); } .closing h2 span { color: #6E93F2; display: block; font-weight: 700; } .closing-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } .closing-actions .wpp { display: inline-flex; align-items: center; gap: 7px; color: var(--t-dim); font-size: .78rem; transition: color .2s ease; } .closing-actions .wpp:hover { color: #fff; } .closing-actions .wpp .ico { color: var(--green); } .closing-actions .wpp .ico { width: 18px; height: 18px; } /* ========================================================= FOOTER ========================================================= */ .footer { background: var(--ink-950); color: var(--t-light); padding-block: clamp(8px, .9vw, 19px); } .footer .logo-mark { width: 24px; height: 29px; } .footer .logo-word { font-size: 1.2rem; } /* a 3a coluna e "auto": ela pega exatamente a largura que o e-mail "atendimento@ensmarketingdigital.com.br" precisa. Com fracao fixa ele quebrava em telas de ~1060px e sobrava um "br" sozinho na linha. */ .footer-grid { display: grid; grid-template-columns: 1fr .8fr auto 1fr; gap: 20px 24px; } .footer .logo-tag { color: var(--t-dim); } /* A hierarquia do rodape vem de PESO, COR e caixa-alta — nao de tamanho. Navegador com "tamanho minimo de fonte" configurado (Opera GX e Chrome tem esse ajuste) achata todos os tamanhos pequenos no mesmo valor: se a unica diferenca fosse o px, o rodape virava um bloco unico de texto. Por isso o titulo e caixa-alta espacada e nada aqui fica abaixo de 12,5px. */ .footer h4 { color: #fff; font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 10px; } .footer .f-tagline { margin-top: 10px; font-size: .84rem; color: var(--t-dim); max-width: 24ch; line-height: 1.5; } .footer li { margin-bottom: 3px; } .footer li a, .footer .f-contact li { color: var(--t-light); font-size: .84rem; line-height: 1.45; display: flex; align-items: center; gap: 7px; } /* e-mail longo (atendimento@ensmarketingdigital.com.br) pode quebrar em telas estreitas */ .footer .f-contact a { min-width: 0; overflow-wrap: anywhere; } .footer li a:hover { color: #fff; } .footer .f-contact .ico { width: 17px; height: 17px; color: var(--t-dim); flex: none; } /* ---------- identificacao legal (coluna "Empresa") ----------

em vez de um paragrafo com
: a razao social e o termo, os dados cadastrais sao a definicao. Antes tudo tinha o mesmo peso e o bloco lia como um paragrafo corrido, sem inicio nem fim. */ .footer .f-legal { margin: 0; display: grid; gap: 5px; } .footer .f-legal dt { color: #fff; font-size: .84rem; font-weight: 600; line-height: 1.4; max-width: 21ch; } .footer .f-legal dd { margin: 0; color: var(--t-dim); font-size: .82rem; line-height: 1.45; display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; } .footer .f-legal dd .ico { width: 15px; height: 15px; flex: none; } /* ---------- Instagram ---------- O icone solto media 18px ao lado de letras de ~9px de altura: parecia grande demais e o conjunto ficava colado na logo. Vira um selo quadrado (forma reconhecivel de rede social) com o arroba centralizado ao lado. */ .footer .f-social { display: inline-flex; align-items: center; gap: 11px; margin-top: 16px; color: var(--t-light); font-size: .84rem; font-weight: 500; transition: color .2s ease; } .footer .f-social-selo { width: 36px; height: 36px; border-radius: 10px; flex: none; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); transition: border-color .2s ease, background-color .2s ease; } .footer .f-social .ico { width: 17px; height: 17px; flex: none; } .footer .f-social:hover { color: #fff; transform: none; } .footer .f-social:hover .f-social-selo { border-color: rgba(255,255,255,.32); background: rgba(255,255,255,.09); } /* ---------- linha final ---------- o © ficava dentro da coluna "Empresa", onde nao cabia numa linha. */ .footer .f-bottom { margin-top: clamp(22px, 2.4vw, 32px); padding-top: clamp(14px, 1.4vw, 18px); border-top: 1px solid rgba(255,255,255,.08); } .footer .copyright { font-size: .82rem; color: var(--t-dim); line-height: 1.55; margin: 0; } /* ========================================================= FORMULÁRIO (contato secundário, antes do rodapé) ========================================================= */ .contact-form { color: #fff; padding-block: clamp(36px, 4.2vw, 76px); border-top: 1px solid rgba(255,255,255,.06); background: radial-gradient(72% 82% at 50% 0%, rgba(43,73,176,.16), transparent 60%), var(--ink-900); } .contact-form .wrap { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(28px, 4vw, 66px); align-items: start; } .cf-head h2 { color: #fff; font-size: clamp(1.2rem, 2.08vw, 1.75rem); margin-bottom: 14px; max-width: 20ch; } .cf-head .cf-lead { color: var(--t-light); font-size: .92rem; line-height: 1.62; margin-bottom: 8px; max-width: 46ch; } .cf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; } .field { display: flex; flex-direction: column; gap: 7px; min-width: 0; } .field--full { grid-column: 1 / -1; } .field > span { font-size: .74rem; font-weight: 600; letter-spacing: .02em; color: var(--t-light); } .field > span em { color: var(--t-dim); font-style: normal; font-weight: 500; } .field input, .field textarea { font-family: inherit; font-size: .92rem; color: #fff; width: 100%; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); border-radius: 10px; padding: 12px 14px; transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease; } .field textarea { resize: vertical; min-height: 104px; line-height: 1.5; } .field input::placeholder, .field textarea::placeholder { color: var(--t-dim); } .field input:focus, .field textarea:focus { outline: none; border-color: #4E7BEA; background: rgba(255,255,255,.08); box-shadow: 0 0 0 3px rgba(43,73,176,.28); } /* vermelho só depois que o usuário mexeu no campo (nunca no load) */ .field input:user-invalid, .field textarea:user-invalid { border-color: rgba(229,30,37,.6); } .cf-actions { margin-top: 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .cf-actions .btn { min-height: 50px; } /* ========================================================= RESPONSIVO ========================================================= */ /* --------------------------------------------------------- TABLET E ABAIXO (<= 1024) --------------------------------------------------------- */ @media (max-width: 1024px) { /* ======================================================= OFF-CANVAS (celular e tablet) Painel lateral direito + scrim. Entra por transform, que roda na GPU; nada de animar width/left. ======================================================= */ .header .wrap { height: 74px; } .header-cta { margin-left: auto; } .header-cta .btn { display: none; } /* backdrop-filter cria bloco contenedor para position:fixed: com ele o painel seria posicionado dentro do header (74px de altura) e nao no viewport. No mobile trocamos o blur por fundo solido. */ .header.scrolled { -webkit-backdrop-filter: none; backdrop-filter: none; background: #060B18; } /* ---- botao hamburguer que vira X ---- */ .menu-toggle { display: grid; place-items: center; width: 44px; height: 44px; z-index: 70; position: relative; } .mt-bars { display: block; position: relative; width: 22px; height: 14px; } .mt-bars i { position: absolute; left: 0; height: 2px; border-radius: 2px; background: #fff; transition: transform .34s var(--ease-back), width .34s var(--ease-out), opacity .2s ease; } .mt-bars i:nth-child(1) { top: 0; width: 22px; } .mt-bars i:nth-child(2) { top: 6px; width: 15px; } .mt-bars i:nth-child(3) { top: 12px; width: 22px; } .nav-open .mt-bars i:nth-child(1) { width: 22px; transform: translateY(6px) rotate(45deg); } .nav-open .mt-bars i:nth-child(2) { opacity: 0; transform: translateX(-8px); } .nav-open .mt-bars i:nth-child(3) { width: 22px; transform: translateY(-6px) rotate(-45deg); } /* ---- scrim ---- */ .nav-scrim { display: block; position: fixed; inset: 0; z-index: 58; background: rgba(3,6,14,.62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .38s var(--ease-out); } .nav-scrim[hidden] { display: none; } .nav-open .nav-scrim { opacity: 1; } /* ---- painel ---- */ .nav { position: fixed; inset: 0 0 0 auto; margin-left: 0; z-index: 60; width: min(86vw, 360px); max-width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0 clamp(20px, 5.5vw, 30px) calc(20px + env(safe-area-inset-bottom)); background: radial-gradient(120% 55% at 100% 0%, rgba(43,73,176,.30), transparent 62%), radial-gradient(90% 40% at 0% 100%, rgba(229,30,37,.16), transparent 66%), #060B18; border-left: 1px solid rgba(255,255,255,.10); box-shadow: -30px 0 70px rgba(0,0,0,.55); overflow-y: auto; overscroll-behavior: contain; transform: translateX(102%); transition: transform .44s var(--ease-out), visibility .44s; visibility: hidden; } .nav-open .nav { transform: translateX(0); visibility: visible; } /* ---- cabecalho do painel ---- */ .nav-head { display: flex; align-items: center; justify-content: space-between; height: 74px; flex: none; margin-inline: calc(clamp(20px, 5.5vw, 30px) * -1); padding-inline: clamp(20px, 5.5vw, 30px); border-bottom: 1px solid rgba(255,255,255,.08); } .nav-logo { display: block; height: 2rem; width: auto; } /* ---- links ---- */ .nav-eyebrow { display: block; margin: 22px 0 4px; font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--t-dim); opacity: 0; transform: translateX(20px); transition: opacity .45s var(--ease-out), transform .45s var(--ease-out); } .nav-open .nav-eyebrow { opacity: 1; transform: none; transition-delay: 70ms; } .nav-links { display: flex; flex-direction: column; } .nav a { display: flex; align-items: center; gap: 14px; min-height: 64px; width: 100%; /* alvo de toque folgado */ font-size: 1.16rem; font-weight: 600; color: #fff; border-bottom: 1px solid rgba(255,255,255,.07); /* cada link entra escalonado; --i vem do inline style no HTML */ opacity: 0; transform: translateX(26px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), color .2s ease; } .nav-open .nav a { opacity: 1; transform: none; transition-delay: calc(90ms + var(--i, 0) * 65ms); } .nav a .n { display: block; font-size: .72rem; font-weight: 700; color: var(--blue); letter-spacing: .06em; flex: none; } .nav a .l { flex: 1; } .nav a .ar { display: block; width: 18px; height: 18px; color: var(--t-dim); flex: none; transition: transform .3s var(--ease-out), color .2s ease; } .nav a::after { display: none; } /* sublinhado e so do desktop */ .nav a:active, .nav a:focus-visible { color: var(--red); } .nav a:active .ar, .nav a:focus-visible .ar { color: var(--red); transform: translateX(5px); } /* ---- rodape do painel ---- */ .nav-foot { display: block; margin-top: auto; padding-top: 26px; } .nav-contact { display: flex; flex-direction: column; margin-bottom: 16px; } .nav-contact a { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: .8rem; font-weight: 500; color: var(--t-light); border-bottom: 0; opacity: 1; transform: none; } .nav-contact .ico { width: 17px; height: 17px; color: var(--t-dim); flex: none; } .nav-contact a:hover { color: #fff; } .nav-cta { display: flex; justify-content: center; width: 100%; min-height: 52px; font-size: .98rem; } .nav-wpp { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; margin-top: 6px; color: var(--t-dim); font-size: .82rem; font-weight: 500; } .nav-wpp .ico { width: 18px; height: 18px; color: var(--green); } .nav-wpp:hover { color: #fff; } /* o rodape entra depois dos links */ .nav-foot { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); } .nav-open .nav-foot { opacity: 1; transform: none; transition-delay: .42s; } /* recebe o foco ao abrir (padrao de dialog); sem contorno no painel inteiro */ .nav:focus { outline: none; } /* trava a rolagem do fundo enquanto o painel esta aberto */ body.nav-lock { overflow: hidden; } /* sem animacao: o painel aparece direto, sem escalonamento */ /* (o bloco de movimento reduzido que zerava as transicoes do painel foi removido — ver "ANIMACAO FORCADA" no fim do arquivo) */ /* quebras forcadas so fazem sentido no layout largo */ .brk { display: none; } /* HERO: foto de fundo inteira com o texto sobreposto — mesma linguagem do desktop. Antes a foto virava um bloco empilhado e o texto caia num preto chapado, que era o que deixava feio no celular. */ /* HERO — a foto entra no FLUXO com proporcao fixa. Antes ela era absoluta (inset:0) e o texto tinha min-height em svh. Como as duas alturas eram independentes, em tela curta (iPhone SE) o texto subia por cima do rosto e em tela alta (iPad) sobrava um vazio entre a foto e o titulo. Com proporcao fixa a relacao entre foto e texto e sempre a mesma, em qualquer altura de tela. */ .hero { display: block; position: relative; min-height: 0; padding-top: 0; } .hero-photo { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 16 / 9; min-height: 220px; max-height: 46vh; max-height: 46svh; /* trava em tela deitada */ background-size: cover; background-position: 60% 18%; animation: none; } .hero-photo::after { background: radial-gradient(66% 60% at 60% 26%, rgba(37,84,190,.30), transparent 72%), linear-gradient(180deg, rgba(5,7,14,.60) 0%, rgba(5,7,14,.05) 20%, rgba(5,7,14,0) 42%, rgba(5,7,14,.50) 70%, rgba(5,7,14,.93) 90%, #05070E 100%); } .hero-wrap { position: relative; z-index: 2; min-height: 0; display: block; margin-top: -58px; /* o titulo comeca dentro da fusao */ padding-top: 0; padding-bottom: clamp(34px, 5vw, 54px); } .hero-text { max-width: 34rem; } .hero .lead { max-width: none; } /* acoes alinhadas a esquerda, largura natural — no tablet o botao de largura cheia virava uma barra de 700px */ .hero-actions { flex-direction: row; align-items: center; justify-content: flex-start; gap: 18px; } .hero-actions .btn { width: auto; } .problem .wrap { grid-template-columns: 1fr; } .problem-aside { border-left: none; border-top: 1px solid var(--line-d); padding-left: 0; padding-top: 28px; } .objective .wrap { grid-template-columns: 1fr; gap: 18px; } .steps { grid-template-columns: repeat(3, 1fr); row-gap: 28px; } .steps::before { display: none; } .how-wrap { grid-template-columns: 1fr; gap: 24px; } .how-steps { grid-template-columns: repeat(2, 1fr); row-gap: 28px; margin-right: 0; } .how-steps::before { display: none; } .how-step { text-align: left; } .how-ico { margin-inline: 0; } .how-step h3, .how-step p { max-width: none; margin-inline: 0; } .split .wrap { grid-template-columns: 1fr; row-gap: 36px; } .about { border-left: 0; padding-left: 0; border-top: 1px solid var(--line-l); padding-top: 32px; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 34px; } /* formulario empilha: cabecalho em cima, campos embaixo. row-gap ZERO e espacamento por margem: com display:contents os filhos do .cf-head viram filhos diretos da grade, e um gap uniforme abriria os mesmos 26px entre titulo e paragrafos — o bloco ficava solto. */ .contact-form .wrap { grid-template-columns: 1fr; gap: 0; } .contact-form .cf-head { display: contents; } .contact-form .eyebrow { order: 1; } .contact-form .cf-head h2 { order: 2; margin-bottom: 14px; max-width: 24ch; } .contact-form .cf-lead { order: 3; margin-bottom: 8px; } .contact-form .cf-form { order: 4; margin-top: clamp(20px, 3vw, 28px); } /* as proporcoes verticais do wireframe sao de desktop: no toque o conteudo precisa de mais respiro entre secoes */ .section, .brand-line, .problem, .method, .audience, .how, .split { padding-block: clamp(40px, 6vw, 62px); } .closing { padding-block: clamp(34px, 5vw, 50px); } /* SUPERFICIES: sem o alinhamento em grade larga do desktop, os itens viram texto solto. Dar contorno a cada um recompoe a leitura. */ .problem-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .p-item { padding: 16px 17px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10); } .step, .how-step, .seg-item { background: #fff; border: 1px solid var(--line-l); border-radius: 16px; padding: 18px 16px; } .seg-item { padding: 15px 12px; border-radius: 13px; } .pillars { gap: 12px; } .pillar { padding: 18px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--line-l); } .pillar + .pillar::before { display: none; } } /* --------------------------------------------------------- DESKTOP LARGO (>= 1200) As colunas passam de 280px, mas o texto continuava preso a 18ch (~150px): uma fita estreita cercada de vazio. --------------------------------------------------------- */ @media (min-width: 1200px) { .step p { max-width: 21ch; } .how-step h3, .how-step p { max-width: 11.4rem; } } /* --------------------------------------------------------- TABLET (769 – 1024) Faixa que estava sem tratamento proprio: herdava a grade do desktop com o cartao do celular. O resultado eram cartoes largos com uma linha de texto num canto e muito espaco morto, e a grade de 5 passos em 3+2 com uma fileira orfa. --------------------------------------------------------- */ @media (min-width: 769px) and (max-width: 1024px) { /* corpo de texto: no tablet .82rem dava ~14px, abaixo do minimo legivel */ .p-item p, .step p, .how-step p, .about-body p, .problem-aside p, .objective p, .closing-text p, .problem-lead, .check-list li, .brand-intro p, .aside-note p, .cf-head .cf-lead { font-size: .92rem; line-height: 1.5; } .seg-item span { font-size: .9rem; } /* icone a esquerda, texto ao lado: preenche a largura do cartao */ .p-item { display: flex; align-items: center; gap: 15px; } .p-item .pi-ico { margin-bottom: 0; flex: none; } .p-item p { margin: 0; } /* 5 passos em 3 colunas deixavam 2 orfaos na ultima fileira. 2 colunas + o ultimo ocupando a fileira inteira fecha a grade. */ .steps { grid-template-columns: repeat(2, 1fr); gap: 14px; } .step { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: start; text-align: left; padding: 18px 20px; } .step-ico { grid-column: 1; grid-row: 1 / span 3; margin: 0; align-self: center; } .step h3 { min-height: 0; margin: 1px 0 5px; } .step p { max-width: none; margin-inline: 0; } .step:last-child { grid-column: 1 / -1; } /* mesma linguagem nos 4 passos do "como funciona" */ .how-step { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: start; padding: 18px 20px; } .how-ico { grid-column: 1; grid-row: 1 / span 3; align-self: center; } .how-step h3 { margin: 1px 0 5px; } .seg-grid { gap: 12px; } /* SOBRE: a 28% a foto virava um selo perdido ao lado de um bloco de texto. Aqui ela ganha corpo e o titulo acompanha. */ .about-body { grid-template-columns: 38% 1fr; gap: 26px; } .about-photo { aspect-ratio: 4 / 5; } .seg h2, .about h2 { font-size: 1.5rem; line-height: 1.22; } } /* --------------------------------------------------------- SOBRE — realce da frase final (celular e tablet) No desktop a secao tem duas colunas e a frase ja se destaca pela posicao; aqui, empilhada, ela se perdia entre os paragrafos. O traco a marca como a tese da secao. --------------------------------------------------------- */ @media (max-width: 1024px) { .about-body .accent { border-left: 3px solid var(--blue); padding-left: 14px; margin-top: 16px; } } /* --------------------------------------------------------- CELULAR GRANDE E ABAIXO (<= 768) --------------------------------------------------------- */ @media (max-width: 768px) { .section, .brand-line, .problem, .method, .audience, .how, .split { padding-block: 46px; } .closing { padding-block: 40px; } /* telas estreitas: a foto fica mais alta para o rosto ter presenca */ .hero-photo { aspect-ratio: 3 / 2; background-position: 58% 16%; } .hero-wrap { margin-top: -50px; } .hero h1 { font-size: 2.05rem; line-height: 1.13; margin-bottom: 14px; } .hero-sub { font-size: 1.06rem; line-height: 1.34; margin-bottom: 16px; } .hero .lead { font-size: .95rem; line-height: 1.5; } /* titulos de secao ganham presenca; os clamp() sao calibrados p/ desktop */ .brand-line h2, .problem h2, .method-head h2, .closing h2 { font-size: 1.5rem; line-height: 1.22; } .aud-col h2, .how h2, .seg h2, .about h2 { font-size: 1.34rem; line-height: 1.25; } .objective h2 { font-size: 1.3rem; line-height: 1.28; } .eyebrow { font-size: .74rem; } /* nada de texto de corpo abaixo de ~15px */ .hero .lead, .p-item p, .step p, .how-step p, .about-body p, .problem-aside p, .objective p, .closing-text p, .problem-lead, .problem-cue, .check-list li, .brand-intro p, .aside-note p, .cf-head .cf-lead { font-size: .95rem; } /* alvo de toque de 48px. A largura cheia fica para <=560: a 768px um botao de 700px vira uma barra, nao um botao. */ .btn { min-height: 48px; font-size: .95rem; } .btn-ghost-play { min-height: 48px; justify-content: flex-start; } /* --- itens viram cartoes: antes eram texto solto em colunas apertadas --- */ .pillars { grid-template-columns: 1fr; gap: 11px; } .pillar { display: flex; flex-direction: row; align-items: center; gap: 16px; text-align: left; padding: 15px 17px; background: #fff; border: 1px solid var(--line-l); border-radius: 14px; } .pillar + .pillar::before { display: none; } .pillar .p-ico { margin: 0; flex: none; } .pillar p { margin: 0; } .problem-grid { grid-template-columns: 1fr; gap: 10px; } .p-item { display: flex; align-items: center; gap: 15px; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10); } .p-item .pi-ico { margin-bottom: 0; flex: none; } .p-item p { margin: 0; } .steps { grid-template-columns: 1fr; gap: 11px; } .step { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: start; text-align: left; padding: 16px 18px; background: #fff; border: 1px solid var(--line-l); border-radius: 16px; } .step-ico { grid-column: 1; grid-row: 1 / span 3; margin: 0; align-self: center; } .step h3 { min-height: 0; margin: 1px 0 4px; } .step p { max-width: none; margin-inline: 0; } .how-steps { grid-template-columns: 1fr; gap: 11px; } .how-step { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: start; padding: 16px 18px; border-radius: 16px; background: #fff; border: 1px solid var(--line-l); } .how-ico { grid-column: 1; grid-row: 1 / span 3; align-self: center; } .how-step h3 { margin: 1px 0 4px; } /* 3 colunas ate 768: com 2, cada cartao virava uma faixa de 350px com um icone e duas palavras perdidas no meio */ .seg-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; } .seg-item { display: flex; flex-direction: row; align-items: center; gap: 12px; text-align: left; padding: 13px 14px; border-radius: 13px; background: #fff; border: 1px solid var(--line-l); } .seg-item .s-ico { margin-bottom: 0; flex: none; } .seg-item span { font-size: .88rem; } .aud-grid { grid-template-columns: 1fr; } .aud-grid::before { display: none; } .aud-col:last-child { border-top: 1px solid var(--line-l); padding-top: 28px; margin-top: 6px; } .method-head { flex-direction: column; align-items: stretch; gap: 18px; } /* foto do "sobre" ocupa a largura toda em vez de um selo pequeno */ .about-body { grid-template-columns: 1fr; row-gap: 20px; } .about-photo { max-width: 100%; aspect-ratio: 16 / 11; } .about-photo img { transform: scale(1.16); transform-origin: 50% 28%; } .about-body p { max-width: none; } .closing .wrap { flex-direction: column; align-items: stretch; } .closing-actions { align-items: stretch; width: 100%; } .closing-text p { max-width: none; } /* rodape: links de 1px de respiro nao dao alvo de toque */ .footer-grid { grid-template-columns: 1fr; gap: 26px; } .footer h4 { font-size: .82rem; margin-bottom: 6px; } .footer li { margin-bottom: 0; } .footer li a { min-height: 44px; font-size: .92rem; } .footer .f-contact li { min-height: 40px; font-size: .92rem; } .footer .f-tagline { font-size: .88rem; max-width: none; } .footer .copyright { font-size: .84rem; } /* alvo de toque de 44px no link do Instagram */ .footer .f-social { font-size: .92rem; min-height: 44px; } .footer .f-social-selo { width: 44px; height: 44px; border-radius: 12px; } .footer .f-social .ico { width: 20px; height: 20px; } .footer .f-legal dt { font-size: .92rem; max-width: none; } .footer .f-legal dd { font-size: .88rem; } } /* --------------------------------------------------------- CELULAR (<= 480) --------------------------------------------------------- */ /* --------------------------------------------------------- CELULAR ESTREITO (<= 560) Aqui o botao ocupa a largura toda; acima disso ele volta a ter largura natural. --------------------------------------------------------- */ @media (max-width: 560px) { .btn { width: 100%; justify-content: center; } .hero-actions { flex-direction: column; align-items: stretch; gap: 13px; } .btn-ghost-play { justify-content: center; } .seg-grid { grid-template-columns: repeat(2, 1fr); } .cf-grid { grid-template-columns: 1fr; } .cf-actions { align-items: stretch; } } @media (max-width: 480px) { .hero-wrap { padding-bottom: 40px; } .hero h1 { font-size: 2rem; line-height: 1.12; } .hero-sub { font-size: 1.05rem; } /* "Quero conversar sobre minha empresa" quebrava em duas linhas */ .hero-actions .btn-red { font-size: .88rem; padding-inline: 1rem; } .section, .brand-line, .problem, .method, .audience, .how, .split { padding-block: 40px; } .logo img { height: 2.05rem; } .seg-item { padding: 12px 13px; gap: 10px; } .seg-item span { font-size: .84rem; } } /* ========================================================= ANIMACOES Todos os estados iniciais dependem da classe .js no , que o proprio script adiciona. Sem JS nada fica escondido. ========================================================= */ :root { --ease-out: cubic-bezier(.22, .61, .36, 1); --ease-back: cubic-bezier(.34, 1.56, .64, 1); /* leve overshoot (hamburguer -> X) */ } /* barra de progresso de leitura */ .progress { position: fixed; inset: 0 auto auto 0; height: 3px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--red), #FF6B57); z-index: 80; pointer-events: none; } .js [data-anim] { opacity: 0; transition: opacity .75s var(--ease-out), transform .75s var(--ease-out); transition-delay: var(--d, 0ms); } .js [data-anim="up"] { transform: translateY(30px); } .js [data-anim="down"] { transform: translateY(-22px); } .js [data-anim="left"] { transform: translateX(-34px); } .js [data-anim="right"] { transform: translateX(34px); } .js [data-anim="zoom"] { transform: scale(.9); } .js [data-anim="pop"] { transform: scale(.6); transition-duration: .5s; } .js [data-anim].in { opacity: 1; transform: none; } /* traco vermelho da secao "o problema": cresce da esquerda */ .js .problem .rule { transform: scaleX(0); transform-origin: 0 50%; transition: transform .9s var(--ease-out) .15s; } .js .problem .rule.in { transform: scaleX(1); } /* linhas pontilhadas dos passos: desenham da esquerda p/ direita */ .js .steps::before, .js .how-steps::before { transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.1s var(--ease-out) .25s; } .js .steps.in::before, .js .how-steps.in::before { transform: scaleX(1); } /* Foto do hero: zoom lento e continuo. So no desktop — o keyframe anima background-size, e de 1024 pra baixo o enquadramento e outro ("cover" no tablet, "auto 52%" no celular). Como esta regra vem depois das media queries, sem o min-width ela vencia e desmontava os dois. */ @media (min-width: 1025px) { .hero-photo { animation: kenburns 26s ease-in-out infinite alternate; } } /* anima o background-size, nao o transform: assim o gradiente de fusao do ::after fica parado e o ponto onde a foto se funde ao fundo nao "respira" */ @keyframes kenburns { from { background-size: 110% auto; } to { background-size: 119% auto; } } /* ---------- interacoes ---------- */ .btn, .btn-outline { position: relative; overflow: hidden; transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), background-color .25s ease; } .btn::after { content: ""; position: absolute; inset: 0 auto 0 -60%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.32), transparent); transform: skewX(-18deg); transition: left .6s var(--ease-out); } .btn:hover::after { left: 115%; } .btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,0,0,.24); } .btn:active { transform: translateY(0); } .nav a { position: relative; transition: color .22s ease; } .nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: 100% 50%; transition: transform .3s var(--ease-out); } .nav a:hover::after { transform: scaleX(1); transform-origin: 0 50%; } .pillar, .p-item, .seg-item, .step, .how-step { transition: transform .3s var(--ease-out); } .pillar:hover, .p-item:hover, .seg-item:hover, .step:hover, .how-step:hover { transform: translateY(-4px); } .step-ico, .how-ico, .p-ico, .s-ico { transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out); } .step:hover .step-ico { transform: scale(1.08) rotate(-5deg); box-shadow: 0 10px 22px rgba(0,0,0,.22); } .how-step:hover .how-ico { transform: scale(1.1); border-color: var(--blue); } .seg-item:hover .s-ico { transform: scale(1.14); color: var(--blue); } .pillar:hover .p-ico { transform: translateY(-3px) scale(1.06); } .about-photo img { transition: transform 1.1s var(--ease-out); } .about-photo:hover img { transform: scale(1.45); } .check-list li { transition: transform .25s var(--ease-out); } .check-list li:hover { transform: translateX(5px); } .footer a { transition: color .2s ease, transform .2s var(--ease-out); display: inline-block; } .footer a:hover { color: #fff; transform: translateX(3px); } .btn-ghost-play .play { transition: transform .3s var(--ease-out), background-color .3s ease; } .btn-ghost-play:hover .play { transform: scale(1.14); } /* ========================================================= CAMADA 2 DE ANIMACAO Tudo aqui e acionado pelo JS (classes .js / .in / .viva). Sem JS nada disso existe e a pagina fica estatica e legivel. ========================================================= */ /* ---------- 1. titulos palavra a palavra ---------- */ /* nada de overflow:hidden como mascara: em portugues os acentos sobem acima da caixa da letra e seriam cortados. */ .js .pal { display: inline-block; opacity: 0; transform: translateY(.42em); transition: opacity .62s var(--ease-out), transform .62s var(--ease-out); transition-delay: var(--pd, 0ms); } .js .pal-blur { filter: blur(7px); transition: opacity .62s var(--ease-out), transform .62s var(--ease-out), filter .62s var(--ease-out); } .js .in .pal, .js .pal.in { opacity: 1; transform: none; filter: none; } /* ---------- 2. icones que se desenham ---------- */ /* stroke-dasharray e herdada, entao vazar do

, e com um seletor de classe unica a regra acima vencia — o titulo saia cinza e no tamanho do corpo. */ .cookies .cookies-titulo { color: #fff; font-size: .92rem; font-weight: 700; letter-spacing: -.01em; margin-bottom: 6px; line-height: 1.35; } .cookies a { color: var(--t-light); text-decoration: underline; text-underline-offset: 2px; transition: color .2s ease; } .cookies a:hover { color: #fff; } .cookies button { flex: none; padding: 13px 26px; border-radius: 9px; min-height: 46px; background: var(--red); color: #fff; font-family: inherit; font-weight: 700; font-size: .86rem; transition: background .2s ease, transform .2s var(--ease-out); } .cookies button:hover { background: var(--red-dark); transform: translateY(-2px); } .cookies button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } @media (max-width: 680px) { .cookies { flex-direction: column; align-items: stretch; gap: 14px; } .cookies button { width: 100%; } } /* ========================================================= ANIMACAO FORCADA Antes este trecho era um @media (prefers-reduced-motion: reduce) com "* { transition: none !important; animation: none !important }". Quem tem "reduzir movimento" ligado no sistema (no Windows e a opcao "Mostrar animacoes no Windows", em Facilidade de Acesso) NAO via animacao nenhuma: nem abertura, nem rolagem, nem entrada. A pedido do cliente a pagina agora anima sempre, independente dessa preferencia. Para voltar a respeita-la, basta reintroduzir o @media aqui e as guardas de matchMedia no index.html. ========================================================= */