/* ============================================================ ASTUNTS CONTENT — sistema de design ------------------------------------------------------------ Decisão central sobre a "tensão pastel vs. sóbrio": a Nominal (referência) NÃO é um site de alto contraste saturado. O fundo dela é #FDFFF8 (off-white quente, praticamente o #F8F8EC da Astunts) e os acentos dela são chips pastel de 8-48px em menta, rosa, amarelo e roxo — a mesma família da paleta Astunts. Logo: não há tensão a resolver na cor. A regra é a disciplina de ESCALA. Pastel só vive em chips, tiles, marcadores e underlines. Nenhuma área chapada grande. Contraste vem de INVERSÃO de seção (#F8F8EC -> #363636), nunca de saturação. A tensão real é tipográfica: Oswald 700 caixa alta é condensado e duro onde a Nominal usa serif light 300. Compensado com respiro generoso, tracking levemente aberto e corpo Roboto 300. ============================================================ */ :root{ /* marca */ --yellow:#F8EA77; --blue:#B9E2F8; --coral:#F59075; --pink:#FDBDBF; --purple:#C5BDFD; --green:#94EDCC; --bg:#F8F8EC; --ink:#363636; --muted:#6B6B6B; /* derivados */ --bg-2:#F2F1E2; /* faixa levemente recuada */ --line:rgba(54,54,54,.16); /* hairline sobre claro */ --line-2:rgba(54,54,54,.08); --line-dark:rgba(248,248,236,.20); /* hairline sobre escuro */ --line-dark-2:rgba(248,248,236,.09); --ink-soft:rgba(54,54,54,.55); --wipe:var(--ink); /* cor do bloco do word-reveal */ --r:8px; /* raio único de canto */ --container:1360px; --gutter:clamp(20px,5vw,48px); /* PADRÃO ÚNICO de respiro vertical das seções, em todas as páginas. Era 144px (vão de 288px entre conteúdos, grande demais). Este valor dá um vão de ~150-215px, o ritmo aprovado na página do Content. Mexer AQUI muda o site inteiro de uma vez: é esse o objetivo. */ --pad-sec:clamp(44px,6vw,76px); --ease:cubic-bezier(.22,1,.36,1); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--bg); color:var(--muted); font-family:'Roboto',system-ui,sans-serif; font-weight:400; /* Regular, não Light */ font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; /* overflow-x:CLIP e nao hidden: no Chrome/Edge/Safari mobile, overflow-x:hidden no body transforma o body em contexto de rolagem/recorte e o header position:fixed passa a ser recortado durante o mostra/esconde da barra de endereco do navegador (aparecia "cortado pela metade" ao rolar para baixo e se corrigia ao rolar para cima). overflow-x:clip corta o transbordo horizontal SEM criar esse contexto, entao o fixed volta a ancorar na viewport e o header nao corta mais. */ overflow-x:clip; } img{max-width:100%; height:auto; display:block} /* height:auto e obrigatorio: sem ele o atributo height do HTML vence o max-width e a imagem estica */ a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} /* ---------- tipografia ---------- */ /* REGRA DE MARCA: onde houver Oswald, há CAIXA ALTA. Se você adicionar um componente novo com Oswald, acrescente o seletor aqui. HONESTIDADE SOBRE ESTA LISTA: ela dizia "cobre todo uso de Oswald no arquivo". Não cobria. Uma auditoria em tempo de execução (varrer o DOM das 15 páginas atrás de fontFamily~Oswald com textTransform!==uppercase) achou UMA exceção real e viva: .bnum small — o "por mês" e o "dias" dos cards da seção bento do astunts-content.html. Oswald, caixa baixa, no ar. Ela ficou de fora DE PROPÓSITO e não por descuido: o Content foi ratificado como padrão visual do site, e trocar "por mês" por "POR MÊS" é uma decisão de design de quem é dono da marca — não de quem está arrumando o mobile. Enquanto não houver decisão, a exceção fica registrada aqui em vez de fingir que não existe. Como refazer a auditoria (é barata e não mente): [...document.querySelectorAll('*')].filter(function(e){ var s=getComputedStyle(e); return /Oswald/i.test(s.fontFamily) && s.textTransform!=='uppercase' && !e.children.length && e.textContent.trim(); }) */ h1,h2,h3,h4,.ffo,.eyebrow,.chip,.btn,.nav-cta,.brand,.nav-links a, .np-top,.np-grp h5,.canal .cfb, .node .n-k,.node .n-t,.marq-label,.marq-track span, .mod-k .kk,.mod-list li b,.cmp thead th,.cmp td:first-child,.cmp td[data-h]::before, .pcard .flag,.pcard .amount,.pcard .amount .cur,.nx .num,.lbl,.lbl .num, .scard .badge,.steps-mobile .sm-k, .qa-sol,.qa-repl-k,.qa-cta,.cap-t,.pile-chip,.pile-brand,.pile-note, .tstm-logo,.tstm-stat b,.hate-foot a,.cf-label, .logostrip-lab,.fact b,.value .vn,.member .nm,.member .av,.job-t, .case-tag,.case-num,.case-au,.post-cat,.cway-k,.art-cat,.art-back,.job-toc-t,.share-t,.job-toc-mais, .foot-col h4,.foot-legal a{ text-transform:uppercase; } h1,h2,h3,h4,.ffo{ font-family:'Oswald',sans-serif; font-weight:700; color:var(--ink); margin:0; line-height:1.02; letter-spacing:.005em; } h1{font-size:clamp(2.6rem,6.6vw,5.6rem); line-height:.98; letter-spacing:-.005em} h2{font-size:clamp(2rem,4.2vw,3.5rem)} h3{font-size:clamp(1.15rem,1.7vw,1.5rem); letter-spacing:.02em} p{margin:0} .eyebrow{ font-family:'Oswald',sans-serif; font-weight:500; text-transform:uppercase; font-size:12px; letter-spacing:.16em; color:var(--ink-soft); } .lead{font-size:clamp(1.05rem,1.35vw,1.25rem); line-height:1.6; color:var(--muted)} .small{font-size:14px; line-height:1.6} .measure{max-width:62ch} .measure-s{max-width:46ch} /* ---------- layout ---------- */ .container{width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter)} section{position:relative} .sec{padding-block:var(--pad-sec)} /* (O override que existia aqui só para a página do Content virou o padrão global em --pad-sec, lá no topo. Sem exceção por página.) */ .rule{height:1px; background:var(--line); width:100%; transform-origin:left center} .dark .rule{background:var(--line-dark)} /* ---------- primitivas de motion ---------- */ /* block-wipe word reveal — o gesto assinatura da referência */ .w{position:relative; display:inline-block; white-space:pre} .w-in{display:inline-block} /* Destaque amarelo — medido do exemplo em dezetoro.pt/astunts5: span com padding 0 10.8px sobre tipo de 60px (= .18em), position:relative, z-index:1; e um ::before absoluto inset:0, z-index:-1, com transform: matrix(0.99961,-0.0279216,-0.0244657,1.00107,0,0) — que decompõe exatamente em rotate(-1.6deg) skewX(-3deg). Aqui a faixa é um elemento real (.w-hl) e não um ::before, porque o GSAP precisa animar a escala dela junto com o block-wipe; rotação e skew vão no próprio tween para não brigarem com o scaleX. O z-index:1 no .w.hl cria contexto de empilhamento: é ele que segura a faixa em z-index:-1 atrás da palavra sem cair atrás da página. */ .w.hl{padding-inline:.18em; z-index:1} .w.hl .w-in{color:var(--ink)} /* Por que não inset:0 como no exemplo: lá o line-height é 1.2, aqui é .98. Medido no Oswald 700 deste H1, dentro da caixa de .98em da linha: glifos da linha de cima terminam em -0.008em (colados no topo) topo dos glifos desta linha ....... 0.135em baseline .......................... 0.961em glifos da linha de baixo começam em 1.115em Com inset:0 a faixa cobria de 0 a .98em e invadia os .135em acima da letra — que é exatamente onde mora a linha de cima. Estes valores a descem para dentro da janela livre (~.02em a ~1.09em) sem mexer no line-height. São em em: acompanham o clamp() do título. */ .w-hl{position:absolute; left:0; right:0; top:.14em; bottom:.01em; background:var(--yellow); z-index:-1; pointer-events:none} .w-bl{position:absolute; top:.06em; bottom:.04em; left:-.02em; right:-.02em; background:var(--wipe); transform:scaleX(0); transform-origin:left center; pointer-events:none} .dark .w-bl{background:#E9EBE1} .fade-up{will-change:transform,opacity} /* ---------- chips / pastilhas ---------- */ .chip{ display:inline-flex; align-items:center; gap:9px; font-family:'Oswald',sans-serif; font-weight:500; text-transform:uppercase; font-size:11.5px; letter-spacing:.1em; color:var(--ink); border:1px solid var(--line); border-radius:999px; padding:7px 14px 7px 10px; background:var(--bg); } .dot{width:9px; height:9px; border-radius:2px; flex:none} .tile{width:44px; height:44px; border-radius:var(--r); display:grid; place-items:center; flex:none} .tile svg{width:20px; height:20px; stroke:var(--ink); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round} /* ---------- botões ---------- */ .btn{ display:inline-flex; align-items:center; gap:10px; font-family:'Oswald',sans-serif; font-weight:500; text-transform:uppercase; font-size:13px; letter-spacing:.11em; background:var(--green); color:var(--ink); /* verde e o estado NORMAL */ padding:15px 24px; border-radius:var(--r); position:relative; overflow:hidden; isolation:isolate; transition:color .35s var(--ease); } .btn::before{ content:''; position:absolute; inset:0; background:var(--green-2); z-index:-1; transform:scaleY(0); transform-origin:bottom center; transition:transform .42s var(--ease); } .btn:hover{color:var(--ink)} /* o texto ja e ink: o hover so fecha o verde */ .btn:hover::before{transform:scaleY(1); transform-origin:top center} .btn .arw{transition:transform .42s var(--ease)} .btn:hover .arw{transform:translateX(4px)} .btn-ghost{background:transparent; color:var(--ink); border:1px solid var(--line)} .btn-ghost::before{background:var(--green)} .btn-ghost:hover{color:var(--ink)} .dark .btn{background:var(--green); color:var(--ink)} .dark .btn::before{background:var(--green-2)} /* ============ NAV ============ */ /* ============================================================ HEADER — reconstrução de landinstitute.org ------------------------------------------------------------ Medido lá: fixed, 111px = aviso (43) + linha de nav (65). Logo em BLOCO próprio de 148x109 com fundo sólido. CTA como bloco de altura cheia, SEM raio de canto (border-radius 0). Nav de SITE, com "+" nos itens que abrem mega. O header agora é OPACO desde o topo — a referência é. O .nav.scrolled (fundo que aparecia no scroll) perdeu a função, mas fica: ele ainda dá a hairline de baixo quando a página rola. ============================================================ */ .nav{ position:fixed; top:0; left:0; right:0; z-index:60; background:var(--bg); /* a hairline é PERMANENTE: o header é opaco e sem ela ele encosta no conteúdo sem fronteira. Era condicionada ao .scrolled, herança de quando o header nascia transparente sobre o hero. */ border-bottom:1px solid var(--line); } /* --- barra de aviso (43px na referência) --- */ .topbar{background:var(--purple); color:var(--ink)} /* grid 1fr auto 1fr: o texto fica no centro REAL da página. Com flex + space-between ele era empurrado para a esquerda pela largura do X. A coluna fantasma da esquerda equilibra o botão da direita. */ /* texto e X JUNTOS, centralizados como grupo. Antes o X ficava colado na borda direita (grid 1fr auto 1fr) — ficava longe da frase que ele fecha. */ .topbar-in{display:flex; align-items:center; justify-content:center; gap:10px; min-height:43px} .topbar p{text-align:center} .topbar p{font-size:13.5px; letter-spacing:-.01em} .topbar a{border-bottom:1px solid rgba(54,54,54,.4); font-weight:500} .topbar a:hover{border-bottom-color:var(--ink)} .topbar-x{font-size:20px; line-height:1; padding:4px 8px; color:var(--ink); opacity:.55; flex:none} .topbar-x:hover{opacity:1} /* --- linha do nav (65px na referência) --- */ /* min-height acompanha o brasão: 80 + 12 de respiro em cima e embaixo. No sticky volta aos 65px medidos na referência. */ .nav-row{display:flex; align-items:stretch; min-height:104px; padding-left:var(--gutter); transition:min-height .35s var(--ease); position:relative} .nav.scrolled .nav-row{min-height:65px} /* MENU CENTRALIZADO no header: o .nav-mid sai do fluxo e é centralizado no eixo horizontal da barra inteira (não só do espaço entre logo e ações). O cluster da direita (busca, idioma, CTA) é empurrado para a borda com margin-left:auto na busca, já que o .nav-mid não ocupa mais espaço no flex. */ .nav-mid{position:absolute; left:50%; top:0; bottom:0; transform:translateX(-50%); display:flex; align-items:stretch} .nav-search{margin-left:auto} /* marca: logo em imagem, com wordmark em texto como fallback se o arquivo não estiver na pasta (ver .brand-fallback no fim do arquivo) */ /* o logo é um BLOCO, não um link solto: é o gesto da referência (lá o bloco tem fundo próprio e atravessa as duas linhas do header). */ /* BRASÃO, não wordmark: azul2.png é o "a" num bloco azul — que é exatamente o gesto da referência (lá o logo é um brasão dentro de um bloco próprio, atravessando as duas linhas do header). */ .brand{display:flex; align-items:center; gap:10px; color:var(--ink); flex:none; padding-right:clamp(16px,2vw,28px)} .brand img{height:80px; width:80px; border-radius:12px; display:block; transition:height .35s var(--ease), width .35s var(--ease), border-radius .35s var(--ease)} /* HEADER STICKY: ao rolar, o brasão volta a 40px e o header encolhe junto. O .scrolled já era ligado pelo app.js (scrollY > 24) e tinha ficado sem uso quando a hairline virou permanente — agora ele volta a ter função. */ .nav.scrolled .brand img{height:40px; width:40px; border-radius:7px} .brand-fallback{font-family:'Oswald',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.02em; font-size:19px; color:var(--ink); display:none} .nav-links{display:flex; gap:clamp(14px,2vw,30px); align-items:stretch} .nav-item{display:flex; align-items:stretch} .nav-item > a{display:flex; align-items:center; gap:7px} /* o "+" indica mega, como na referência. Vira "−" quando o painel abre. */ .nav-plus{position:relative; width:9px; height:9px; flex:none; opacity:.6} .nav-plus::before, .nav-plus::after{content:''; position:absolute; left:50%; top:50%; background:currentColor; transform:translate(-50%,-50%)} .nav-plus::before{width:9px; height:1.2px} .nav-plus::after{width:1.2px; height:9px; transition:transform .3s var(--ease), opacity .2s} .nav-item.on .nav-plus::after{opacity:0} .nav-item.on > a{color:var(--ink)} .nav-links a{ font-family:'Oswald',sans-serif; font-weight:400; text-transform:uppercase; font-size:12px; letter-spacing:.11em; color:var(--ink-soft); position:relative; padding-block:4px; transition:color .3s } .nav-links a::after{content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--ink); transform:scaleX(0); transform-origin:right center; transition:transform .4s var(--ease)} .nav-links a:hover{color:var(--ink)} .nav-links a:hover::after{transform:scaleX(1); transform-origin:left center} @media(max-width:1300px){ .nav-links{display:none} } /* ============ HERO ============ */ /* padding-top = altura real do header + respiro. Era 150px fixo, calculado para o header de 68px; com o header novo (111px) o hero ficava apertado embaixo dele. --nav-h vem do app.js. */ /* --nav-h0, e NAO --nav-h: o header encolhe ao rolar, entao --nav-h muda de ~147 para ~108 assim que o scroll passa de 24px. Se o hero dependesse dele, o conteudo PULARIA 40px no primeiro toque de scroll. --nav-h0 e a altura do header nao-encolhido, que e o estado em que o hero e visto. */ .hero{padding-top:calc(var(--nav-h0,147px) + clamp(40px,5vw,80px)); padding-bottom:clamp(60px,8vw,110px); position:relative; overflow:hidden} .hero-in{text-align:center; position:relative; z-index:2} .hero h1{max-width:16ch; margin-inline:auto} .hero .lead{max-width:56ch; margin:26px auto 0} .hero .cta{margin-top:34px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap} .hero-eyebrow{display:inline-block; margin-bottom:26px} /* pastilhas flutuantes com profundidade (blur = distância) */ .floaters{position:absolute; inset:0; z-index:1; pointer-events:none} .fl{position:absolute; opacity:0; will-change:transform} .fl .chip{box-shadow:0 1px 0 rgba(54,54,54,.03)} .fl[data-depth="far"]{filter:blur(3.5px); opacity:0} @media(max-width:900px){ .fl.hide-m{display:none} } /* diagrama esquemático do hero (NÃO é screenshot do produto — ver nota no fim do arquivo) */ .schema{margin-top:clamp(48px,7vw,84px); border:1px solid var(--line); border-radius:var(--r); background:#FDFCF3; padding:clamp(18px,3vw,34px); position:relative} .schema-head{display:flex; align-items:center; justify-content:space-between; padding-bottom:16px; border-bottom:1px solid var(--line-2); margin-bottom:22px} .schema-flow{display:grid; grid-template-columns:repeat(4,1fr); gap:0; align-items:stretch} .node{padding:20px 18px; border-left:1px solid var(--line-2); position:relative} .node:first-child{border-left:0} .node .n-k{font-family:'Oswald',sans-serif; font-weight:500; font-size:11px; letter-spacing:.14em; color:var(--ink-soft); display:flex; align-items:center; gap:8px} .node .n-t{font-family:'Oswald',sans-serif; font-weight:700; text-transform:uppercase; color:var(--ink); font-size:15px; letter-spacing:.02em; margin-top:14px} .node .n-d{font-size:13px; margin-top:7px; line-height:1.55} .node .bar{height:4px; border-radius:2px; margin-top:18px; transform-origin:left center; transform:scaleX(0)} @media(max-width:760px){ .schema-flow{grid-template-columns:1fr} .node{border-left:0; border-top:1px solid var(--line-2)} .node:first-child{border-top:0} } /* mobile: ocultar a seção "O que a Astunts não é" (#stmt) e o bloco de onboarding (.onb) — Content e Chat */ @media(max-width:900px){ #stmt{display:none!important} .onb{display:none!important} } /* ============ MARQUEE canais ============ */ /* sem border-block e sem .marq-label a pedido: a faixa passa a ser so o movimento dos canais, sem rotulo e sem as duas hairlines que a fechavam. O margin-left do .marq-track existia para separar do rotulo — zerado junto, senao a faixa comeca com um buraco. */ .marq{padding-block:22px; overflow:hidden; display:flex; align-items:center; gap:0} .marq-label{flex:none; padding-inline:var(--gutter); border-right:1px solid var(--line); font-family:'Oswald',sans-serif; font-weight:500; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); white-space:nowrap} .marq-track{display:flex; gap:64px; white-space:nowrap; will-change:transform; margin-left:0} .marq-track span{font-family:'Oswald',sans-serif; font-weight:500; text-transform:uppercase; font-size:15px; letter-spacing:.2em; color:rgba(54,54,54,.34); display:inline-flex; align-items:center; gap:12px} /* ============ PROBLEMA — 3 colunas com hairline ============ */ .head-block{max-width:900px} .head-block h2{margin-top:18px} .cols3{display:grid; grid-template-columns:repeat(3,1fr); margin-top:clamp(48px,6vw,80px); border-top:1px solid var(--line)} .cols3 .col{padding:40px 34px 8px; border-left:1px solid var(--line)} .cols3 .col:first-child{border-left:0; padding-left:0} .cols3 .col:last-child{padding-right:0} .col h3{margin:22px 0 12px} @media(max-width:900px){ .cols3{grid-template-columns:1fr} .cols3 .col{border-left:0; border-top:1px solid var(--line); padding:34px 0 8px} .cols3 .col:first-child{border-top:0} } /* ============ SOLUÇÃO ============ */ .sol{text-align:center} .sol h2{max-width:14ch; margin:20px auto 0; font-size:clamp(2.2rem,5vw,4.2rem)} .sol .lead{max-width:58ch; margin:28px auto 0} .claims{display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:clamp(48px,6vw,76px); border-top:1px solid var(--line); border-bottom:1px solid var(--line)} .claim{padding:34px 26px; border-left:1px solid var(--line); text-align:left; display:flex; gap:16px; align-items:flex-start} .claim:first-child{border-left:0} .claim .ffo{font-size:14px; letter-spacing:.03em; line-height:1.35} .claim .u{display:block; height:6px; width:34px; margin-top:12px; transform-origin:left center; transform:scaleX(0)} @media(max-width:900px){ .claims{grid-template-columns:1fr} .claim{border-left:0; border-top:1px solid var(--line)} .claim:first-child{border-top:0} } /* ============ COMO FUNCIONA — seção escura, pin + zoom concêntrico ============ */ .dark{background:#363636; color:rgba(248,248,236,.62)} .dark h1,.dark h2,.dark h3,.dark .ffo{color:#F8F8EC} .dark .eyebrow{color:rgba(248,248,236,.5)} .dark .chip{color:#F8F8EC; border-color:var(--line-dark); background:transparent} /* ---- COMPONENTES SOBRE FUNDO ESCURO ------------------------------------ A primeira secao de cada pagina interna virou .dark. Estes componentes foram desenhados so para fundo claro: texto cinza-escuro sumia e as divisorias (var(--line), quase branca) ficavam invisiveis. */ .dark .lead, .dark .story-txt p, .dark .cols3 .col > p{color:rgba(248,248,236,.62)} .dark .cols3{border-top-color:var(--line-dark)} .dark .cols3 .col{border-left-color:var(--line-dark)} .dark .story + .story{border-top-color:var(--line-dark)} .dark .post-meta{color:rgba(248,248,236,.5)} .dark .post:hover h3{color:var(--yellow)} .dark .story-fig{background:rgba(248,248,236,.06)} /* O .case tem fundo claro proprio, entao por dentro dele o texto volta a ser escuro. Sem isto o card vira creme com letra creme. */ .dark .case, .dark .case h3, .dark .case-q{color:var(--ink)} .dark .case-d{color:var(--muted)} .steps{--wipe:#E9EBE1} .steps-pin{height:100vh; min-height:640px; position:relative; overflow:hidden; display:grid; place-items:center} .stage{position:absolute; inset:0; will-change:transform} /* centragem à prova de bala: inset 0 + margin auto com width/height fixos */ .frame{position:absolute; inset:0; margin:auto; border:1px solid var(--line-dark-2); border-radius:var(--r); pointer-events:none} /* molduras concêntricas: cada passo "entra" uma camada */ .frame[data-f="0"]{width:min(1180px,86vw); height:min(660px,64vh)} .frame[data-f="1"]{width:min(886px,64.5vw); height:min(495px,48vh)} .frame[data-f="2"]{width:min(640px,46.5vw); height:min(358px,34.7vh)} .frame[data-f="3"]{width:min(432px,31.4vw); height:min(242px,23.4vh)} .steps-title{position:absolute; z-index:3; text-align:center; pointer-events:none; left:50%; top:50%; transform:translate(-50%,-50%); width:min(90vw,900px)} .steps-title h2{font-size:clamp(2rem,4.4vw,3.4rem)} .lbl{position:absolute; z-index:4; display:flex; align-items:center; gap:9px; white-space:nowrap; font-family:'Oswald',sans-serif; font-weight:500; text-transform:uppercase; font-size:12px; letter-spacing:.1em; color:rgba(248,248,236,.34); transition:color .45s var(--ease)} .lbl .sq{width:10px; height:10px; border-radius:2px; opacity:.35; transition:opacity .45s var(--ease), transform .45s var(--ease)} .lbl.on{color:#F8F8EC} .lbl.on .sq{opacity:1; transform:scale(1.25)} .lbl .num{font-size:10px; letter-spacing:.14em; opacity:.5} .cards-abs{position:absolute; inset:0; z-index:5; pointer-events:none} .scard{ position:absolute; top:50%; width:min(430px,40vw); right:max(calc((100vw - var(--container))/2 + var(--gutter)),var(--gutter)); background:#3B3B3B; box-shadow:0 0 0 1px rgba(248,248,236,.10), 0 30px 60px rgba(0,0,0,.28); border-radius:var(--r); padding:26px 26px 22px; opacity:0; } /* ILUSTRAÇÕES PROVISÓRIAS — ver nota no fim do arquivo. A arte é quadrada, então a faixa usa contain e a deixa centrada sobre uma placa no pastel do próprio passo. Quando entrar a arte definitiva, é só sobrescrever img/passo-0X-provisoria.png. */ .scard-fig{margin:-26px -26px 22px; height:150px; border-radius:var(--r) var(--r) 0 0; display:grid; place-items:center; overflow:hidden} .scard-fig img{height:132px; width:auto; object-fit:contain; transition:transform .6s var(--ease)} .scard:hover .scard-fig img{transform:scale(1.05)} .scard .top{display:flex; align-items:flex-start; justify-content:space-between; gap:16px} .scard h3{font-size:1.5rem} .scard .badge{font-family:'Oswald',sans-serif; font-weight:700; font-size:11px; letter-spacing:.1em; color:#363636; padding:4px 8px; border-radius:var(--r)} .scard p{margin-top:12px; font-size:14.5px; line-height:1.6; color:rgba(248,248,236,.62)} .scard ul{list-style:none; margin:20px 0 0; padding:0} .scard li{display:flex; align-items:center; gap:10px; padding:11px 0; border-top:1px solid var(--line-dark-2); font-size:13.5px; color:rgba(248,248,236,.86)} .scard li .tick{width:6px; height:6px; border-radius:1px; flex:none} /* glifo central line-art — único item em fluxo dentro do grid centralizado */ .glyph{position:relative; z-index:2; opacity:0} .glyph svg{width:min(320px,26vw); height:auto; stroke:rgba(248,248,236,.42); fill:none; stroke-width:1; overflow:visible} /* fallback mobile da seção (lista vertical, sem pin) */ .steps-mobile{display:none} .steps-mobile .sm{padding:34px 0; border-top:1px solid var(--line-dark-2)} .sm-fig{height:132px; border-radius:var(--r); display:grid; place-items:center; overflow:hidden; margin-bottom:22px} .sm-fig img{height:116px; width:auto; object-fit:contain} .steps-mobile .sm:first-child{border-top:0} .steps-mobile .sm-k{display:flex; align-items:center; gap:10px; font-family:'Oswald',sans-serif; font-weight:500; font-size:11.5px; letter-spacing:.12em; color:rgba(248,248,236,.5); text-transform:uppercase} .steps-mobile h3{margin:14px 0 10px} .steps-mobile ul{list-style:none; margin:16px 0 0; padding:0} .steps-mobile li{display:flex; gap:10px; align-items:center; padding:9px 0; border-top:1px solid var(--line-dark-2); font-size:13.5px; color:rgba(248,248,236,.82)} .steps-mobile li .tick{width:6px;height:6px;border-radius:1px;flex:none} @media(max-width:900px){ .steps-pin{display:none} .steps-mobile{display:block} } /* ============ MÓDULOS ============ */ .mods{border-top:1px solid var(--line)} .mod{border-bottom:1px solid var(--line); padding-block:clamp(34px,4.5vw,54px); display:grid; grid-template-columns:minmax(180px,1fr) minmax(0,1.15fr) minmax(0,1.3fr); gap:clamp(20px,4vw,56px); align-items:start; position:relative} .mod::after{content:''; position:absolute; left:calc(var(--gutter)*-1); right:calc(var(--gutter)*-1); top:0; bottom:0; background:var(--mod-tint,transparent); opacity:0; transition:opacity .5s var(--ease); pointer-events:none; z-index:-1} .mod:hover::after{opacity:.28} .mod-k{display:flex; align-items:center; gap:12px} .mod-k .kk{font-family:'Oswald',sans-serif; font-weight:500; font-size:11px; letter-spacing:.13em; color:var(--ink-soft); text-transform:uppercase} .mod h3{font-size:clamp(1.5rem,2.6vw,2.1rem); letter-spacing:.01em} .mod-sub{display:block; margin-top:12px} /* Ilustração acima do texto de cada módulo. Mesma linguagem da faixa dos cards dos 4 passos: placa no pastel do próprio módulo, arte quadrada centrada com contain. Ver nota 4c no fim do arquivo — são provisórias. */ .mod-fig{height:150px; border-radius:var(--r); display:grid; place-items:center; overflow:hidden; margin:0 0 20px} .mod-fig img{height:132px; width:auto; object-fit:contain; transition:transform .6s var(--ease)} .mod:hover .mod-fig img{transform:scale(1.05)} .mod-list{list-style:none; margin:0; padding:0; columns:2; column-gap:28px} /* rótulo em cima, descrição embaixo, tudo alinhado à esquerda. (era flex lado a lado: o texto quebrava pendurado sob a 1ª linha) Hairline em TODOS os itens: com columns:2 não dá para saber qual item abre a 2ª coluna sem depender da contagem — 6 itens quebram no 4º, 4 itens quebram no 3º. Linha em todos é simétrico e robusto. */ .mod-list li{break-inside:avoid; padding:11px 0; border-top:1px solid var(--line-2); font-size:13.5px; line-height:1.5} .mod-list li b{display:block; margin-bottom:4px; font-family:'Oswald',sans-serif; font-weight:500; font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink)} @media(max-width:1040px){ .mod{grid-template-columns:1fr} .mod-list{columns:1} } /* ============ COMPARATIVO ============ */ /* Painel branco atras do comparativo. #FFFFFF e a UNICA excecao de branco puro no site — toda outra superficie elevada usa #FDFCF3. Testei o creme aqui e o painel some contra o fundo #F2F1E2 da faixa; o salto para o branco e o que faz a tabela ler. Ela e a peca mais argumentativa da pagina, entao vale a excecao. Uma so. */ .cmp-card{background:#FFF; border-radius:var(--r); margin-top:clamp(40px,5vw,64px); padding:clamp(20px,2.4vw,34px) clamp(16px,2vw,28px); box-shadow:0 1px 2px rgba(54,54,54,.05), 0 22px 48px rgba(54,54,54,.09)} .cmp{width:100%; border-collapse:collapse; font-size:14.5px} /* Contraste: "Nao" estava em .42 = 2.30:1 sobre branco, reprovado (min 4.5). .68 da 4.54:1 e passa, sem perder a hierarquia contra os "Sim". */ .cmp-card .v-no{color:rgba(54,54,54,.68)} /* valor neutro na tabela comparativa: capacidade pertence ao outro produto */ .cmp-card .v-na{color:rgba(54,54,54,.42)} .cmp-card .v-na i{background:rgba(54,54,54,.18)} .cmp-card .v-no i{background:rgba(54,54,54,.3)} .cmp-card thead th{color:rgba(54,54,54,.72)} .cmp th,.cmp td{padding:18px 20px; text-align:left; border-top:1px solid var(--line)} .cmp thead th{border-top:0; border-bottom:1px solid var(--ink); font-family:'Oswald',sans-serif; font-weight:500; text-transform:uppercase; font-size:11px; letter-spacing:.12em; color:var(--ink-soft); vertical-align:bottom} .cmp thead th.us{color:var(--ink); font-weight:700; font-size:13px} .cmp td:first-child{color:var(--ink); font-family:'Oswald',sans-serif; font-weight:400; text-transform:uppercase; font-size:12.5px; letter-spacing:.06em} .cmp .us{background:rgba(148,237,204,.14)} .cmp tbody .us{color:var(--ink); font-weight:400} .v{display:inline-flex; align-items:center; gap:8px} .v i{width:7px; height:7px; border-radius:1px; flex:none; font-style:normal} .v-no i{background:rgba(54,54,54,.16)} .v-no{color:rgba(54,54,54,.42)} .v-maybe i{background:var(--yellow)} .v-yes i{background:var(--green)} @media(max-width:820px){ .cmp thead{display:none} .cmp tr{display:grid; grid-template-columns:1fr; border-top:1px solid var(--line); padding-block:6px} .cmp td{border:0; padding:6px 0; display:grid; grid-template-columns:1fr auto; gap:12px} .cmp td:first-child{padding-top:14px} .cmp td[data-h]::before{content:attr(data-h); font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-family:'Oswald',sans-serif; color:var(--ink-soft)} .cmp .us{background:transparent} .cmp .us[data-h]::before{color:var(--ink)} } /* ============ PREÇO ============ */ .price-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,72px); margin-top:clamp(44px,5vw,68px); align-items:start} .incl{list-style:none; margin:0; padding:0; columns:2; column-gap:32px} .incl li{break-inside:avoid; display:flex; gap:11px; align-items:baseline; padding:11px 0; border-top:1px solid var(--line-2); font-size:14.5px} .incl li:first-child,.incl li:nth-child(6){border-top:0} .incl .tick{width:7px; height:7px; border-radius:1px; background:var(--green); flex:none; transform:translateY(-1px)} .pcard{background:var(--ink); color:rgba(248,248,236,.62); border-radius:var(--r); padding:clamp(28px,3.4vw,40px); position:relative; overflow:hidden} .pcard .flag{display:inline-flex; align-items:center; gap:8px; font-family:'Oswald',sans-serif; font-weight:500; font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:#363636; background:var(--yellow); padding:5px 10px; border-radius:var(--r)} .pcard .amount{font-family:'Oswald',sans-serif; font-weight:700; color:#F8F8EC; font-size:clamp(3rem,5.6vw,4.6rem); line-height:1; margin-top:26px; display:flex; align-items:baseline; gap:8px; letter-spacing:-.01em} .pcard .amount .cur{font-size:.34em; font-weight:500; letter-spacing:.06em; color:rgba(248,248,236,.55)} .pcard .per{margin-top:14px; font-size:14px; color:rgba(248,248,236,.62)} .pcard .pay{margin-top:22px; padding-top:20px; border-top:1px solid var(--line-dark-2); font-size:13.5px; color:rgba(248,248,236,.7)} .pcard .btn{margin-top:26px; width:100%; justify-content:center} @media(max-width:900px){ .price-grid{grid-template-columns:1fr} .incl{columns:1} .incl li:nth-child(6){border-top:1px solid var(--line-2)} } /* ============ PRÓXIMOS PASSOS + FAQ ============ */ .next{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); margin-top:clamp(40px,5vw,60px); position:relative} .next .nx{padding:34px 30px 12px; border-left:1px solid var(--line)} .next .nx:first-child{border-left:0; padding-left:0} .nx .num{font-family:'Oswald',sans-serif; font-weight:700; font-size:12px; letter-spacing:.1em; color:var(--ink); width:26px; height:26px; border-radius:var(--r); display:grid; place-items:center} .nx h3{font-size:1.05rem; margin:18px 0 8px} @media(max-width:820px){ .next{grid-template-columns:1fr} .next .nx{border-left:0; border-top:1px solid var(--line); padding:28px 0 10px} .next .nx:first-child{border-top:0} } .faq{margin-top:clamp(56px,7vw,90px); border-top:1px solid var(--line)} .qa{border-bottom:1px solid var(--line)} .qa-q{width:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:24px 0; text-align:left} .qa-q .ffo{font-size:clamp(.95rem,1.5vw,1.15rem); letter-spacing:.03em; transition:color .3s} .qa-q:hover .ffo{color:var(--muted)} .qa-ic{width:22px; height:22px; position:relative; flex:none} .qa-ic::before,.qa-ic::after{content:''; position:absolute; background:var(--ink); transition:transform .45s var(--ease)} .qa-ic::before{left:0; right:0; top:50%; height:1px; margin-top:-.5px} .qa-ic::after{top:0; bottom:0; left:50%; width:1px; margin-left:-.5px} .qa.open .qa-ic::after{transform:scaleY(0)} .qa-a{overflow:hidden; height:0} .qa-a p{padding:0 0 26px; max-width:64ch} /* ============ CTA + FOOTER ============ */ /* padding-bottom ZERO: e o que deixa a figura encostar no rodape. O respiro embaixo vive na coluna de texto (.cta-txt), nao na secao. */ /* padding-top pequeno de proposito: o .cta-wrap e align-items:end e a figura (540px) e mais alta que o bloco de texto (402px), entao a coluna de texto ja nasce ~138px empurrada para baixo. Somado a um padding grande, o espaco acima do eyebrow dava 288px contra 140px do botao ate o rodape. O padding move a linha inteira, entao encolhe-lo NAO mexe nos 140 de baixo (eles vem do padding-bottom do .cta-txt + o align-end). Medido, nao chutado. */ .cta-final{padding-block:var(--pad-sec) 0; border-top:1px solid var(--line)} .cta-final h2{font-size:clamp(2.2rem,5.2vw,4.4rem); max-width:14ch} .cta-wrap{display:grid; grid-template-columns:1fr auto; gap:clamp(30px,5vw,64px); align-items:end} .cta-txt{padding-bottom:clamp(80px,10vw,140px)} /* Sem placa atras: o recorte tem alfa e senta direto no creme, com as hairlines da grade passando por tras dela. Foi o retangulo coral chapado que fazia a versao anterior ler como adesivo colado. */ /* A imagem e 1:1 com so 2.4% de margem transparente no topo — a cabeca comeca quase na borda da caixa. Como ela esta colada embaixo, a altura e que manda: com 460 o topo dela sobe acima do eyebrow. Se a figura ficar mais alta que a coluna de texto, o align-items:end faz a linha crescer e o texto desce junto — a relacao se mantem sozinha em qualquer largura. */ .cta-fig{width:clamp(260px,34vw,540px); align-self:end; line-height:0} /* Imagem um pouco mais alta sem mexer na altura da secao: o transform nao afeta o layout, e a ancora embaixo faz a figura crescer para cima. */ .cta-fig img{width:100%; height:auto; display:block; transform:scale(1.12); transform-origin:bottom center} @media(max-width:820px){ .cta-wrap{grid-template-columns:1fr} .cta-txt{padding-bottom:clamp(40px,8vw,64px)} .cta-fig{width:min(70%,280px); justify-self:center} } /* ============ RODAPÉ ============ Estrutura lida da nominal.so/our-platform/: footer padding-top 72px .top grid [coluna da logo 560px | coluna de links 1241px] links = grid 3 col × 2 linhas de sub-menus, gap 12px entre itens título de coluna 18px/500, link 14px/500, tracking -3% .bottom grid [1fr | 48px], hairline no topo, altura 97px, copyright + legal à esquerda, botão de 48px à direita O que mudei de propósito: · fundo escuro (#363636) em vez de claro — fecha a página com a mesma inversão de contraste da seção "Como funciona", e é o que faz a logo clara da Astunts ter função em vez de ser decoração; · logo ancorada no rodapé da própria coluna (não no topo), maior, com o e-mail e os pastéis da marca abaixo; · títulos de coluna em Oswald caixa alta (regra da marca) em vez do mesmo tipo do link — cria hierarquia sem precisar de peso. */ .foot{background:var(--ink); color:rgba(248,248,236,.62); padding-top:72px} .foot-top{display:grid; grid-template-columns:minmax(260px,.85fr) 2.1fr; gap:clamp(40px,6vw,88px); padding-bottom:clamp(48px,6vw,72px)} .foot-brand{display:flex; flex-direction:column; justify-content:space-between; gap:36px} /* marca do rodapé = o favicon (o "a" no quadrado pastel). Fonte 1062px, então há resolução de sobra em qualquer tamanho aqui. O quadrado já vem rotacionado na arte — não aplicar rotação por CSS. */ /* 80px = a MESMA medida do brasão no header não-encolhido. Era 132px, da época em que o rodapé usava a Azul.png e não havia brasão no topo para combinar. Agora as duas marcas do site têm o mesmo tamanho. */ .foot-logo{display:block; width:80px} .foot-logo img{width:80px; height:80px; border-radius:12px; display:block; transition:transform .5s var(--ease)} .foot-logo:hover img{transform:scale(1.04)} .foot-brand .foot-mail{font-size:14px; color:rgba(248,248,236,.62); transition:color .3s; display:block} .foot-brand .foot-mail:hover{color:#F8F8EC} .foot-cols{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(32px,4vw,48px) 24px} .foot-col h4{font-family:'Oswald',sans-serif; font-weight:500; font-size:12px; letter-spacing:.14em; color:#F8F8EC; margin:0 0 18px} .foot-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px} .foot-col a, .foot-col span{font-size:14px; letter-spacing:-.01em; color:rgba(248,248,236,.62)} .foot-col a{transition:color .3s var(--ease)} .foot-col a:hover{color:#F8F8EC} .foot-bottom{display:grid; grid-template-columns:1fr auto; align-items:center; gap:24px; border-top:1px solid var(--line-dark-2); padding-block:24px} .foot-legal{display:flex; align-items:center; gap:16px; flex-wrap:wrap; font-size:13px; color:rgba(248,248,236,.45)} .foot-legal a{font-family:'Oswald',sans-serif; font-weight:400; font-size:11px; letter-spacing:.1em; color:rgba(248,248,236,.45); transition:color .3s} .foot-legal a:hover{color:#F8F8EC} /* ASSINATURA DA DEZETORO (era o botão "voltar ao topo") */ .dez{position:relative; justify-self:end; display:block; opacity:.6; transition:opacity .3s var(--ease)} .dez:hover{opacity:1} .dez img{width:104px; height:auto; display:block} /* tooltip em ::after: sem JS, sem lib, e o title nativo continua lá como rede de segurança para leitor de tela. */ .dez::after{ content:attr(data-tip); position:absolute; bottom:calc(100% + 10px); right:0; white-space:nowrap; background:var(--bg); color:var(--ink); font-family:'Roboto',sans-serif; font-size:12px; letter-spacing:-.01em; padding:7px 11px; border-radius:var(--r); opacity:0; transform:translateY(4px); pointer-events:none; transition:opacity .25s var(--ease), transform .25s var(--ease); box-shadow:0 8px 24px rgba(0,0,0,.28); } .dez:hover::after, .dez:focus-visible::after{opacity:1; transform:translateY(0)} @media(max-width:900px){ .foot-top{grid-template-columns:1fr; gap:48px} .foot-cols{grid-template-columns:1fr 1fr} .foot-bottom{grid-template-columns:1fr auto; align-items:end} } @media(max-width:520px){ .foot-cols{grid-template-columns:1fr} } /* ============ ILUSTRAÇÕES ============ Regra que apliquei: ilustração é ATMOSFERA, nunca prova. Nenhuma delas afirma nada — não há cliente, número ou depoimento pendurado em cima de pessoa nenhuma. São figuras genéricas da marca. Todas passaram por redimensionamento (pasta img/): os originais somavam 69 MB, o que sozinho mataria a página. */ /* Faixa-manifesto: pina, a imagem respira em escala, o véu fecha e a frase entra com o mesmo block-wipe do resto do site. O véu escuro não é enfeite — a ilustração é clara e ocupada, e é ele que garante contraste de leitura. Sem JS ele já nasce em opacidade cheia, então a frase continua legível com prefers-reduced-motion. */ .stmt{position:relative; height:100vh; min-height:520px; overflow:hidden; border-block:1px solid var(--line)} .stmt-media{position:absolute; inset:0; overflow:hidden} .stmt-media img{width:100%; height:100%; object-fit:cover; object-position:center 38%; will-change:transform} .stmt-scrim{position:absolute; inset:0; background:rgba(54,54,54,.78)} .stmt-in{position:absolute; inset:0; text-align:center} /* Cada frase ocupa o mesmo lugar; a timeline troca uma pela outra. NAO usar ch na largura: o ch resolve contra a fonte DESTE elemento (Roboto 17px), nao contra o Oswald de ~70px do h2 que ele embrulha — com 20ch dava 191px e quebrava a frase (924px numa linha) em seis. */ /* Largura folgada de proposito: a quebra em DUAS linhas e forcada pelo "|" no texto, entao o container so precisa ser largo o bastante para a linha mais longa nao quebrar sozinha uma terceira vez. */ /* 940px não comportava a linha mais longa do Chat ("não caixa de entrada lotada"): ela quebrava sozinha e a frase virava 4 linhas, desalinhando o bloco. A regra é a mesma das duas páginas: no máximo 2 linhas, e quem decide onde quebra é o "|" no texto, não a largura. */ .stmt-phrase{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(94vw,1180px); padding-inline:var(--gutter); opacity:0} /* ATENCAO ao mexer nesta secao: NAO animar filter:blur() aqui. A primeira versao borrava as frases na saida; blur nao e acelerado pelo compositor e cada quadro re-rasteriza uma camada do tamanho da viewport, por cima da imagem em escala e do grao em mix-blend-mode. Use opacidade e transform. */ .stmt h2{font-size:clamp(2rem,5.4vw,4.4rem); line-height:1.18} .stmt .eyebrow{display:block; margin-bottom:22px} @media(max-width:900px){ /* ============================================================ FAIXA-MANIFESTO NO MOBILE ------------------------------------------------------------ O gesto do desktop e "uma frase de cada vez, grande, sobre a imagem" — o pin faz o ritmo. Sem pin, as quatro caiam juntas e gritavam ao mesmo tempo: quatro h2 de 32px empilhados, sem separacao e sem hierarquia. Lia como despejo, nao como manifesto. A traducao do gesto para o celular e uma LISTA: cada frase no seu bloco, separada por hairline (que e como este site separa as coisas em todo lugar), revelada no scroll — o block-wipe ja roda aqui via mm.add('(max-width: 900px)'). Tudo abaixo esta DENTRO da media query: o desktop nao muda. ============================================================ */ .stmt{height:auto; min-height:0} .stmt-in{position:relative; inset:auto; padding-block:clamp(44px,9vw,72px)} .stmt-phrase{position:relative; left:auto; top:auto; transform:none; width:100%; margin-inline:auto; opacity:1; padding-block:clamp(26px,6vw,38px); border-top:1px solid var(--line-dark-2)} .stmt-phrase:first-child{border-top:0; padding-top:0} .stmt-phrase:last-child{padding-bottom:0} /* 32px (o piso do clamp de desktop) obrigava 2-3 linhas por frase e empurrava a secao para fora da tela. 6.4vw = 25px a 390 e devolve as frases a duas linhas curtas. */ .stmt h2{font-size:clamp(1.35rem,6.4vw,2.1rem); line-height:1.14} .stmt .eyebrow{margin-bottom:12px} /* A quebra manual do "|" foi MEDIDA para 4.4rem numa tela larga. A 390px ela cai em lugar arbitrario ("Nao e apenas um / gerador de textos" vira uma linha de 3 palavras e outra de 3). Some no mobile e deixa o texto quebrar sozinho, onde couber. O marcador continua no HTML e continua valendo no desktop — ver splitWords no app.js. */ .stmt-phrase h2 br{display:none} .stmt-icons{position:relative; inset:auto; display:flex; gap:18px; justify-content:center; margin-top:32px} .stmt-ic{position:relative; left:auto!important; right:auto!important; top:auto!important; bottom:auto!important} .stmt-media img{position:fixed} } .persona-fig img, .onb-fig img, .cta-fig img{width:100%; height:auto; display:block} /* ============ CANAIS ============ */ .canais{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(36px,6vw,80px); align-items:center} .canal-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden} .canal{background:var(--bg); padding:clamp(22px,2.6vw,32px); display:flex; flex-direction:column; gap:14px; transition:background .4s var(--ease)} .canal:hover{background:#FDFCF3} .canal img{width:72px; height:72px; display:block; transition:transform .5s var(--ease)} .canal:hover img{transform:scale(1.08) rotate(-3deg)} .canal .cn{font-family:'Oswald',sans-serif; font-weight:700; text-transform:uppercase; font-size:15px; letter-spacing:.03em; color:var(--ink)} .canal .cd{font-size:13px; line-height:1.5} .canal .cfb{display:none; font-family:'Oswald',sans-serif; font-weight:700; font-size:13px; color:var(--ink-soft); width:72px; height:72px; align-items:center; border:1px dashed var(--line); border-radius:var(--r); justify-content:center} @media(max-width:900px){ .canais{grid-template-columns:1fr} } @media(max-width:520px){ .canal-grid{grid-template-columns:1fr} } /* ============ PERSONAS ============ */ .persona{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(36px,5vw,72px); align-items:center} .persona-fig{position:relative} .persona-fig .plate{position:absolute; left:6%; right:6%; top:12%; bottom:0; background:var(--blue); border-radius:var(--r); z-index:0} .persona-fig img{position:relative; z-index:1} /* Foto-persona: mesmo tratamento das fotos de segmento (canto + sombra) */ .persona-fig-photo img{aspect-ratio:1/1; object-fit:cover; border-radius:var(--r); box-shadow:0 30px 60px rgba(0,0,0,.35)} .pcard-2{border:1px solid var(--line); border-radius:var(--r); background:#FDFCF3; padding:clamp(24px,3vw,34px)} .pcard-2 .who{display:flex; align-items:baseline; gap:14px; padding-bottom:18px; border-bottom:1px solid var(--line-2)} .pcard-2 .who .nm{font-family:'Oswald',sans-serif; font-weight:700; text-transform:uppercase; font-size:clamp(1.4rem,2.4vw,2rem); color:var(--ink)} .prow{padding:18px 0; border-bottom:1px solid var(--line-2); display:grid; grid-template-columns:26px 1fr; gap:14px} .prow:last-child{border-bottom:0; padding-bottom:0} .prow .pk{width:10px; height:10px; border-radius:2px; margin-top:6px} .prow b{display:block; font-family:'Oswald',sans-serif; font-weight:500; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); margin-bottom:5px} .prow p{font-size:14px; line-height:1.55} @media(max-width:900px){ .persona{grid-template-columns:1fr} .persona-fig{max-width:340px} } /* ============ ONBOARDING (dupla) ============ */ /* Os 3 passos sao uma SEQUENCIA. Em 3 colunas de 265px cada titulo quebrava ("ONBOARDING (3 A 5 / DIAS)") e a leitura virava horizontal, contra a ordem. Empilhados, cada um tem a largura inteira e a numeracao conduz o olho de cima para baixo, que e o gesto certo para uma sequencia. */ .onb{display:grid; grid-template-columns:1fr .72fr; gap:clamp(36px,6vw,80px); align-items:center} /* align-self:start e o conserto do "titulo longe do conteudo": a linha do grid tem a altura da FIGURA (496px) e os passos so 337. Com o align-items: center do .onb, sobravam (496-337)/2 = 79px empurrando os passos para baixo — o gap do titulo dava 139px contra os 65px do FAQ, que e o ritmo certo. E align-SELF (so nos passos), e nao trocar o align-items do .onb: a figura fica exatamente onde estava. Medido, nao ajustado no olho. */ .onb .next{display:block; border-top:0; margin-top:0; align-self:start} .onb .nx{padding:26px 0; border-left:0; border-top:1px solid var(--line); display:grid; grid-template-columns:26px 1fr; gap:18px; align-items:start} .onb .nx:first-child{border-top:0; padding-top:0} /* num | h3 num | p <- sem isto o

cai na coluna de 26px do numero e quebra uma palavra por linha. Grid coloca cada filho na proxima celula livre; h3 e p sao irmaos, nao estao embrulhados. */ .onb .nx h3, .onb .nx p{grid-column:2} .onb .nx h3{margin:0 0 6px} .onb .nx .num{grid-row:1; margin-top:2px} /* margin-top negativo = o conserto do "a figura e a placa estao baixas". A caixa da imagem JA esta alinhada com o topo dos passos — quem desce e o conteudo DENTRO dela: onb-mulher.png tem 122px de 760 (16%) de area transparente acima da cabeca. Puxar 16% para cima faz a cabeca encostar no topo da coluna da esquerda, e a placa sobe junto (ela e filha do .onb-fig). O % resolve contra a LARGURA do grid-area, e a imagem e quadrada, entao 16% da largura = 16% da altura: escala sozinho. SE TROCAR A ARTE: este 16% e o vazio no topo DAQUELE arquivo. Arte com outro enquadramento pede outro numero — meça, nao chute. */ /* --onb-pull e --onb-plate sao POR PAGINA: .onb-fig e compartilhado entre o Content e o Chat, e os dois valores abaixo foram calibrados para a arte do CONTENT (onb-mulher.png, 16% de vazio no topo). Aplicar o mesmo puxao numa arte com outro enquadramento e chute, nao design — e a placa rosa foi pedida para o Content, nao para o Chat. Default = comportamento original (sem puxao, placa verde). Quem quiser outro valor declara no proprio elemento. */ .onb-fig{position:relative; margin-top:var(--onb-pull, 0)} /* Placa angulada, referencia twilio.com: a figura ATRAVESSA a borda de cima em vez de ficar contida — e o que tira o ar de foto colada numa caixa. top:30% deixa cabeca e ombros para fora. O rotate+skewY nao e aleatorio: e o mesmo gesto da faixa amarela do "automatizar" no hero, entao a pagina tem UM jeito de inclinar coisa. */ .onb-fig .plate{position:absolute; left:2%; right:2%; top:30%; bottom:4%; background:var(--onb-plate, var(--green)); border-radius:var(--r); z-index:0; transform:rotate(-2.5deg)} /* A figura sai por CIMA da placa mas e cortada EMBAIXO por ela: cabeca fora, pernas dentro. Overflow:hidden nao serve — cortaria os dois lados tambem. ATENCAO AO SINAL (o valor anterior, 182.5deg, estava ERRADO e a imagem vazava por baixo da placa): a placa gira -2.5deg, entao a borda de baixo dela SOBE para a direita. Num linear-gradient a direcao e (sin0, -cos0), e a linha de corte e PERPENDICULAR a ela. Com 182.5deg a linha DESCE para a direita — inclinada ao contrario da placa. Medido no navegador em 496x496: borda da placa em y=486(esq) -> y=466(dir); corte em y=473(esq) -> y=494(dir). Ou seja, sobrava 28px de imagem para fora na direita. O certo e 177.5deg. O 94.1% nao e chute: e a projecao do meio da borda inferior da placa sobre o eixo do gradiente (comprimento L = W|sin| + H|cos|). Vale em qualquer tamanho porque a imagem e QUADRADA — se um dia deixar de ser, refaca a conta. 94% (e nao 94.1%) para o corte cair um fio ACIMA da borda: garante que nao sobre imagem para fora, que era o pedido. */ .onb-fig img{ -webkit-mask-image:linear-gradient(177.5deg, #000 0 94%, transparent 94.1%); mask-image:linear-gradient(177.5deg, #000 0 94%, transparent 94.1%); } .onb-fig img{position:relative; z-index:1} /* Foto do onboarding (Content): mesmo tratamento/tamanho da foto do André */ .onb-fig-photo{margin-top:0 !important} .onb-fig-photo .plate{display:none} .onb-fig-photo img{aspect-ratio:1/1; object-fit:cover; border-radius:var(--r); box-shadow:0 30px 60px rgba(0,0,0,.35); -webkit-mask-image:none; mask-image:none; transform:none} body[data-page="content"] .onb{grid-template-columns:.95fr 1.05fr; gap:clamp(36px,5vw,72px)} /* Onboarding (Content): passos centralizados na vertical (como o André) e numeros grandes no padrao dos segmentos (numeral grande na cor de destaque) */ body[data-page="content"] .onb .next{align-self:start} body[data-page="content"] .onb .nx{grid-template-columns:auto 1fr; gap:22px; align-items:center} body[data-page="content"] .onb .nx .num{display:block; width:auto; height:auto; border-radius:0; background:none; font-size:clamp(2.2rem,3vw,2.9rem); line-height:1; letter-spacing:0; margin:0} /* Onboarding do Chat: mesmo padrao do Content (numeros grandes + coluna centralizada) */ body[data-page="chat"] .onb{grid-template-columns:.95fr 1.05fr; gap:clamp(36px,5vw,72px)} body[data-page="chat"] .onb .next{align-self:start} body[data-page="chat"] .onb .nx{grid-template-columns:auto 1fr; gap:22px; align-items:center} body[data-page="chat"] .onb .nx .num{display:block; width:auto; height:auto; border-radius:0; background:none; font-size:clamp(2.2rem,3vw,2.9rem); line-height:1; letter-spacing:0; margin:0} @media(max-width:900px){ .onb{grid-template-columns:1fr} .onb-fig{order:-1; max-width:380px; margin-inline:auto} } /* ============ CTA com figura ============ */ /* CTA centrado. A versao com a figura ao lado nao funcionava: o recorte sobre um retangulo coral chapado lia como adesivo colado, e a grade 1fr/auto abria um rombo entre o titulo e a imagem. O fechamento aqui e tipografico — e o que a referencia faz nas secoes mais fortes dela. */ /* ============ GRÃO ============ A referência (neuemontreal.com) NÃO faz isso em CSS: medi o .webp de fundo deles e o ruído está assado no arquivo (desvio-padrão 4.03 numa área lisa). Eles exportam a arte já granulada. Como nosso fundo é cor chapada, o grão tem que ser gerado — feTurbulence opaco de alto contraste, num data-URI, sem nenhuma requisição de rede. Por que a opacidade muda por seção, e não é uma camada global só: overlay amplifica em tons médios e comprime perto do branco. Medido: creme #F8F8EC op .8 -> desvio 4.22 (alvo 4.03) deslocamento +1.4 escuro #363636 op .8 -> desvio 30.8 (chuvisco) deslocamento +11 A opacidade que acerta o creme destrói o escuro. Uma camada fixa única é impossível de equilibrar — daí ::after por seção com opacidade própria. Por que ::before em z-index:-1 e não ::after por cima de tudo: grão é textura do PAPEL, não da TINTA. Medindo só o canal R eu quase errei feio — o amarelo #F8EA77 tem R=248 mas B=119, tom médio, onde o overlay amplifica ao máximo: a faixa amarela virava chuvisco. Todos os pastéis da marca são tom médio em algum canal. Com o grão ATRÁS do conteúdo, ele textura só o fundo chapado; chips, faixa amarela, cards e tipografia passam limpos por cima. isolation:isolate prende o blend ao conteúdo da própria seção (senão ele mistura com tudo que estiver pintado atrás) e é o que segura o z-index:-1 acima do fundo da seção em vez de sumir atrás da página. isolation cria contexto de empilhamento mas NÃO cria bloco de contenção para position:fixed — então os pins do ScrollTrigger continuam intactos. */ :root{ --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='6' intercept='-2.5'/%3E%3CfeFuncG type='linear' slope='6' intercept='-2.5'/%3E%3CfeFuncB type='linear' slope='6' intercept='-2.5'/%3E%3CfeFuncA type='discrete' tableValues='1 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); } /* O background explícito NÃO é decorativo: sem ele a seção é transparente, o creme vem do body, e o isolation:isolate corta o ::before do backdrop. Aí o overlay não tem com o que misturar e cospe o ruído CRU, em contraste máximo — chuvisco de TV. A seção precisa pintar o próprio fundo para o blend ter contra o que trabalhar. .dark (0,1,0) e os style inline vencem este seletor (0,0,1) por especificidade, então as seções escuras e as bg-2 continuam intactas. */ section{ background:var(--bg); } section, .foot{ position:relative; isolation:isolate; } section::before, .foot::before{ content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background-image:var(--grain); background-size:300px 300px; mix-blend-mode:overlay; opacity:.8; } .dark::before{ opacity:.12 } /* .steps é a seção, mas quem pina é .steps-pin: o grão precisa viajar junto com o elemento pinado, senão fica preso no espaçador. */ .steps::before{ content:none } .steps-pin{ isolation:isolate; background:#363636 } /* mesmo motivo: precisa de backdrop próprio */ .steps-pin::before{ content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background-image:var(--grain); background-size:300px 300px; mix-blend-mode:overlay; opacity:.12; } @media (prefers-reduced-motion:reduce){ /* grão é estático, pode ficar */ } /* ============ GRADE VIVA DO CTA ============ Referencia do pedido: a grade do jasper.ai. Eles fazem em ; aqui e DOM, porque o vocabulario da pagina ja e esse — fio de cabelo dividindo o espaco e pastel entrando como acento pontual. A grade e literalmente as hairlines do site, so que vivas. Cada celula tem UMA cor fixa da paleta, definida pelo indice: o mapa de cores e estavel, entao passar o mouse duas vezes no mesmo lugar acende a mesma cor. Aleatorio pisca e parece defeito. O que acende e a opacidade de um ::after, nao o background-color: opacity e composta na GPU, background-color repinta. Entrada rapida (.08s), saida lenta (.9s) — deixa um rastro. */ .cta-final{position:relative; overflow:hidden} .cta-grid{position:absolute; inset:0; z-index:0; display:grid; pointer-events:none} .cta-cell{position:relative; border-right:1px solid rgba(54,54,54,.055); border-bottom:1px solid rgba(54,54,54,.055)} .cta-cell::after{content:''; position:absolute; inset:1px; border-radius:2px; background:var(--c); opacity:0; transition:opacity .9s var(--ease)} /* Pulso ambiente: mais fraco e mais lento que o hover, de proposito. O fundo respira sozinho; o mouse e que da o toque nitido. Se o hover tivesse a mesma intensidade, o dedo do usuario sumiria no ruido. .on depois de .pulse: quando os dois caem na mesma celula, o hover vence. */ .cta-cell.pulse::after{opacity:.34; transition:opacity .55s var(--ease)} .cta-cell.on::after{opacity:.5; transition:opacity .08s linear} .cta-final .container{position:relative; z-index:1} @media (prefers-reduced-motion:reduce){ .cta-cell::after{transition:none} } /* ============ BENTO DE DESTAQUES ============ Padrao pedido: greenly.earth — cards de tamanhos diferentes, cada um com uma micro-animacao propria. Todo o conteudo aqui vem do deck; o card "sem alucinacao" usa barras abstratas de proposito, sem nome de fonte inventado. */ .bento{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:clamp(44px,5vw,68px)} .bcard{position:relative; overflow:hidden; display:flex; flex-direction:column; background:#FDFCF3; border:1px solid var(--line); border-radius:var(--r); padding:clamp(22px,2.2vw,30px); min-height:236px} .bcard.w2{grid-column:span 2} .bcard.dark{background:var(--ink); border-color:transparent} .bcard .bk{font-family:'Oswald',sans-serif; font-weight:500; font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-soft); display:flex; align-items:center; gap:9px} .bcard.dark .bk{color:rgba(248,248,236,.5)} .bcard h3{font-size:clamp(1.15rem,1.5vw,1.4rem); margin:14px 0 10px} .bcard.dark h3{color:#F8F8EC} .bcard p{font-size:13.5px; line-height:1.55} .bcard.dark p{color:rgba(248,248,236,.62)} .bcard .viz{margin-top:auto; padding-top:22px} .bnum{font-family:'Oswald',sans-serif; font-weight:700; color:var(--ink); line-height:.9; font-size:clamp(3rem,4.6vw,4.4rem); letter-spacing:-.01em; display:flex; align-items:baseline; gap:8px} .bnum small{font-size:.26em; font-weight:500; letter-spacing:.08em; color:var(--ink-soft)} /* linhas de fonte validada — abstratas de proposito */ .brow{display:grid; grid-template-columns:8px 1fr 42px; gap:12px; align-items:center; padding:9px 0; border-top:1px solid var(--line-dark-2); opacity:0} .brow:first-child{border-top:0} .brow i{width:8px; height:8px; border-radius:2px; background:var(--green)} .brow .bar{height:5px; border-radius:3px; background:rgba(248,248,236,.14); position:relative; overflow:hidden} .brow .bar span{position:absolute; inset:0; background:var(--green); transform-origin:left center; transform:scaleX(0); opacity:.75} .brow em{font-style:normal; font-family:'Oswald',sans-serif; font-weight:500; font-size:11px; color:rgba(248,248,236,.75); text-align:right} /* barra de score do editor */ .bscore{height:8px; border-radius:4px; background:rgba(54,54,54,.08); overflow:hidden} .bscore span{display:block; height:100%; border-radius:4px; background:var(--green); transform-origin:left center; transform:scaleX(0)} .bchips{display:flex; gap:8px; flex-wrap:wrap} .bchip{opacity:0} .bico{width:44px; height:44px} .bico img{width:100%; height:auto; display:block} @media(max-width:1000px){ .bento{grid-template-columns:repeat(2,1fr)} .bcard.w2{grid-column:span 2} } @media(max-width:560px){ .bento{grid-template-columns:1fr} .bcard.w2{grid-column:span 1} } /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important} .w-bl{display:none} .rule,.node .bar,.claim .u{transform:none !important} .fl{opacity:1 !important} .steps-pin{display:none} .steps-mobile{display:block} } /* ============================================================ CHROME DO SITE — troca de produto no rodapé Vive no bloco da marca e não em .foot-cols (repeat(3,1fr)): uma 7ª coluna deixaria a última fileira com um órfão. ============================================================ */ /* REDES SOCIAIS. 34px de propósito: os ícones desta família têm cartão BRANCO atrás, e sobre o #363636 do rodapé um bloco grande viraria a coisa mais clara da página. A 34px eles leem como ícone, não como bloco. */ .foot-switch{display:flex; align-items:center; gap:10px; margin-top:26px; flex-wrap:wrap} /* SVG inline, não PNG: o glifo herda currentColor e usa exatamente a mesma cor dos outros links do rodapé. Nenhuma família de ícones da pasta serve aqui — todas foram desenhadas para fundo claro (as canal-* têm cartão branco e viram blocos sobre o #363636). */ .foot-switch a{ width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--line-dark); border-radius:var(--r); color:rgba(248,248,236,.62); transition:color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease); } /* hover verde: é o mesmo gesto que o botão "voltar ao topo" tinha neste canto do rodapé antes de sair — o rodapé já falava essa língua. */ .foot-switch a:hover{color:var(--ink); background:var(--green); border-color:var(--green)} .foot-switch svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; } /* ============================================================ PLACEHOLDER MARCADO — mecanismo anti-"vira permanente" ------------------------------------------------------------ POR QUE ISTO EXISTE: o site atual da Astunts está no ar com logos de Nike, Spotify e Netflix e depoimento de "Kate Roben" herdados do template. Não foi descuido: foi placeholder INVISÍVEL. Placeholder que não incomoda ninguém nunca é trocado. Por isso a marcação é na TELA, não em comentário de código: outline tracejado coral + etiqueta "EXEMPLO" no canto. É feio de propósito. O objetivo é ser impossível de shipar sem ver. Mesma lógica do sufixo "-provisoria.png" nos nomes de arquivo. REGRA DE USO: tudo que for NÚMERO ou PESSOA inventada leva isto — preço, limite de plano, métrica, prazo, depoimento, logo de cliente. Copy (headline, benefício, descrição de recurso) NÃO leva: é texto, o Rodolfo lê e ajusta. Número inventado é outra categoria. PARA REMOVER quando o dado for real: apague o atributo data-placeholder do elemento. O CSS todo cai junto, sozinho. Para achar todos: busque por data-placeholder nos .html. ============================================================ */ [data-placeholder]{position:relative; outline:2px dashed var(--coral); outline-offset:6px; border-radius:2px} [data-placeholder]::after{ content:attr(data-placeholder); position:absolute; top:-11px; left:10px; z-index:5; font-family:'Oswald',sans-serif; font-weight:500; text-transform:uppercase; font-size:9px; letter-spacing:.14em; line-height:1; padding:4px 7px; border-radius:3px; background:var(--coral); color:#fff; white-space:nowrap; pointer-events:none; /* SEGUNDA ARMADILHA DO data-placeholder, medida no celular: o nowrap acima é o que mantém a etiqueta legível como etiqueta. Mas o rótulo de privacidade.html ("NÃO É DOCUMENTO JURÍDICO — precisa de advogado antes de publicar") tem 365px. Numa viewport de 375 com o elemento começando em x=20, ele terminava em x=396 e dava à PÁGINA INTEIRA 21px de rolagem horizontal — em privacidade.html e termos.html. Ironia registrada: o andaime que avisa do risco jurídico era o único bug de layout das duas páginas. O teto abaixo deixa a etiqueta quebrar em vez de empurrar a página. Isto é ANDAIME: some junto com o data-placeholder quando o texto real do advogado entrar. */ max-width:calc(100vw - 44px); white-space:normal; overflow-wrap:anywhere; } /* na largura de desktop cabe tudo numa linha, que é como etiqueta deve ser */ @media(min-width:901px){ [data-placeholder]::after{white-space:nowrap; max-width:none} } /* dentro de seção escura o tracejado precisa de mais presença */ .dark [data-placeholder]{outline-color:var(--coral)} /* ============================================================ GRADE VIVA NO HERO ------------------------------------------------------------ O mesmo fundo da .cta-final, ligado por data-livegrid. .hero JÁ tem position:relative e overflow:hidden — não precisou mudar nada lá. O QUE PRECISOU: subir o z-index do conteúdo. A grade é z-index:0 e o .container do esquema era estático; sem isto ele ficaria no mesmo plano da grade. .hero-in (z-index:2) e .floaters (z-index:1) já estavam resolvidos — quem faltava era o container do .schema. ============================================================ */ .hero[data-livegrid] > .container{position:relative; z-index:2} /* O grão de ruído do fundo passa por cima da grade e some com ela. A grade É o fundo agora, no topo da página: as células precisam ficar entre o creme e o conteúdo, e nada mais. */ .hero[data-livegrid] .cta-grid{z-index:0} /* ARMADILHA JÁ PAGA — leia antes de usar data-placeholder: se o elemento tiver overflow:hidden, a ETIQUETA some. O outline tracejado escapa (outline não é recortado pelo overflow do próprio elemento), mas a etiqueta é um ::after FILHO e é recortada — some justamente no card de preço, que é o placeholder mais perigoso da página. Aconteceu de verdade com .pcard (overflow:hidden por causa do preenchimento do botão nos cantos). SOLUÇÃO: ponha o data-placeholder num WRAPPER em volta, nunca no elemento que recorta. SEGUNDA ARMADILHA JÁ PAGA: a etiqueta é absoluta, então ela NÃO é contada no tamanho do pai — mas É contada no scrollWidth do documento. Um texto longo de data-placeholder com nowrap empurra a página inteira para o lado no celular. Foi medido: 21px de rolagem horizontal em privacidade.html e termos.html, vindos só do rótulo. Já resolvido lá em cima com max-width, mas a lição fica: a etiqueta é andaime e andaime não pode quebrar a obra. Como achar de novo: doc.documentElement.scrollWidth > clientWidth. */ /* ============================================================ HERO DIVIDIDO (.hero-split) — texto à esquerda, arte à direita ------------------------------------------------------------ POR QUE UMA CLASSE E NÃO MEXER EM .hero-in DIRETO: .hero-in é compartilhado pelas 3 páginas. Trocar o text-align dele mudaria a home e o Chat junto, sem ninguém pedir. Só o Content é dividido — então só o Content leva a classe. O H1 ENCOLHE aqui de propósito: clamp(2.6rem,6.6vw,5.6rem) foi dimensionado para o hero centralizado ocupar a largura inteira. Na coluna de ~620px, 5.6rem faz "AUTOMATIZAR" sozinho estourar a linha. 4.4rem no teto mantém a mesma presença na metade do espaço. ============================================================ */ .hero-split .hero-in{ display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:clamp(24px,4vw,64px); align-items:center; text-align:left; } .hero-split .hero-txt{max-width:640px} .hero-split h1{ font-size:clamp(2.3rem,4.6vw,4.4rem); /* 15ch, nao 13ch: com 13 a linha quebrava em "AUTOMATIZAR" e sobrava "MEU" sozinho numa linha inteira. 15ch cabe "AUTOMATIZAR MEU" junto. */ max-width:15ch; margin-inline:0; /* o auto era o que centralizava */ } .hero-split .lead{max-width:46ch; margin:26px 0 0} .hero-split .cta{justify-content:flex-start} .hero-split .hero-eyebrow{margin-bottom:22px} /* A arte tem alfa e senta direto no creme — sem placa, sem sombra, igual à figura do CTA final. As hairlines da grade passam por trás. */ /* ============================================================ HERO COMPACTO das páginas internas (.hero-compact) ------------------------------------------------------------ O hero padrão passa de 890px porque a ilustração sozinha tem 600px e o padding do topo ainda precisa vencer o cabeçalho fixo. Aqui o teto é 400px: título e texto menores, ilustração limitada em altura e respiro do topo reduzido ao mínimo que limpa o cabeçalho. max-height é trava de segurança, não o mecanismo: as medidas abaixo já fazem o bloco fechar por volta de 390px. ============================================================ */ /* Sem max-height: ela existia para forçar o teto de 400px da primeira versão. Hoje o bloco se dimensiona sozinho, e a trava só criaria risco de cortar conteúdo alto, como o formulário do hero de Contato. */ .hero-compact{padding-top:calc(var(--nav-h0,148px) + 24px); padding-bottom:38px} .hero-compact .hero-in{align-items:center; gap:clamp(24px,4vw,60px)} /* Com o título do hero maior (v54), a coluna de texto de 560px fazia os títulos mais longos quebrarem em 4 linhas. Damos mais largura ao texto (só nos heros compactos) para manter o padrão de 3 linhas com a fonte maior. */ .hero-compact .hero-in{grid-template-columns:minmax(0,1.32fr) minmax(0,1fr)} .hero-compact .hero-txt{max-width:720px} .hero-compact .hero-eyebrow{margin-bottom:12px} /* Mesma escala tipográfica das seções da página: o título usa o tamanho do h2 e o texto de apoio herda o .lead padrão, sem override. Assim o hero não parece de outro site. 27ch segura o título em 2 linhas. */ /* TRÊS LINHAS PARA TODOS. O min-height reserva a altura de 3 linhas mesmo quando o texto é mais curto, então todos os heros internos fecham na mesma altura e o layout não dança de página para página. Os textos que passavam de 3 linhas foram encurtados, não cortados por CSS: reticências em título de página é remendo, não solução. 3 linhas = 3 x line-height. Título: 3 x 1.05 = 3.15em. Lead: 3 x 1.6 = 4.8em. */ /* O hero é a entrada da página: fica um degrau ACIMA das seções de baixo. As seções usam h2 clamp(2rem,4.2vw,3.5rem); aqui subimos ~15% para o hero ter hierarquia visual. O lead também cresce um pouco além do .lead padrão. */ .hero-compact h1{font-size:clamp(2.35rem,4.9vw,4.05rem); line-height:1.05; max-width:27ch; min-height:3.15em} .hero-compact .lead{margin-top:18px; max-width:52ch; min-height:4.8em; font-size:clamp(1.15rem,1.55vw,1.4rem)} .hero-compact .cta{margin-top:24px; gap:10px} /* O .btn-ghost tem borda de 1px e o sólido não, o que deixava o hero com uma ou duas CTAs 2px mais alto que o de uma CTA só. Borda transparente iguala a caixa sem mudar a aparência. */ .hero-compact .cta .btn{border:1px solid transparent} .hero-compact .cta .btn-ghost{border-color:var(--line)} .hero-compact .cta .btn{padding:11px 18px} .hero-compact .hero-fig{max-width:480px; height:100%; max-height:460px} .hero-compact .hero-fig img{width:100%; height:100%; object-fit:contain; object-position:center right} @media(max-width:900px){ /* no celular vira uma coluna; a arte sai para o texto não ficar espremido */ .hero-compact{padding-bottom:36px} .hero-compact .hero-fig{display:none} } .hero-fig{justify-self:end; width:100%; max-width:620px; line-height:0} .hero-fig img{width:100%; height:auto; display:block} /* Abaixo de 900px vira uma coluna e a arte vai para cima do texto: num telefone, a ilustração apresenta o produto antes da headline. */ @media(max-width:900px){ .hero-split .hero-in{grid-template-columns:1fr; text-align:center} .hero-split .hero-txt{max-width:none} .hero-split h1{margin-inline:auto; max-width:16ch} .hero-split .lead{margin-inline:auto} .hero-split .cta{justify-content:center} .hero-fig{order:-1; justify-self:center; max-width:min(78%,420px); margin-bottom:8px} } /* ============================================================ ILUSTRAÇÃO NO TOPO DAS COLUNAS (.col-fig) — seção "O problema" ------------------------------------------------------------ Substitui o .tile de 44px naquelas 3 colunas: as artes novas são ilustrações inteiras e sumiriam num quadrado de 44px. NÃO mexi em .tile — ele continua servindo a home ("Por que Astunts") e a página do Chat ("O problema"). Se um dia essas páginas ganharem arte própria, é o mesmo tratamento aqui. SEM PLACA COLORIDA ATRÁS, de propósito: a arte tem alfa e já traz a própria cor, e um retângulo pastel de 150px violaria a regra de escala do sistema (pastel só em chip, tile, marcador e underline — nunca área chapada grande). Mesma decisão do .cta-fig, que também senta direto no creme. Quadradas (440x440) para as três terem a MESMA altura e os

alinharem entre as colunas — se virarem retangulares de alturas diferentes, os títulos desalinham. ============================================================ */ .cols3 .col-fig{width:clamp(112px,10vw,150px); margin:0; line-height:0} .cols3 .col-fig img{width:100%; height:auto; display:block} /* ============================================================ MENU MOBILE ------------------------------------------------------------ POR QUE ISTO NÃO EXISTIA: a regra "@media(max-width:900px){ .nav-links{display:none} }" foi escrita quando o site era UMA página e os links do nav eram só atalhos de âncora — perder os atalhos no celular era aceitável. Com 15 páginas virou outra coisa: navegação ZERO no telefone. Verificado num iframe de 390px, que é onde as media queries respondem de verdade. ============================================================ */ .nav-toggle{display:none} .nav-panel{display:none} @media(max-width:1300px){ .nav-toggle{ display:flex; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px; flex:none; margin-right:calc(var(--gutter)*-1 + 6px); padding:0 10px; border-radius:var(--r); } .nav-toggle span{ display:block; height:1.5px; background:var(--ink); border-radius:2px; transition:transform .35s var(--ease), opacity .25s; } /* vira X quando aberto: o gesto diz "isto fecha", sem precisar de texto */ .nav.open .nav-toggle span:first-child{transform:translateY(3.25px) rotate(45deg)} .nav.open .nav-toggle span:last-child{transform:translateY(-3.25px) rotate(-45deg)} .nav-panel{ /* --nav-h é medido pelo app.js e escrito no :root a cada resize. Era "top:68px" fixo, da época em que o header tinha uma linha só; com a barra de aviso (que o usuário pode fechar) a altura é VARIÁVEL, e número fixo aqui deixaria o painel flutuando ou cobrindo o nav. */ display:block; position:fixed; left:0; right:0; top:var(--nav-h,111px); background:rgba(248,248,236,.97); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); padding:8px 0 24px; z-index:59; } .nav-panel[hidden]{display:none} /* O painel agora carrega o MEGA inteiro (~20 links). Com todos os grupos recolhidos ele tem ~400px, mas um grupo aberto passa de 700 — num iPhone SE deitado isso é mais que a tela. A rolagem é do PAINEL, não da página: o body atrás continua onde estava. */ .nav-panel{max-height:calc(100dvh - var(--nav-h,111px)); overflow-y:auto; overscroll-behavior:contain} .nav-panel-links{display:flex; flex-direction:column} .np-item{border-bottom:1px solid var(--line-2)} .np-top{ font-family:'Oswald',sans-serif; font-weight:400; text-transform:uppercase; font-size:15px; letter-spacing:.1em; color:var(--ink); padding:16px 0; display:flex; align-items:center; justify-content:space-between; width:100%; background:none; border:0; cursor:pointer; text-align:left; } /* o + vira − quando o grupo abre. Duas barras cruzadas: a vertical some. */ .np-plus{position:relative; width:13px; height:13px; flex:none} .np-plus::before,.np-plus::after{ content:''; position:absolute; background:var(--ink); transition:transform .25s, opacity .25s; } .np-plus::before{left:0; right:0; top:6px; height:1.5px} .np-plus::after{top:0; bottom:0; left:6px; width:1.5px} .np-item.aberto .np-plus::after{transform:scaleY(0); opacity:0} /* grid-template-rows 0fr->1fr: altura automática ANIMÁVEL. height:auto não interpola e max-height obriga a chutar um teto — e o teto errado corta o grupo ou faz a animação "esperar" no fim. Mesma técnica do acordeão da seção de soluções; se mudar lá, mude aqui. */ .np-sub{display:grid; grid-template-rows:0fr; transition:grid-template-rows .32s ease} .np-item.aberto .np-sub{grid-template-rows:1fr} .np-sub-in{overflow:hidden; min-height:0} .np-grp{padding:2px 0 14px} .np-grp h5{ font-family:'Oswald',sans-serif; font-weight:700; text-transform:uppercase; font-size:13px; letter-spacing:.1em; color:var(--ink); margin:0 0 8px; } .np-grp a{ display:block; padding:9px 0; font-size:15px; color:var(--ink-2); font-family:inherit; text-transform:none; letter-spacing:0; } .nav-panel .btn{margin-top:22px; width:100%; justify-content:center} /* o CTA da barra sai abaixo de 520: logo + botão + hambúrguer não cabem em 350px de container. Ele continua no painel, a um toque. */ @media(max-width:520px){ .nav-cta{display:none} } } /* ============================================================ "PARA QUEM É" — leque de cartões (.quem / .qgrid / .qcard) ------------------------------------------------------------ Padrão medido em the3key.com. O que eu li de lá, com números: · 6 cartões, 335x306, border-radius 8px · repouso: rotate(-1deg) e rotate(+1deg) ALTERNADOS — sutil. O leque aberto e dramático NÃO é o repouso: é a ENTRADA em pleno voo. Quem olha o site parado nunca vê o leque. · um pastel chapado por cartão A mecânica é reconstruída daqui; o conteúdo é do Rodolfo. TENSÃO ASSUMIDA COM O SISTEMA: o comentário no topo deste arquivo diz "pastel só vive em chips, tiles, marcadores e underlines. Nenhuma área chapada grande." Estes cartões são exatamente isso — as maiores áreas chapadas do site. Foi decisão do Rodolfo, com a tensão apontada antes. Se um dia incomodar, .qcard--sobrio abaixo troca o pastel por creme + hairline + um ponto de cor, e o leque continua igual: é só trocar a classe no HTML. ============================================================ */ .quem{background:var(--bg-2)} /* CABEÇALHO: usa .head-block, o mesmo componente de TODAS as outras seções do site (eyebrow + h2 + lead, alinhado à esquerda, max-width 900px). As classes .quem-head / .quem-h2 / .quem-sub existiam para imitar a referência — título gigante e centralizado, com um chip pastel no lugar do eyebrow. Foram removidas: manter um cabeçalho próprio para UMA seção era justamente o tipo de exceção que faz o padrão se dissolver. O leque de cartões continua sendo da referência; o cabeçalho é da casa. */ .qgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.2vw,28px); margin-top:clamp(48px,6vw,80px); perspective:1200px; /* dá profundidade à queda dos cartões */ } .qcard{ background:var(--qc); border-radius:var(--r); padding:clamp(24px,2.6vw,32px); display:flex; flex-direction:column; gap:10px; min-height:300px; position:relative; transform-origin:center center; will-change:transform; transition:transform .5s var(--ease), box-shadow .5s var(--ease); } /* ±1deg alternado, igual à referência. O :nth-child faz o zigue-zague sozinho — sem isto cada cartão precisaria de um style inline. */ .qcard:nth-child(odd){transform:rotate(-1deg)} .qcard:nth-child(even){transform:rotate(1deg)} /* hover: o cartão se endireita e sobe. Diz "isto é um objeto físico", que é a promessa que a rotação já fez. */ .qcard:hover{transform:rotate(0deg) translateY(-6px); box-shadow:0 18px 40px rgba(54,54,54,.13)} /* .qc-n (os contadores 01..06) foi removido a pedido — o CSS saiu junto para não virar regra órfã. .qcard--sobrio ainda referencia .qc-n; se voltar a usar os números, a regra de lá volta a valer sozinha. */ .qcard h3{font-size:clamp(1.3rem,1.9vw,1.7rem); line-height:1.18} .qc-tag{ font-family:'Oswald',sans-serif; font-weight:500; text-transform:uppercase; font-size:12px; letter-spacing:.06em; line-height:1.4; color:var(--ink); padding-bottom:12px; border-bottom:1px solid rgba(54,54,54,.14); } /* 15.5px, e nao os 14px do .small: o texto encurtou e o cartao sobrou espaco. line-height desce de 1.6 para 1.55 — corpo maior pede entrelinha proporcionalmente menor, senao o bloco "abre" e perde densidade. */ .qc-d{font-size:15.5px; line-height:1.55; color:rgba(54,54,54,.74)} @media(max-width:1040px){ .qgrid{grid-template-columns:repeat(2,1fr)} } @media(max-width:640px){ .qgrid{grid-template-columns:1fr; gap:14px} .qcard{min-height:0} /* sem rotação no celular: a coluna única fica torta e o zigue-zague que faz sentido numa grade 3x2 vira desalinho numa pilha. */ .qcard:nth-child(odd), .qcard:nth-child(even){transform:none} .qcard:hover{transform:translateY(-4px)} } /* ALTERNATIVA SÓBRIA — respeita a regra de escala do sistema. Para usar: troque class="qcard" por class="qcard qcard--sobrio" no index.html. O leque, o hover e a animação continuam idênticos. */ .qcard--sobrio{background:#FDFCF3; box-shadow:inset 0 0 0 1px var(--line)} .qcard--sobrio .qc-n{color:var(--qc); font-weight:700} .qcard--sobrio::before{ content:''; position:absolute; left:0; right:0; top:0; height:4px; background:var(--qc); border-radius:var(--r) var(--r) 0 0; } /* ============================================================ BARALHO DAS PLATAFORMAS (.deck) — reconstrução de eduardbodak.com ------------------------------------------------------------ Números medidos na referência e reusados aqui: · perspective: 1131.25px no contêiner da lista · cartão: transform-style:preserve-3d, transform-origin no CENTRO · duas faces com backface-visibility:hidden; o verso nasce em rotateY(180deg). Assim rotateY(180) no CARTÃO mostra o verso e rotateY(0) mostra a frente — o giro É a revelação. · proporção do cartão 454x628 = 0.723 (carta de baralho real é 0.7; eles arredondaram para cima). Mantida. Lá são 3 cartas de 454px; aqui são DUAS, então elas podem ser maiores sem estourar o container de 1360px. POR QUE O PIN AQUI É CSS (sticky) E NÃO ScrollTrigger.pin: a referência usa sticky puro. Este site já tem dois pins de GSAP (#como e #stmt) e cada um custa medição e refresh; um sticky não custa nada e não entra na fila de refreshPriority. O scrub continua sendo GSAP — é só o PIN que é CSS. ============================================================ */ /* A ALTURA DA SEÇÃO É O CURSO DA ANIMAÇÃO: o .deck-pin gruda com sticky e fica parado enquanto a SEÇÃO passa por baixo. Se a seção tiver a mesma altura do pin, não sobra scroll e o sticky nunca segura — a animação aconteceria num piscar. A referência usa 3168px de seção para 972px de inner (3.3x). Aqui: 280vh de seção para 100vh de pin. O end:'+=180%' do ScrollTrigger no app.js casa com esta folga — mexer num sem o outro dessincroniza o scrub. */ /* .plat = as duas fases numa seção só (baralho -> acordeão), fundo claro. Antes eram .deck (clara) e .acc (escura), separadas. A junção foi pedida: o baralho dá os tópicos, o acordeão dá o texto — dizer isso em duas seções fazia parecer dois assuntos. */ .plat{background:var(--bg-2); border-block:1px solid var(--line)} .plat-deck{min-height:280vh; position:relative} /* 200vh dava 100vh de rolagem por item (só há 2) e sobrava ~700px de tela vazia no fim da fase. 150vh mantém o acordeão confortável e corta o vazio. */ .plat-acc{min-height:150vh; position:relative} .deck-pin{position:sticky; top:0; min-height:100vh; display:flex; flex-direction:column; justify-content:center; gap:clamp(24px,3vw,44px); padding-block:clamp(40px,6vw,80px); overflow:hidden} .deck-head h2{margin-top:18px; max-width:20ch} .deck-list{ display:flex; justify-content:center; align-items:center; gap:clamp(24px,4vw,64px); perspective:1131px; /* medido na referência */ } .dcard{ position:relative; transform-style:preserve-3d; width:min(38vw,440px); aspect-ratio:.723; /* proporção medida */ flex:none; /* sem isto o flex encolhe a carta (410 em vez de 440) e a proporção da carta se perde */ will-change:transform; } .dface{ position:absolute; inset:0; backface-visibility:hidden; border-radius:calc(var(--r) * 2); padding:clamp(18px,2vw,26px); display:flex; flex-direction:column; justify-content:space-between; box-shadow:0 24px 60px rgba(54,54,54,.10); } .dfront{background:#FDFCF3; border:1px solid var(--line)} /* o verso nasce virado: é o que faz o giro revelar a frente */ .dback{background:var(--dc); transform:rotateY(180deg)} .dface-top, .dface-bottom{display:flex; align-items:center; justify-content:space-between} /* a marca repetida de cabeça para baixo no rodapé é o que faz o objeto ler como CARTA e não como card de site. Foi o detalhe mais barato e mais decisivo da referência. */ .dface-bottom{transform:rotate(180deg)} .dlabel{font-family:'Oswald',sans-serif; font-weight:500; text-transform:uppercase; font-size:12px; letter-spacing:.18em; color:var(--ink)} .dsuit{width:14px; height:14px; border-radius:3px; background:var(--dc); flex:none} .dfront .dsuit{box-shadow:inset 0 0 0 1px rgba(54,54,54,.18)} .dlist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px} .dlist li{ background:var(--bg-2); border-radius:var(--r); padding:clamp(10px,1.1vw,14px) 16px; text-align:center; font-size:clamp(13px,1.05vw,15px); color:var(--ink); } .dback-visual{flex:1; display:grid; place-items:center} /* O verso leva o "a" da marca — era um losango que eu tinha desenhado imitando o favicon. O arquivo já vem transparente e na cor --ink, então não precisa de filtro nem máscara: senta direto no pastel da carta. width em % para acompanhar a carta, que é fluida (min(38vw,440px)). */ .dmark{width:34%; height:auto; display:block} @media(max-width:900px){ /* sem pin nem 3D no celular: a carta de 440px não cabe, e um giro 3D numa coluna estreita vira tremor. As duas cartas viram a frente, empilhadas — a informação é a mesma. */ .deck-pin{position:relative; min-height:0; display:block} .deck-list{flex-direction:column; perspective:none; gap:18px; margin-top:34px} .dcard{width:100%; aspect-ratio:auto; transform:none!important} .dface{position:relative; inset:auto} .dback{display:none} } /* ============================================================ PALCO NEW-ENGEN DO HERO Cartas empilhadas à direita no hero que descem e se abrem numa fileira sobre o título da seção de baixo. Uma camada sticky (.engen-pin) persiste do hero até a seção seguinte. As posições finais são o layout natural (fileira flex central); o JS mede e parte da pilha. Medido em newengen.com. ============================================================ */ .engen{position:relative; min-height:250vh; background:var(--bg)} .engen-pin{position:sticky; top:0; height:100vh; overflow:hidden} /* copy do hero: à esquerda e CENTRALIZADA VERTICALMENTE no palco de 100vh (o pin é 100% da altura). some conforme as cartas descem. */ /* O cabeçalho é position:fixed e cobre os primeiros --nav-h0 px. Centrar em inset:0 centraria na VIEWPORT e sobrava mais espaço embaixo. Começar em --nav-h0 centra na ÁREA VISÍVEL, com folga igual acima e abaixo. */ .engen-copy{position:absolute; top:var(--nav-h0,148px); left:0; right:0; bottom:0; z-index:4; text-align:left; display:flex; flex-direction:column; justify-content:center; padding-bottom:clamp(40px,6vh,88px); pointer-events:none} /* quebra de linha SO no mobile (o "|" no titulo vira
; aqui some no desktop) */ @media(min-width:901px){ .brk-m br{display:none} } .engen-copy .cta{pointer-events:auto} .engen-copy .hero-eyebrow{display:inline-block; margin-bottom:22px} .engen-copy h1{max-width:15ch; margin:0} .engen-copy .lead{max-width:44ch; margin:24px 0 0} .engen-copy .cta{margin-top:32px; display:flex; gap:12px; flex-wrap:wrap} /* título da seção de baixo: entra ao rolar, ACIMA das cartas (o título fica no topo, as cartas assentam embaixo, sem cobrir o texto). */ .engen-belowhead{position:absolute; left:0; right:0; top:calc(var(--nav-h0,148px) + clamp(16px,3vh,44px)); text-align:center; z-index:2; opacity:0; pointer-events:none} .engen-belowhead .eyebrow{display:inline-block; margin-bottom:12px} .engen-belowhead h2{max-width:30ch; margin-inline:auto; font-size:clamp(26px,3.7vw,50px); line-height:1.05} /* camada de cartas: layout natural = fileira ANCORADA NA BASE (estado final). Assim o título respira em cima e as cartas não o cobrem. */ .engen-deck{position:absolute; left:0; right:0; bottom:clamp(24px,calc(50vh - 420px),140px); margin:0; z-index:3; display:flex; justify-content:center; align-items:flex-end; gap:clamp(20px,3vw,44px); perspective:1131px; pointer-events:none} .engen-deck .dcard{width:min(34vw,410px)} .engen-deck .dcard .dface{pointer-events:auto} @media(max-width:900px){ /* celular: sem pin nem 3D. Copy, título e cartas empilhados em fluxo. */ .engen{min-height:0} .engen-pin{position:static; height:auto; overflow:visible} .engen-copy, .engen-belowhead, .engen-deck{position:static; opacity:1; height:auto; top:auto; left:auto; right:auto; text-align:left} .engen-copy{padding-top:calc(var(--nav-h0,120px) + 20px)} .engen-belowhead{display:none} /* mobile: oculta o bloco "Duas plataformas / Uma cuida do conteudo..." */ .engen-belowhead h2{margin-inline:0} .engen-deck{display:none} /* mobile: oculta as cartas (Content/Chat); so aparecem no desktop */ .engen-deck .dcard{width:100%; transform:none!important} } /* ============================================================ SOLUÇÕES — acordeão preso ao scroll (.acc) ------------------------------------------------------------ Mecânica medida em newengen.com/#services: · contêiner de 300vh com UM .sticky top:0 de 100vh dentro · N itens irmãos; o ATIVO mede 543px, os fechados 91px · border-top em cada item: a lista lê como pauta que abre O "título que gruda no topo" é ilusão: é o item anterior colapsando em barra. Entendido isso, o resto é um acordeão. Aqui são 2 itens -> contêiner de 200vh. COMO A ALTURA ANIMA SEM JS MEDIR NADA: grid-template-rows de 0fr para 1fr. É o truque moderno para animar "altura automática" — o height:auto não é animável, e max-height obriga a chutar um teto (chute baixo corta o texto, chute alto faz a transição parecer que trava). Aqui o navegador resolve a altura real. ============================================================ */ /* as cores abaixo foram escritas para fundo #363636 e viraram claras quando a seção deixou de ser escura. Hairline, texto e pílulas trocam de família: --line-dark-2 -> --line-2, etc. */ .acc-pin{position:sticky; top:0; min-height:100vh; display:flex; align-items:center; padding-block:clamp(40px,6vw,80px)} /* SÓ O DIVISOR DO MEIO: a referência tem hairline em todo item porque lá são 5 e a lista precisa ler como pauta. Aqui são DOIS — o traço de cima e o de baixo não separavam nada, só fechavam a caixa e brigavam com as bordas da própria seção. Fica o único que faz trabalho: o que separa uma solução da outra. */ .acc-list{border-bottom:0} .acc-item + .acc-item{border-top:1px solid var(--line-2)} .acc-head{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:clamp(18px,2vw,26px) 0; text-align:left; } .acc-t{ font-family:'Oswald',sans-serif; font-weight:700; text-transform:uppercase; font-size:clamp(1.9rem,3.6vw,3rem); line-height:1.18; letter-spacing:.01em; color:var(--ink-soft); transition:color .5s var(--ease); } /* mesmo mecanismo do padrão (eyebrow inline + título com margin-top:14px), para o respiro eyebrow→título bater com o dos blocos de conteúdo. */ .acc-tt{display:block; min-width:0} .acc-eyebrow{color:var(--ink-soft)} .acc-tt .acc-t{display:block; margin-top:14px} .acc-item.on .acc-t{color:var(--ink)} /* o "+" vira "−" quando abre: mesmo gesto do FAQ, que já existe no site */ .acc-ic{position:relative; width:20px; height:20px; flex:none} .acc-ic::before, .acc-ic::after{ content:''; position:absolute; left:50%; top:50%; background:var(--ink-soft); transform:translate(-50%,-50%); transition:transform .45s var(--ease), opacity .3s; } .acc-ic::before{width:16px; height:1.5px} .acc-ic::after{width:1.5px; height:16px} .acc-item.on .acc-ic::after{transform:translate(-50%,-50%) rotate(90deg); opacity:0} .acc-body{display:grid; grid-template-rows:0fr; transition:grid-template-rows .75s var(--ease)} .acc-item.on .acc-body{grid-template-rows:1fr} .acc-body > div{overflow:hidden} /* obrigatório para o truque do 0fr/1fr */ /* MESMO BUG DO ONBOARDING, segunda vez: com align-items:center a coluna de texto (355px) era centralizada contra a FIGURA (522px) e nascia 84px empurrada para baixo — o título ficava a 110px do texto, contra os 18px que o .head-block usa no site inteiro. align-SELF só no texto, e não trocar o align-items da grade: a figura fica centralizada, que é como ela deve ficar. */ .acc-in{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,4vw,64px); align-items:center; padding-bottom:clamp(26px,3vw,40px); } .acc-txt{align-self:start} /* 18px = o mesmo respiro do .head-block h2. Antes o espaço vinha só do padding do .acc-head, que é folga do BOTÃO, não do texto. */ .acc-txt p{margin-top:14px} .acc-txt p{color:var(--muted); font-size:17px; line-height:1.65; max-width:56ch} .acc-tags{display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 26px} /* pílula de contorno, como na referência — não é chip pastel cheio: sobre fundo escuro o pastel chapado brigaria com a arte ao lado. */ .acc-tag{ font-family:'Oswald',sans-serif; font-weight:400; text-transform:uppercase; font-size:11px; letter-spacing:.1em; color:var(--ink-soft); background:#fff; border:1px solid var(--line); border-radius:100px; padding:7px 14px; } .acc-fig{line-height:0} .acc-fig img{width:100%; height:auto; display:block} @media(max-width:900px){ /* sem pin no celular: 100vh de sticky com acordeão dentro não cabe. Vira lista normal, e os dois itens ficam ABERTOS — o conteúdo é o ponto da seção, e fechar por padrão esconderia tudo. */ .plat-deck, .plat-acc{min-height:0} .acc-pin{position:relative; min-height:0; display:block} .acc-in{grid-template-columns:1fr} .acc-fig{order:-1; max-width:340px; margin-inline:auto} .acc-item .acc-body{grid-template-rows:1fr} .acc-t{color:var(--ink)} .acc-ic{display:none} } /* --- lupa + CTA em bloco (altura cheia, sem raio) --- */ .nav-search{display:flex; align-items:center; padding-inline:clamp(12px,1.4vw,20px); flex:none; color:var(--ink-soft)} .nav-search svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round} .nav-search:hover{color:var(--ink)} /* O CTA da referência é um BLOCO: altura cheia, canto reto, encostado na borda. Por isso ele NÃO usa .btn — o .btn tem raio e padding próprios, e o gesto aqui é "faixa", não "botão". */ .nav-cta{ display:flex; align-items:center; gap:8px; flex:none; padding-inline:clamp(18px,2.2vw,34px); background:var(--green); color:var(--ink); font-family:'Oswald',sans-serif; font-weight:500; font-size:13px; letter-spacing:.11em; /* = .btn */ transition:background .35s var(--ease); } .nav-cta:hover{background:#7FE3BE} .nav-cta .arw{transition:transform .42s var(--ease)} .nav-cta:hover .arw{transform:translateX(4px)} /* "Acessar": botao secundario (transparente) a esquerda do CTA verde */ .nav-access{background:transparent; color:var(--ink); padding-inline:clamp(10px,1.1vw,16px)} .nav-access:hover{background:rgba(54,54,54,.06)} /* Acomoda "Acessar" + "Falar com vendas" (mais largos) sem colidir com o menu central em telas medias: comprime gap do menu e padding do CTA. */ @media(max-width:1480px){ .nav-links{gap:clamp(9px,1.1vw,16px)} .nav-cta{padding-inline:clamp(13px,1.5vw,22px)} } @media(max-width:1160px){ .nav-links{gap:8px} .nav-links a{font-size:13px} .nav-cta{padding-inline:14px} } /* --- mega-dropdown --- Painel de largura PARCIAL, centralizado, no estilo do dropdown "Platform" do jasper.ai: o .mega vira só uma camada transparente de posicionamento (ocupa a largura toda para poder centralizar), e o cartão de verdade é o .mega-in, que tem fundo, borda, raio e sombra próprios e não encosta nas bordas da tela. */ .mega{ position:absolute; left:0; right:0; top:100%; background:none; border:0; box-shadow:none; padding-top:12px; pointer-events:none; } .mega .mega-in{pointer-events:auto} .mega[hidden]{display:none} /* ROLAGEM SUAVE em qualquer link de âncora do site: índices laterais das páginas de documento, menu de seções das vagas, botões do hero, "voltar ao topo". Antes o clique teleportava e a pessoa perdia a noção de onde caiu. É nativo do navegador, então não briga com o GSAP nem custa JS. Junto com o scroll-margin abaixo, o alvo para embaixo do cabeçalho fixo. */ html{scroll-behavior:smooth} /* quem pediu menos movimento no sistema não recebe a animação */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} } /* O cabeçalho é fixed: sem isto, o link de âncora leva o alvo para debaixo dele. Vale para as seções e para a âncora do FAQ. */ main [id], .anchor-off{scroll-margin-top:calc(var(--nav-h0,148px) + 20px)} /* ============================================================ SELETOR DE IDIOMA Idiomas ainda não traduzidos aparecem como texto morto com "em breve" (.lang-off), nunca como link. ============================================================ */ /* a .nav-row é flex com align-items:stretch, então o .lang recebe a altura inteira da barra; sem este flex interno o botão encostava no topo. */ .lang{position:relative; flex:none; display:flex; align-items:center} .lang-top{display:inline-flex; align-items:center; gap:7px; background:none; border:0; cursor:pointer; padding:8px 10px; border-radius:var(--r); color:var(--ink); font-family:'Oswald',sans-serif; font-weight:500; font-size:12px; letter-spacing:.1em; transition:background .3s var(--ease)} .lang-top:hover{background:var(--bg-2)} .lang-top svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; flex:none} .lang-menu{position:absolute; top:calc(100% + 8px); right:0; z-index:60; min-width:246px; margin:0; padding:6px; list-style:none; background:#FFFDF4; border:1px solid var(--line); border-radius:var(--r); box-shadow:0 22px 48px rgba(54,54,54,.16)} .lang-menu li{margin:0} .lang-menu a, .lang-off{display:block; padding:9px 12px; border-radius:6px; font-size:14px; line-height:1.3; color:var(--ink-2)} .lang-menu a:hover{background:var(--bg-2); color:var(--ink)} .lang-menu a[aria-current]{color:var(--ink); font-weight:500; background:var(--bg-2)} .lang-off{color:var(--ink-soft); cursor:default} .lang-off i{font-style:normal; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); opacity:.7} @media(max-width:900px){ /* no celular o espaço da barra é disputado por logo, lupa e hambúrguer: fica só a sigla, sem o globo. */ .lang-top{padding:8px 6px} .lang-top svg{display:none} } /* O cartão: largura parcial, centralizado, com fundo e sombra próprios. max-width abaixo do container do site para não ocupar a tela inteira. */ .mega-in{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,2.6vw,44px); max-width:940px; padding:clamp(26px,2.6vw,38px) clamp(28px,3vw,44px); background:var(--bg); border:1px solid var(--line); border-radius:calc(var(--r) * 2); box-shadow:0 26px 60px rgba(54,54,54,.16)} /* data-cols vem do app.js: o mega da Plataforma tem 2 colunas (com arte), o de Empresa também. Duas colunas pedem um cartão mais estreito. */ .mega-in[data-cols="2"]{grid-template-columns:repeat(2,minmax(0,1fr)); max-width:720px} .mega-in[data-cols="1"]{grid-template-columns:minmax(0,1fr); max-width:420px} /* arte do hero de cada produto, como na referência: bloco pastel com a ilustração recortada dentro. */ .mega-fig{display:block; background:var(--mf,var(--bg-2)); border-radius:calc(var(--r) * 1.5); padding:clamp(12px,1.4vw,20px); margin-bottom:18px; line-height:0; overflow:hidden; transition:transform .42s var(--ease)} .mega-fig img{width:100%; height:clamp(120px,13vw,168px); object-fit:contain; display:block} .mega-col.has-fig:hover .mega-fig{transform:translateY(-3px)} .mega-col.has-fig h4{margin-top:0} @media(max-width:900px){ .mega-fig{display:none} } .mega-col h4{font-family:'Oswald',sans-serif; font-weight:700; text-transform:uppercase; font-size:13px; letter-spacing:.1em; color:var(--ink); margin:0 0 8px} .mega-col p{font-size:13px; line-height:1.5; color:var(--ink-soft); margin-bottom:16px; max-width:34ch} .mega-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px} .mega-col li a{ display:block; padding:8px 0; font-size:14.5px; color:var(--muted); border-top:1px solid var(--line-2); transition:color .3s var(--ease), padding-left .3s var(--ease); } .mega-col li:first-child a{border-top:0} .mega-col li a:hover{color:var(--ink); padding-left:6px} /* --- busca --- */ .search{position:absolute; left:0; right:0; top:100%; background:var(--bg); border-top:1px solid var(--line); border-bottom:1px solid var(--line); box-shadow:0 24px 50px rgba(54,54,54,.10); padding-block:clamp(20px,2.4vw,30px)} .search[hidden]{display:none} #searchInput{ width:100%; border:0; border-bottom:1px solid var(--line); background:none; font-family:'Oswald',sans-serif; font-weight:500; text-transform:uppercase; font-size:clamp(1.2rem,2.4vw,2rem); letter-spacing:.02em; color:var(--ink); padding:10px 0; outline:none; } #searchInput::placeholder{color:rgba(54,54,54,.28)} #searchInput:focus{border-bottom-color:var(--ink)} .search-res{list-style:none; margin:14px 0 0; padding:0} .search-res li a{display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:12px 0; border-top:1px solid var(--line-2); transition:padding-left .3s var(--ease)} .search-res li a:hover{padding-left:6px} .sr-t{font-family:'Oswald',sans-serif; font-weight:500; text-transform:uppercase; font-size:14px; letter-spacing:.06em; color:var(--ink)} .sr-u{font-size:12px; color:var(--ink-soft)} .search-vazio{padding:14px 0; font-size:14px; color:var(--ink-soft); border-top:1px solid var(--line-2)} @media(max-width:1300px){ /* o nav de site vai para o painel do hambúrguer. Com o .nav-mid fora, ele deixa de ser o espaçador (flex:1) da linha — sem o margin-left:auto abaixo, logo + lupa + hambúrguer ficavam AMONTOADOS À ESQUERDA, com 187px de vazio à direita. Verificado num iframe de 390px. */ .nav-mid{display:none} .nav-search{margin-left:auto} /* O -14px de margem do hambúrguer é compensação óptica do desktop (o glifo tem 10px de respiro interno). No mobile ele joga o BOTÃO 8px para FORA da viewport: medido x=339..383 numa vw de 375. O glifo ainda cabia, mas ficava a 2px da borda enquanto a logo tem 20px. Aqui a conta é refeita: padding de 10px + margem 0 => borda do botão em 365, glifo em 355, calha de 20px dos dois lados. Simétrico com a logo. */ .nav-row{padding-right:10px} .nav-toggle{margin-right:0} .mega{display:none!important} .nav-row{padding-right:6px; align-items:center} /* mobile: centraliza verticalmente logo/lupa/idioma/hamburguer no header */ .topbar p{font-size:12px} .nav-cta{display:none} /* já estava saindo abaixo de 520; agora sai antes: logo + lupa + hambúrguer já ocupam a linha */ .search{padding-block:18px} } /* ============================================================ PASTILHAS FORA DO CELULAR ------------------------------------------------------------ As .fl são decoração posicionada em % da largura do hero. Num hero de 390px com texto centralizado, elas caem EM CIMA do parágrafo — medido: "Conteúdo" e "Distribuição" sobrepondo o .lead da home. O Content e o Chat já não têm pastilhas (removidas a pedido); só a home ainda tem. Some no celular: é decoração, e decoração que atropela o texto não é decoração, é defeito. ============================================================ */ @media(max-width:900px){ .floaters{display:none} } /* ============================================================ BLOCOS ESTILO APPSIGNAL — re-vestidos na identidade Astunts Ordem: A(escuro) B(claro) C(escuro) D(claro) E(escuro). Oswald dos componentes novos já entrou na lista mestra de caixa-alta lá em cima; aqui só defino família/tamanho. ============================================================ */ /* ---------- A · perguntas conversadas (dark .qa) ---------- */ .qa .container{max-width:var(--container)} .qa-row{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,80px); align-items:center; padding:var(--pad-sec) 0} .qa-row + .qa-row{border-top:1px solid var(--line-dark-2)} .qa-row.rev .qa-txt{order:2} /* .qa-q colide com o .qa-q do acordeão (FAQ), que é display:flex; justify-content:space-between e espalhava as palavras deste título. Escopo em .qa-row vence a colisão e volta ao fluxo inline normal. */ .qa-row .qa-q{font-size:clamp(1.9rem,3.6vw,3rem); line-height:1.18; letter-spacing:-.01em; margin:0; display:block; width:auto; padding:0} .qa-sol{font-family:'Oswald',sans-serif; font-weight:500; font-size:13px; letter-spacing:.12em; color:var(--green); margin:22px 0 0} .qa-d{margin:14px 0 0; max-width:46ch} .qa-repl{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:22px 0 0} .qa-repl-k{font-family:'Oswald',sans-serif; font-weight:500; font-size:11px; letter-spacing:.14em; color:rgba(248,248,236,.45)} .qa-repl em{font-style:normal; font-size:12.5px; color:rgba(248,248,236,.72); border:1px solid var(--line-dark); border-radius:6px; padding:4px 9px} .qa-quote{margin:26px 0 0; padding:2px 0 2px 18px; border-left:2px solid var(--green)} .qa-quote p{margin:0; color:rgba(248,248,236,.8)} .qa-quote cite{display:block; margin-top:8px; font-style:normal; font-size:13px; color:rgba(248,248,236,.5)} .qa-cta{display:inline-flex; align-items:center; gap:8px; margin-top:26px; font-family:'Oswald',sans-serif; font-weight:500; font-size:13px; letter-spacing:.1em; color:#F8F8EC} .qa-cta .arw{transition:transform .42s var(--ease)} .qa-cta:hover .arw{transform:translateX(4px)} .qa-fig{margin:0} .qa-fig img{width:100%; height:auto; display:block; border-radius:var(--r); box-shadow:0 30px 60px rgba(0,0,0,.35)} /* ---------- B · três fases hover-popover (.cap) ---------- */ .cap-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,4vw,56px); margin-top:clamp(40px,5vw,64px)} .cap-col{border-top:2px solid var(--ink); padding-top:22px} .cap-h{font-size:clamp(1.15rem,1.6vw,1.4rem); margin:0 0 18px} .cap-mark{background:var(--yellow); padding:0 .14em; border-radius:3px; box-decoration-break:clone; -webkit-box-decoration-break:clone} .cap-list{list-style:none; margin:0; padding:0} .cap-item{position:relative; padding:13px 0 13px 22px; border-top:1px solid var(--line-2); cursor:default} .cap-item:first-child{border-top:0} .cap-item::before{content:'›'; position:absolute; left:2px; top:12px; color:var(--coral); font-weight:700} .cap-t{font-family:'Oswald',sans-serif; font-weight:400; font-size:14px; letter-spacing:.04em; color:var(--ink)} .cap-item:hover .cap-t{color:var(--coral)} .cap-pop{position:absolute; left:14px; top:calc(100% - 4px); z-index:6; width:min(300px,78vw); background:#FFFDF4; border:1px solid var(--line); border-radius:var(--r); box-shadow:0 20px 44px rgba(54,54,54,.16); padding:14px 16px; opacity:0; transform:translateY(6px); pointer-events:none; transition:opacity .22s, transform .22s} .cap-item:hover .cap-pop, .cap-item:focus-within .cap-pop{opacity:1; transform:translateY(0)} .cap-pop b{display:block; font-weight:500; color:var(--ink); margin-bottom:4px; font-size:15px} .cap-pop span{display:block; font-size:14px; line-height:1.5; color:var(--muted)} /* ---------- C · provocações hover-reveal (dark .hate) ---------- */ /* .hate e .tstm são seções escuras SEM .sec, então não pegavam o padding-block padrão e o conteúdo colava nas bordas. Damos o ritmo vertical aqui. */ /* Faixas escuras que NÃO usam .sec e por isso nasciam sem respiro vertical (conteúdo colado nas bordas). As fixadas (.stmt/.steps) ficam de fora de propósito: nelas o espaçamento é a própria animação. */ .hate, .tstm, .facts{padding-block:var(--pad-sec)} .head-block.center{text-align:center; margin-inline:auto} .hate-sub{margin:16px 0 0; color:rgba(248,248,236,.55)} .hate-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:clamp(40px,5vw,64px)} /* Agora mostra TÍTULO (a provocação) + RESPOSTA logo abaixo, sem hover. Antes era um flip que escondia a resposta atrás do mouse. */ .hate-card{position:relative; display:block; width:100%; text-align:left; background:rgba(248,248,236,.04); border:1px solid var(--line-dark); border-radius:var(--r); padding:22px; cursor:default} .hate-face{display:block} .hate-front{color:#F8F8EC; font-weight:500; font-size:17px; line-height:1.35} .hate-back{color:rgba(248,248,236,.58); font-size:15px; line-height:1.5; margin-top:10px} .hate-dot{display:block; width:18px; height:18px; border-radius:5px; background:var(--hc,var(--green)); margin-bottom:14px} .hate-ico{display:block; width:72px; height:72px; object-fit:contain; margin-bottom:14px} .hate-foot{text-align:center; margin:clamp(36px,5vw,52px) 0 0; color:rgba(248,248,236,.62)} .hate-foot a{display:inline-flex; align-items:center; gap:6px; font-family:'Oswald',sans-serif; font-weight:500; font-size:13px; letter-spacing:.1em; color:var(--green); margin-left:8px} .hate-foot a .arw{transition:transform .42s var(--ease)} .hate-foot a:hover .arw{transform:translateX(4px)} /* ---------- D · pilha vs plataforma (.pile) ---------- */ .pile-wrap{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); align-items:center; margin-top:clamp(44px,6vw,72px)} .pile-mess{position:relative; display:flex; flex-direction:column; gap:14px; padding:10px 0} .pile-chip{align-self:flex-start; transform:rotate(var(--pt,0)); background:var(--bg-2); border:1px dashed var(--line); border-radius:var(--r); padding:11px 16px; font-family:'Oswald',sans-serif; font-weight:400; font-size:12.5px; letter-spacing:.06em; color:var(--ink-soft); box-shadow:0 6px 16px rgba(54,54,54,.05)} .pile-chip:nth-child(even){margin-left:auto; margin-right:8%} .pile-chip:nth-child(odd){margin-left:6%} .pile-app{background:#FFFDF4; border:1px solid var(--line); border-radius:14px; box-shadow:0 34px 70px rgba(54,54,54,.14); padding:0 0 22px; overflow:hidden} .pile-bar{display:flex; align-items:center; gap:7px; padding:14px 18px; border-bottom:1px solid var(--line-2)} .pile-bar span{width:11px; height:11px; border-radius:50%; background:var(--line)} .pile-brand{margin-left:auto; font-family:'Oswald',sans-serif; font-weight:500; font-size:15px; letter-spacing:.06em; color:var(--ink)} .pile-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:20px} .pile-cell{display:flex; align-items:center; gap:9px; background:var(--bg); border:1px solid var(--line-2); border-radius:var(--r); padding:12px 12px; font-size:14px; color:var(--ink)} .pile-cell i{width:14px; height:14px; border-radius:4px; background:var(--hc,var(--green)); flex:none} .pile-note{text-align:center; margin:2px 20px 0; font-family:'Oswald',sans-serif; font-weight:500; font-size:11.5px; letter-spacing:.12em; color:var(--ink-soft)} /* ---------- E · depoimentos marquee (dark .tstm) ---------- */ .tstm{overflow:hidden} .tstm-head{text-align:center} .tstm-sub{margin:16px 0 0; color:rgba(248,248,236,.55)} .tstm-logos{display:flex; flex-wrap:wrap; justify-content:center; gap:12px 34px; margin:34px 0 0} .tstm-logo{display:inline-flex; align-items:center; gap:9px; font-family:'Oswald',sans-serif; font-weight:500; font-size:16px; letter-spacing:.06em; color:rgba(248,248,236,.62)} .tstm-logo i{width:22px; height:22px; border-radius:6px; background:rgba(248,248,236,.14); flex:none} .tstm-rows{display:flex; flex-direction:column; gap:16px; margin:clamp(40px,5vw,60px) 0 0} .tstm-marq{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)} .tstm-track{display:flex; gap:16px; width:max-content; will-change:transform} .tstm-card{flex:none; width:min(380px,82vw); background:rgba(248,248,236,.045); border:1px solid var(--line-dark); border-radius:var(--r); padding:22px 24px} .tstm-card blockquote{margin:0; color:rgba(248,248,236,.84); font-size:15.5px; line-height:1.55} .tstm-card figcaption{margin-top:14px; font-size:13px; color:rgba(248,248,236,.5)} .tstm-stats{display:flex; justify-content:center; gap:clamp(40px,8vw,120px); margin:clamp(44px,6vw,64px) auto 0; text-align:left} .tstm-stat{display:flex; align-items:baseline; gap:12px} .tstm-stat b{font-family:'Oswald',sans-serif; font-weight:700; font-size:clamp(2.4rem,4vw,3.4rem); line-height:.9; color:#F8F8EC; letter-spacing:-.01em} .tstm-stat span{font-size:13px; line-height:1.35; color:rgba(248,248,236,.55)} /* ---------- mobile dos 5 blocos ---------- */ @media(max-width:900px){ .qa-row{grid-template-columns:1fr; gap:26px; padding:44px 0} .qa-row.rev .qa-txt{order:0} /* texto sempre antes da imagem no mobile */ .qa-fig{order:-1} /* imagem no topo de cada bloco */ .cap-grid{grid-template-columns:1fr; gap:34px} /* sem hover no toque: o popover vira conteúdo fixo abaixo do item */ .cap-pop{position:static; width:auto; opacity:1; transform:none; box-shadow:none; border:0; border-left:2px solid var(--line); border-radius:0; background:transparent; padding:6px 0 0 2px; margin-top:2px} .cap-pop b{display:none} /* mobile: nao repetir o nome (mantem o rotulo + a descricao) */ .cap-item{padding-bottom:16px} .hate-grid{grid-template-columns:1fr} .hate-card{min-height:160px} /* faces são absolutas: altura fixa que comporta o verso */ .pile-wrap{grid-template-columns:1fr; gap:34px} .pile-chip:nth-child(even),.pile-chip:nth-child(odd){margin-left:0; margin-right:0} .tstm-stats{gap:40px} } @media(max-width:520px){ .tstm-stats{flex-direction:column; align-items:center; gap:22px; text-align:center} .tstm-stat{justify-content:center} } /* ============================================================ HERO PADRÃO DAS PÁGINAS INTERNAS (.hero-int) + FORMULÁRIO Split: texto à esquerda, painel à direita. Na contato o painel é o formulário. Título usa o block-wipe que a .hero já anima. Identidade Astunts: creme, hairline, Oswald caixa-alta nos rótulos. ============================================================ */ .hero-int .hero-in{align-items:center} /* na contato o painel (formulário) é alto: alinhar o texto ao TOPO da coluna, não centralizado, para o título casar com o topo do formulário. */ .hero-top .hero-in{align-items:start} .hero-int .hero-txt{max-width:560px} .hero-panel{justify-self:end; width:100%; max-width:520px} .cform{background:#FFFDF4; border:1px solid var(--line); border-radius:14px; padding:clamp(22px,2.4vw,30px); box-shadow:0 28px 64px rgba(54,54,54,.09)} .cf-row{display:grid; grid-template-columns:1fr 1fr; gap:14px} .cf-field{display:block; margin-top:14px} .cform > .cf-field:first-of-type, .cf-row .cf-field{margin-top:0} .cf-label{display:block; font-family:'Oswald',sans-serif; font-weight:500; font-size:11px; letter-spacing:.12em; color:var(--ink-soft); margin-bottom:7px} .cf-input{width:100%; font-family:inherit; font-size:15px; color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:12px 14px; transition:border-color .2s, box-shadow .2s} .cf-input::placeholder{color:var(--ink-soft)} .cf-input:focus{outline:none; border-color:var(--ink); box-shadow:0 0 0 3px rgba(54,54,54,.06)} textarea.cf-input{min-height:92px; resize:vertical; line-height:1.5} select.cf-input{appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:38px; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position:right 13px center} .cf-consent{font-size:12px; line-height:1.55; color:var(--muted); margin:16px 0 0} .cf-consent a{color:var(--ink); border-bottom:1px solid var(--line)} .cform .btn{margin-top:16px; width:100%; justify-content:center} .cf-done{margin:14px 0 0; font-size:13.5px; line-height:1.5; color:var(--ink); background:var(--green); border-radius:8px; padding:12px 14px} @media(max-width:900px){ .hero-panel{justify-self:stretch; max-width:none; margin-top:8px} } @media(max-width:420px){ .cf-row{grid-template-columns:1fr} } /* ============================================================ PÁGINA SOBRE (arquitetura espelhada do About do Nominal, conteúdo Astunts). Faixa de logos, missão, história, fatos, valores, time, carreiras. Sem travessão no conteúdo. ============================================================ */ /* faixa de logos */ .logostrip-sec{padding-top:clamp(38px,6vw,64px); padding-bottom:clamp(38px,6vw,64px)} .logostrip-lab{text-align:center; font-family:'Oswald',sans-serif; font-weight:500; font-size:12px; letter-spacing:.14em; color:var(--ink-soft); margin:0} .logostrip{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(22px,5vw,56px); margin-top:28px} .logostrip img{height:clamp(34px,4vw,46px); width:auto; opacity:.85} /* missão: statement grande e centralizado */ /* o .head-block trava em 900px no site inteiro; a missão precisa de mais largura para caber em duas linhas, então soltamos só aqui. */ .mission .head-block{max-width:1160px} .mission h2{font-size:clamp(1.5rem,2.9vw,2.3rem); line-height:1.18; max-width:1160px; margin-inline:auto} /* história: dois blocos imagem + texto alternados */ .story{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,72px); align-items:center; padding:clamp(40px,6vw,84px) 0} .story + .story{border-top:1px solid var(--line)} .story.rev .story-fig{order:2} .story-fig{margin:0; border-radius:14px; overflow:hidden; background:var(--bg-2); line-height:0} .story-fig img{width:100%; height:auto; display:block} .story-txt .eyebrow{display:inline-block; margin-bottom:14px} .story-txt h3{font-size:clamp(1.4rem,2.4vw,2rem); line-height:1.1; margin:0} /* o h3 nascia com margin:0 e o parágrafo com margin-top:0, então título e texto encostavam. 18px é o mesmo respiro do .head-block h2 (ver .acc-txt). */ .story-txt h3 + p{margin-top:18px} /* PADRÃO ÚNICO DE CONTEÚDO (o bloco "Me diz direto" da home, .qa-row, é a referência): título 48px em Oswald, descrição 17px em Roboto, com 14px de respiro entre título e texto. Vale para TODO bloco .story do site. */ .story-txt h2{font-size:clamp(1.9rem,3.6vw,3rem); line-height:1.18; letter-spacing:-.01em; margin:0} .story-txt h2 + p{margin-top:14px} .story-txt p.lead{font-size:clamp(1rem,1.1vw,1.0625rem); line-height:1.65} .story-txt p.lead + p.lead{margin-top:14px} /* faixa de fatos (seção escura) */ .facts-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:clamp(40px,5vw,64px)} .fact{text-align:center} .fact-ico{display:block; width:clamp(64px,7vw,88px); height:clamp(64px,7vw,88px); margin:0 auto 18px; object-fit:contain} .fact b{display:block; font-family:'Oswald',sans-serif; font-weight:700; font-size:clamp(2.4rem,5vw,3.6rem); line-height:.9; color:#F8F8EC; letter-spacing:-.01em} .fact span{display:block; margin-top:12px; font-size:14px; line-height:1.45; color:rgba(248,248,236,.6); max-width:22ch; margin-inline:auto} /* Secção "A diferença" (só na página soluções, id=diferenca): título numa linha, lead em duas, e os rótulos (Planeja/Cria/...) do tamanho do "Astunts Content". NÃO afeta os números da página Sobre. */ /* Cards no MESMO esquema visual da secção "Você vai odiar" (.hate): fundo do card, borda, cantos, ícone em cima à esquerda, título e descrição alinhados à esquerda, título em Roboto 500 (não caixa alta). */ #diferenca .facts-grid{gap:16px} #diferenca .fact{background:rgba(248,248,236,.04); border:1px solid var(--line-dark); border-radius:var(--r); padding:22px; text-align:left} #diferenca .fact-ico{width:72px; height:72px; margin:0 0 14px} #diferenca .fact b{font-family:'Roboto',sans-serif; font-weight:500; font-size:17px; line-height:1.35; letter-spacing:normal; text-transform:none; color:#F8F8EC} #diferenca .fact span{max-width:none; margin:10px 0 0; text-align:left; color:rgba(248,248,236,.58); font-size:15px; line-height:1.5} #diferenca h2{white-space:nowrap} #diferenca .lead.measure{max-width:64rem} @media (max-width:820px){ #diferenca h2{white-space:normal} #diferenca .lead.measure{max-width:46ch} } /* valores: grade de cards */ .values{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:clamp(18px,2.4vw,28px); margin-top:clamp(40px,5vw,64px)} .value{border-top:2px solid var(--ink); padding-top:20px} .value .vn{font-family:'Oswald',sans-serif; font-weight:500; font-size:12px; letter-spacing:.12em; color:var(--coral)} .value h3{font-size:18px; margin:10px 0 8px} .value p{font-size:14px; line-height:1.55; color:var(--muted); margin:0} /* time */ .team{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:clamp(20px,2.6vw,30px); margin-top:clamp(40px,5vw,64px)} .member{display:flex; flex-direction:column; align-items:flex-start} .member .av{width:clamp(60px,7vw,78px); height:clamp(60px,7vw,78px); border-radius:50%; display:grid; place-items:center; font-family:'Oswald',sans-serif; font-weight:700; font-size:clamp(20px,2.2vw,25px); color:#1C1C1C} .member .nm{font-family:'Oswald',sans-serif; font-weight:500; font-size:15px; letter-spacing:.02em; color:var(--ink); margin-top:14px} .member .ro{font-size:13px; color:var(--muted); margin-top:4px} /* carreiras (join) */ .join .join-in{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,72px); align-items:center} /* mesma caixa e mesmo tamanho das figuras da seção de história (.story-fig): preenche a coluna, com o mesmo raio e o mesmo fundo pastel. */ .join-fig{justify-self:end; width:100%; margin:0; border-radius:14px; overflow:hidden; background:var(--bg-2); line-height:0} .join-fig img{width:100%; height:auto; display:block} @media(max-width:900px){ .story{grid-template-columns:1fr; gap:24px; padding:36px 0} .story.rev .story-fig{order:-1} .story-fig{order:-1} .facts-grid{grid-template-columns:repeat(2,1fr); gap:30px 20px} .join .join-in{grid-template-columns:1fr; gap:30px} .join-fig{justify-self:stretch; max-width:none; order:-1} } @media(max-width:440px){ .facts-grid{grid-template-columns:1fr} } /* ---------- lista de vagas (Carreiras) ---------- */ .jobs{list-style:none; margin:clamp(36px,5vw,56px) 0 0; padding:0; border-top:1px solid var(--line)} .job{border-bottom:1px solid var(--line)} .job a{display:flex; align-items:center; gap:18px; padding:22px 6px; transition:padding-left .3s var(--ease)} .job a:hover{padding-left:16px} .job-t{font-family:'Oswald',sans-serif; font-weight:500; font-size:clamp(16px,2vw,20px); letter-spacing:.02em; color:var(--ink); flex:1 1 auto} .job-tags{display:flex; flex-wrap:wrap; gap:8px; flex:0 1 auto} .job-tags span{font-size:12px; color:var(--muted); border:1px solid var(--line); border-radius:6px; padding:4px 10px; white-space:nowrap} .job-arw{font-size:20px; color:var(--ink); flex:none; transition:transform .3s var(--ease)} .job a:hover .job-arw{transform:translateX(5px)} @media(max-width:640px){ .job a{flex-wrap:wrap; gap:10px; padding:18px 4px} .job-tags{order:3; flex-basis:100%} } /* ===== Carreiras: ritmo claro/escuro entre seções ===== */ /* Benefícios em faixa clara: cards claros com texto escuro */ #beneficios .hate-card{background:var(--bg); border:1px solid var(--line)} #beneficios .hate-front{color:var(--ink)} #beneficios .hate-back{color:var(--muted)} /* Vagas em faixa escura: lista clara sobre fundo escuro */ #vagas.dark .jobs{border-top-color:var(--line-dark)} #vagas.dark .job{border-bottom-color:var(--line-dark)} #vagas.dark .job-t{color:#F8F8EC} #vagas.dark .job-arw{color:#F8F8EC} #vagas.dark .job-tags span{color:rgba(248,248,236,.6); border-color:var(--line-dark)} /* ===== Newsletter: campo de e-mail inline ===== */ .nl-form{display:flex; gap:10px; justify-content:center; align-items:stretch; flex-wrap:wrap; max-width:520px; margin:0 auto} .nl-input{flex:1 1 260px; min-width:0; padding:15px 18px; border:1px solid var(--line); border-radius:var(--r); background:var(--bg); font-family:'Roboto',sans-serif; font-size:15px; color:var(--ink)} .nl-input::placeholder{color:var(--muted)} .nl-input:focus{outline:none; border-color:var(--ink)} .nl-form .btn{flex:0 0 auto; border:0; cursor:pointer} @media(max-width:520px){ .nl-form{flex-direction:column} .nl-form .btn{width:100%; justify-content:center} } /* ===== Rodapé: colunas institucionais + banda de setores ===== */ .foot-right{display:flex; flex-direction:column; gap:clamp(38px,4.5vw,56px)} .foot-right .foot-cols{grid-template-columns:repeat(4,1fr)} .foot-sectors h4{font-family:'Oswald',sans-serif; font-weight:500; font-size:12px; letter-spacing:.14em; color:#F8F8EC; margin:0 0 18px} .foot-sectors-sub{font-weight:400; letter-spacing:.06em; color:rgba(248,248,236,.4)} .foot-sectors ul{list-style:none; margin:0; padding:0; columns:4; column-gap:24px} .foot-sectors li{margin:0 0 12px; break-inside:avoid} .foot-sectors a, .foot-sectors span{font-size:14px; letter-spacing:-.01em; color:rgba(248,248,236,.62); transition:color .3s var(--ease)} .foot-sectors a:hover{color:#F8F8EC} @media(max-width:900px){ .foot-right .foot-cols{grid-template-columns:1fr 1fr} .foot-sectors ul{columns:3} } @media(max-width:520px){ .foot-right .foot-cols{grid-template-columns:1fr 1fr} .foot-sectors ul{columns:2} } /* ---------- cards de caso (Casos) ---------- */ .cases{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:clamp(16px,2vw,22px); margin-top:clamp(40px,5vw,64px)} .case{background:#FFFDF4; border:1px solid var(--line); border-radius:var(--r); padding:24px; display:flex; flex-direction:column} .case-tag{align-self:flex-start; font-family:'Oswald',sans-serif; font-weight:500; font-size:11px; letter-spacing:.1em; color:var(--ink); background:var(--cc,var(--green)); border-radius:6px; padding:5px 10px} .case-num{font-family:'Oswald',sans-serif; font-weight:700; font-size:clamp(2rem,3.4vw,2.8rem); line-height:1; color:var(--ink); margin:18px 0 12px; letter-spacing:-.01em} .case-d{font-size:14px; line-height:1.55; color:var(--muted); margin:0} .case-q{font-size:14px; line-height:1.5; color:var(--ink); margin:16px 0 0; font-style:italic} .case-au{font-family:'Oswald',sans-serif; font-weight:400; text-transform:none; font-size:12px; letter-spacing:.04em; color:var(--ink-soft); margin-top:12px} /* ---------- cards de post (Blog) ---------- */ .post{display:flex; flex-direction:column} .post-meta{display:block; margin:14px 0 8px; font-size:12.5px; color:var(--ink-soft)} .post-cat{font-family:'Oswald',sans-serif; font-weight:500; font-size:11px; letter-spacing:.1em; color:var(--coral)} /* 1.02 (herdado da regra global de h1..h4) serve para título de uma linha. O título de artigo quebra em duas ou três e as linhas se misturavam. */ .post h3{transition:color .25s; line-height:1.16} .post:hover h3{color:var(--coral)} /* ============================================================ PÁGINAS LEGAIS (documento de leitura longa) ============================================================ */ /* Mesmo respiro e mesma escala de título do .hero-compact: legais, artigos e vagas ficam no mesmo padrão das demais internas. O h1 usava a escala gigante do hero da home (até 5.6rem) e destoava de tudo. */ .doc-hero{padding:calc(var(--nav-h0,148px) + 46px) 0 54px; border-bottom:1px solid var(--line)} .doc-hero h1{font-size:clamp(2rem,4.2vw,3.5rem); line-height:1.05; max-width:27ch} .doc-hero .eyebrow{display:inline-block; margin-bottom:16px} .doc-hero h1{max-width:20ch} .doc-updated{margin-top:16px; font-size:13px; color:var(--ink-soft)} .doc-note{max-width:760px; margin:26px 0 0; background:rgba(245,144,117,.12); border:1px solid var(--coral); border-radius:var(--r); padding:16px 18px; font-size:13.5px; line-height:1.55; color:var(--ink)} .doc-note b{color:var(--ink)} .doc{max-width:760px; margin:0 auto; padding:clamp(40px,6vw,72px) 0} .doc-toc{margin:0 0 clamp(36px,5vw,52px); padding:20px 22px; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r)} .doc-toc h2{font-size:12px; letter-spacing:.14em; margin:0 0 12px} .doc-toc ol{margin:0; padding-left:20px; columns:2; column-gap:28px; font-size:13.5px; line-height:1.9} .doc-toc a{color:var(--ink-2); border-bottom:1px solid transparent} .doc-toc a:hover{border-color:var(--line)} .doc-sec{padding-top:clamp(30px,4vw,44px)} .doc-sec + .doc-sec{margin-top:clamp(30px,4vw,44px); border-top:1px solid var(--line-2)} .doc-sec h2{font-size:clamp(1.1rem,1.8vw,1.4rem); margin:0 0 14px; scroll-margin-top:120px} .doc-sec h3{font-size:1rem; margin:22px 0 8px} .doc-sec p{margin:0 0 14px; color:var(--ink-2); line-height:1.7} .doc-sec ul, .doc-sec ol{margin:0 0 14px; padding-left:22px; color:var(--ink-2); line-height:1.7} .doc-sec li{margin-bottom:8px} .doc-sec strong{color:var(--ink); font-weight:500} .doc-sec a{color:var(--ink); border-bottom:1px solid var(--line)} @media(max-width:640px){ .doc-toc ol{columns:1} } /* central legal: cards */ .legal-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin-top:clamp(40px,5vw,64px)} /* ============================================================ ARTIGO (páginas de post do Conteúdo) Reaproveita .doc-hero e .doc, que já dão a coluna de leitura de 760px e a tipografia de texto corrido das páginas legais. ============================================================ */ /* ---------- cabeçalho da vaga: título à esquerda, compartilhar à direita ---------- */ .doc-hero-in{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(24px,4vw,56px); align-items:start} .doc-hero-txt{min-width:0} .share{display:flex; flex-direction:column; gap:10px; align-items:flex-start; padding-top:6px} .share-t{font-family:'Oswald',sans-serif; font-weight:500; font-size:11px; letter-spacing:.16em; color:var(--ink-soft)} .share-btns{display:flex; gap:8px} .share-b{display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; flex:none; padding:0; cursor:pointer; background:#FFFDF4; border:1px solid var(--line); border-radius:var(--r); color:var(--ink); transition:background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease)} .share-b:hover{background:var(--bg-2); border-color:var(--ink-soft); transform:translateY(-2px)} .share-b svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round} .share-ok{font-size:12px; color:var(--green-ink,var(--ink-soft))} /* segundo bloco, no fim do texto do artigo: mesma peça, separada do corpo por uma linha, como na referência. */ .share-fim{border-top:1px solid var(--line); margin-top:clamp(30px,4vw,44px); padding-top:clamp(24px,3vw,34px)} @media(max-width:760px){ /* no celular o título ocupa a largura toda e os botões vão para baixo */ .doc-hero-in{grid-template-columns:1fr} .share{padding-top:4px} } .art-meta{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:20px; font-size:13px; color:var(--ink-soft)} .art-cat{font-family:'Oswald',sans-serif; font-weight:500; font-size:11px; letter-spacing:.14em; background:var(--ac,var(--yellow)); color:var(--ink); border-radius:4px; padding:5px 10px} /* A arte do artigo ocupa a largura inteira do container e PREENCHE o box: proporção fixa + object-fit:cover, como na referência. Antes era max-width 1000px com height:auto, então a imagem ditava a altura e sobrava fundo ao redor. */ .art-fig{margin:clamp(30px,4vw,48px) auto 0; border-radius:14px; overflow:hidden; background:var(--bg-2); line-height:0; aspect-ratio:16/8} .art-fig img{width:100%; height:100%; object-fit:cover; object-position:center; display:block} @media(max-width:760px){ /* no celular a faixa panorâmica corta demais: proporção mais alta */ .art-fig{aspect-ratio:16/11} } .art-lead{font-size:clamp(1.02rem,1.4vw,1.2rem); line-height:1.62; color:var(--ink-2); margin:0 0 4px} /* sugestões no fim do artigo, antes do "ver todos". auto-fit em vez de 3 colunas fixas: hoje são 3 artigos publicados, então cada página sugere 2 e eles preenchem a largura sem buraco. Quando entrar o quarto artigo, viram 3 cartões sozinhos, sem mexer no CSS. */ .mais-artigos{padding:clamp(40px,6vw,72px) 0 clamp(30px,4vw,44px); border-top:1px solid var(--line)} /* o MÁXIMO de 420px é o que impede a imagem de virar um cartaz: com só 2 sugestões, 1fr esticava cada cartão para ~600px e a arte quadrada crescia junto. A proporção fixa na figura protege o resto dos casos. */ .mais-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),420px)); gap:clamp(24px,3vw,40px); margin-top:clamp(30px,4vw,44px); justify-content:start} /* Imagem dos cartões de artigo, na listagem e nas sugestões. Sem esta regra valia a .cols3 .col-fig, que é da seção "O problema" e fixa a largura em 150px para ILUSTRAÇÃO pequena: a foto de um artigo sairia minúscula e esticada (object-fit:fill). Aqui a foto ocupa o cartão inteiro, com proporção fixa e corte por cover. */ .post .col-fig{width:100%; margin:0; aspect-ratio:16/11; overflow:hidden; border-radius:var(--r); background:var(--bg-2)} .post .col-fig img{width:100%; height:100%; object-fit:cover; object-position:center; display:block} .art-nav{max-width:760px; margin:0 auto; padding:clamp(28px,4vw,40px) 0 0; border-top:1px solid var(--line)} .art-back{display:inline-flex; align-items:center; gap:9px; font-family:'Oswald',sans-serif; font-weight:500; font-size:13px; letter-spacing:.1em; color:var(--ink)} .art-back .arw{transition:transform .42s var(--ease)} .art-back:hover .arw{transform:translateX(-4px)} /* formulário de candidatura das páginas de vaga: mesma coluna de leitura do artigo, para o olho não ter que atravessar a tela inteira. */ /* retorno do envio, dentro do próprio formulário */ .form-msg{margin:16px 0 0; padding:13px 16px; border-radius:var(--r); font-size:14.5px; line-height:1.5} .form-msg.ok{background:rgba(154,224,190,.28); border:1px solid rgba(54,54,54,.10); color:var(--ink)} .form-msg.erro{background:rgba(245,144,117,.16); border:1px solid rgba(245,144,117,.45); color:var(--ink)} /* campo isca do anti-spam: fora da tela, invisível e fora da tabulação */ .hp{position:absolute!important; left:-9999px!important; width:1px; height:1px; overflow:hidden} .apply-box{max-width:760px; margin-inline:auto} .apply-box .cform{margin-top:clamp(30px,4vw,44px)} /* o formulário de candidatura mora DENTRO da coluna de leitura, como continuação de "Como é o processo", e não numa seção à parte. */ .doc-sec .cform{margin-top:clamp(24px,3vw,34px)} /* ---------- índice fixo das páginas de documento ---------- Usado pelas VAGAS, pelas páginas LEGAIS (privacidade, termos, segurança, canal de ética) e pelos ARTIGOS. A coluna de leitura é 760px e sobra tela à esquerda: o índice ocupa essa faixa, gruda ao rolar e marca a seção em que a pessoa está. Nas legais ele substituiu a caixa de índice que ficava no topo do texto. (Os nomes .job-* vieram das vagas, que foram a primeira página a usar o padrão; hoje valem para todas.) */ .job-layout{display:grid; grid-template-columns:minmax(0,230px) minmax(0,760px); gap:clamp(28px,4vw,64px); justify-content:center; align-items:start} .job-layout .doc{margin:0; max-width:760px} /* A margem inferior entra na conta do sticky: é ela que faz o índice PARAR antes do fim da coluna, em vez de descer até encostar no divisor da próxima seção. max-height protege telas baixas. */ .job-toc{position:sticky; top:calc(var(--nav-h0,148px) + 30px); padding-top:clamp(40px,6vw,72px); margin-bottom:clamp(48px,7vw,96px); max-height:calc(100vh - var(--nav-h0,148px) - 60px); overflow:auto; scrollbar-width:none} /* Firefox */ .job-toc::-webkit-scrollbar{width:0; height:0} /* Chrome, Safari */ /* a barra só aparece quando a pessoa chega perto, e fina. Uma barra permanente dentro de outra barra polui e confunde. */ .job-toc:hover, .job-toc:focus-within{scrollbar-width:thin} .job-toc:hover::-webkit-scrollbar{width:5px} .job-toc::-webkit-scrollbar-track{background:transparent} .job-toc::-webkit-scrollbar-thumb{background:var(--line); border-radius:3px} .job-toc:hover::-webkit-scrollbar-thumb{background:var(--line)} /* Índices longos (privacidade tem 19 seções) nascem encolhidos, com um botão para abrir. Evita a lista tomar a tela inteira e evita a rolagem interna no caso mais comum. */ .job-toc.encolhido{overflow:hidden} .job-toc.encolhido ul{max-height:322px; overflow:hidden; -webkit-mask-image:linear-gradient(180deg,#000 74%,transparent); mask-image:linear-gradient(180deg,#000 74%,transparent)} .job-toc-mais{display:inline-flex; align-items:center; gap:8px; margin-top:8px; padding:7px 0 7px 16px; background:none; border:0; cursor:pointer; font-family:'Oswald',sans-serif; font-weight:500; font-size:11px; letter-spacing:.14em; color:var(--ink-soft); transition:color .3s var(--ease)} .job-toc-mais:hover{color:var(--ink)} .job-toc-mais i{display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; flex:none; border:1px solid var(--line); border-radius:4px; font-style:normal; font-size:12px; line-height:1} .job-toc-t{display:block; font-family:'Oswald',sans-serif; font-weight:500; font-size:11px; letter-spacing:.16em; color:var(--ink-soft); margin-bottom:14px} .job-toc ul{list-style:none; margin:0; padding:0; border-left:1px solid var(--line)} .job-toc li{margin:0} .job-toc a{display:block; padding:9px 0 9px 16px; margin-left:-1px; border-left:2px solid transparent; font-size:14px; line-height:1.35; color:var(--ink-soft); transition:color .3s var(--ease), border-color .3s var(--ease)} .job-toc a:hover{color:var(--ink)} .job-toc a.on{color:var(--ink); border-left-color:var(--green)} @media(max-width:900px){ /* no celular não há faixa lateral: o índice viraria uma parede antes do texto */ .job-layout{grid-template-columns:1fr} .job-toc{display:none} } .legal-card{display:block; background:#FFFDF4; border:1px solid var(--line); border-radius:var(--r); padding:26px; transition:transform .3s var(--ease), border-color .3s} .legal-card:hover{transform:translateY(-3px); border-color:var(--ink)} .legal-card h3{margin:0 0 8px} .legal-card p{margin:0; font-size:14px; color:var(--muted); line-height:1.55} .legal-card .arw{display:inline-block; margin-top:14px; color:var(--ink)} /* ---------- bloco de contato abaixo do texto (contato) ---------- */ /* Seção do formulário de contato (abaixo do hero, quando o hero virou padrão com ilustração): canais à esquerda, formulário à direita. */ .contact-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,5vw,72px); align-items:start} .contact-grid .cform-side{justify-self:end; width:100%; max-width:520px} @media(max-width:900px){ .contact-grid{grid-template-columns:1fr} .contact-grid .cform{max-width:none} .contact-grid .cform,.contact-grid .cform-side{max-width:none} } .contact-ways{margin-top:34px; max-width:440px} .cway{display:flex; gap:15px; align-items:flex-start; padding:18px 0; border-top:1px solid var(--line)} .cway:last-child{border-bottom:1px solid var(--line)} /* mesmo padrão dos ícones sociais do rodapé (.foot-switch): SVG em currentColor dentro de um quadrado com hairline. Aqui em fundo claro. */ .cway-ic{width:40px; height:40px; flex:none; display:grid; place-items:center; border:1px solid var(--line); border-radius:var(--r); color:var(--ink-soft)} .cway-ic svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round} .cway-body{min-width:0} .cway-k{display:block; font-family:'Oswald',sans-serif; font-weight:500; font-size:11px; letter-spacing:.14em; color:var(--ink-soft); margin-bottom:6px} .cway-v{display:block; font-size:16px; color:var(--ink)} a.cway-v{border-bottom:1px solid var(--line); width:fit-content; transition:border-color .2s} a.cway-v:hover{border-color:var(--ink)} .cway-d{margin:8px 0 0; font-size:13.5px; line-height:1.5; color:var(--muted)} /* ============================================================ PADRÃO "BLOCO DE CONTEÚDO" — bloco consolidado no fim do arquivo (fonte de verdade única). 1) Respiro GLOBAL de 14px entre o eyebrow e o título de seção, em qualquer página. Heros usam h1 e ficam de fora. História, manifesto e o hero do baralho já criam o respiro pelo margin-bottom do próprio eyebrow, então zeram o do título. 2) Cabeçalhos das páginas de produto (Content/Chat), Soluções e Empresa no tamanho do padrão: título 48px, descrição 17px. ============================================================ */ .eyebrow + h2, .eyebrow + h3{margin-top:14px} .story-txt .eyebrow + h2, .stmt .eyebrow + h2, .engen-belowhead .eyebrow + h2{margin-top:0} /* os títulos com regra própria (.qa-q) ignoram o seletor genérico acima; reforçamos aqui o mesmo respiro de 14px do padrão. */ .qa-txt .eyebrow + .qa-q{margin-top:14px} body:is([data-page="content"],[data-page="chat"],[data-page="solucoes"],[data-page="sobre"],[data-page="conteudo"],[data-page="contato"],[data-page="home"],[data-page="carreiras"],[data-page="post"],[data-page="setor"]) .head-block h2, body:is([data-page="content"],[data-page="chat"],[data-page="solucoes"],[data-page="sobre"],[data-page="conteudo"],[data-page="contato"],[data-page="home"],[data-page="carreiras"],[data-page="post"],[data-page="setor"]) .sol h2, body:is([data-page="content"],[data-page="chat"],[data-page="solucoes"],[data-page="sobre"],[data-page="conteudo"],[data-page="contato"],[data-page="home"],[data-page="carreiras"],[data-page="post"],[data-page="setor"]) .canais h2, body:is([data-page="content"],[data-page="chat"],[data-page="solucoes"],[data-page="sobre"],[data-page="conteudo"],[data-page="contato"],[data-page="home"],[data-page="carreiras"],[data-page="post"],[data-page="setor"]) .cta-final h2, body[data-page="sobre"] .join h2, body[data-page="contato"] .contact-side h2, body[data-page="home"] .tstm-head h2{ font-size:clamp(1.9rem,3.6vw,3rem); line-height:1.18; letter-spacing:-.01em; margin-top:14px; } body:is([data-page="content"],[data-page="chat"],[data-page="solucoes"],[data-page="sobre"],[data-page="conteudo"],[data-page="contato"],[data-page="home"],[data-page="carreiras"],[data-page="post"],[data-page="setor"]) .head-block .lead, body:is([data-page="content"],[data-page="chat"],[data-page="solucoes"],[data-page="sobre"],[data-page="conteudo"],[data-page="contato"],[data-page="home"],[data-page="carreiras"],[data-page="post"],[data-page="setor"]) .sol .lead, body:is([data-page="content"],[data-page="chat"],[data-page="solucoes"],[data-page="sobre"],[data-page="conteudo"],[data-page="contato"],[data-page="home"],[data-page="carreiras"],[data-page="post"],[data-page="setor"]) .canais .lead, body:is([data-page="content"],[data-page="chat"],[data-page="solucoes"],[data-page="sobre"],[data-page="conteudo"],[data-page="contato"],[data-page="home"],[data-page="carreiras"],[data-page="post"],[data-page="setor"]) .cta-final .lead, body[data-page="sobre"] .join .lead{ font-size:clamp(1rem,1.1vw,1.0625rem); line-height:1.65; margin-top:14px; } /* A MISSÃO entra no mesmo tamanho do padrão (48px via regra acima), só com uma caixa mais larga por ser centralizada e mais longa, para caber em duas linhas. */ body[data-page="sobre"] .mission .head-block, body[data-page="sobre"] .mission h2{max-width:1264px} /* === SEG-GRID (setor: cartoes de segmento com intro) === */ .seg-grid{list-style:none; margin:clamp(36px,5vw,56px) 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px} .seg-card{display:grid; grid-template-columns:1fr auto; column-gap:20px; row-gap:10px; align-items:start; padding:28px 26px; height:100%; border:1px solid var(--line); border-radius:var(--r); background:var(--bg); transition:border-color .28s var(--ease), transform .28s var(--ease), box-shadow .28s var(--ease)} .seg-card:hover{border-color:var(--ink); transform:translateY(-3px); box-shadow:0 18px 44px rgba(54,54,54,.08)} .seg-t{grid-column:1; grid-row:1; align-self:center; font-family:'Oswald',sans-serif; font-weight:500; letter-spacing:.02em; text-transform:uppercase; font-size:clamp(17px,1.6vw,21px); line-height:1.15; color:var(--ink)} .seg-arw{grid-column:2; grid-row:1; align-self:center; font-size:20px; color:var(--ink); transition:transform .28s var(--ease)} .seg-card:hover .seg-arw{transform:translateX(5px)} .seg-d{grid-column:1 / -1; grid-row:2; margin:0; font-size:15px; line-height:1.55; color:var(--muted)} /* card 'Ver todos' do grid de segmentos irmãos */ .seg-card-all{background:var(--ink); border-color:transparent} .seg-card-all .seg-t,.seg-card-all .seg-arw{color:#F8F8EC} .seg-card-all .seg-d{color:rgba(248,248,236,.60)} .seg-card-all:hover{border-color:transparent; box-shadow:0 18px 44px rgba(54,54,54,.18)} @media (max-width:720px){ .seg-grid{grid-template-columns:1fr; gap:12px} .seg-card{padding:22px 20px} } /* === MENU SOLUCOES: todos os setores em 2 colunas === */ .mega[data-mega-panel="solucoes"] .mega-in{max-width:640px} .mega[data-mega-panel="solucoes"] .mega-col ul{ display:block; column-count:2; column-gap:clamp(30px,3vw,52px)} .mega[data-mega-panel="solucoes"] .mega-col li{break-inside:avoid} /* na 1a linha de cada coluna, a hairline de topo vira divisor limpo */ @media(max-width:560px){ .mega[data-mega-panel="solucoes"] .mega-in{max-width:420px} .mega[data-mega-panel="solucoes"] .mega-col ul{column-count:1} } /* === DORES (subsetor): numeros 01/02/03 em destaque === */ #dores .value{border-top-color:var(--coral)} #dores .value .vn{display:block; font-size:clamp(2.4rem,3.6vw,3.2rem); font-weight:700; letter-spacing:0; line-height:1; color:var(--coral); margin:2px 0 14px} /* faixa que liga as duas colunas verdes: Content + Chat no mesmo painel */ .cmp-both{display:flex; align-items:center; gap:14px; padding:18px clamp(18px,2vw,24px); background:rgba(148,237,204,.16); border-top:1px solid var(--ink)} .cmp-both .cmp-both-ic{flex:none; width:22px; height:22px; border-radius:6px; background:var(--green); position:relative} .cmp-both .cmp-both-ic::after{content:""; position:absolute; left:7px; top:4px; width:6px; height:11px; border:2px solid var(--ink); border-top:0; border-left:0; transform:rotate(45deg)} .cmp-both p{margin:0; font-size:14.5px; line-height:1.5; color:var(--ink)} .cmp-both b{font-weight:500; font-family:'Oswald',sans-serif; letter-spacing:.01em} /* Content/Chat: título e descrição da solução em 2 linhas */ body:is([data-page="content"],[data-page="chat"]) .sol h2{max-width:26ch} body:is([data-page="content"],[data-page="chat"]) .sol .lead{max-width:none}