/* ========================================================================== Base extraída de terascape.framer.website Tokens, escala tipográfica, primitivas de layout e motion. Valores medidos no site em execução. ========================================================================== */ /* -------------------------------------------------------------------------- 1. FONTES Inter Display é o corte de display do Inter v4. Opção A (fiel): arquivos InterDisplay de rsms.me/inter, auto-hospedados. Opção B (prática): Inter variável do Google Fonts com optical sizing. -------------------------------------------------------------------------- */ /* A fonte entra por no do index.html: @import bloqueia a renderização e custa uma viagem a mais. A família é a mesma. */ /* -------------------------------------------------------------------------- 2. TOKENS -------------------------------------------------------------------------- */ :root { /* Tipografia */ --font-sans: "Inter Display", "Inter", "Inter reserva", "Inter reserva win", -apple-system, sans-serif; --font-features: "cv03" on, "cv04" on, "cv09" on, "cv11" on; /* Texto */ --text-primary: #333333; --text-secondary: #595959; /* era #808080: 3,9:1 reprovava no contraste */ --text-muted: rgba(0, 0, 0, .58); /* era .3: 2,1:1 reprovava no contraste */ --text-strong: #000000; --text-invert: #ffffff; --text-invert-soft: rgba(255, 255, 255, .8); /* Superfícies */ --bg: #ffffff; --bg-alt: #f5f5f5; --bg-warm: #faf9f5; --bg-card: rgba(0, 0, 0, .04); --bg-cool: #ebf2f8; --glass: rgba(255, 255, 255, .6); --glass-strong: rgba(255, 255, 255, .7); --glass-blur: blur(5px); /* Linhas */ --line: rgba(0, 0, 0, .16); --line-soft: rgba(0, 0, 0, .1); --line-faint: rgba(0, 0, 0, .06); --line-invert: rgba(255, 255, 255, .4); --underline: #efeeec; /* Overlays sobre imagem */ --scrim-sky: rgba(30, 50, 79, .2); --scrim-flat: rgba(0, 0, 0, .2); --scrim-bottom: linear-gradient(rgba(11, 20, 34, 0) 0%, rgba(10, 19, 33, .2) 100%); /* Acento (declarado no original, mas não usado na UI) */ --accent: #ff462e; --blue-500: #4e8bbf; --blue-600: #3a6e9c; --blue-100: #d6ecff; --cyan-100: #a6ecff; --slate-500: #64748b; /* Layout */ --container: 1400px; --gutter: 40px; --header-h: 80px; --sticky-top: 132px; --radius: 4px; /* Ritmo vertical */ --section-y: 184px; /* era 120, depois 152 */ --gap-xl: 80px; --gap-l: 60px; --gap-m: 48px; --gap-s: 32px; --gap-xs: 20px; --gap-2xs: 12px; /* Curvas — as três do site */ --ease-reveal: cubic-bezier(0.6, 0.4, 0, 1); /* wipes de clip-path */ --ease-enter: cubic-bezier(0.8, 0.2, 0, 1); /* entradas e fades */ --ease-ui: cubic-bezier(0.4, 0, 0.2, 1); /* micro-interação */ --ease-spring: cubic-bezier(0.5, 0, 0.1, 1); /* aprox. do spring */ --ease-input: cubic-bezier(.44, 0, .56, 1); /* Durações */ --dur-reveal: 1300ms; --dur-enter: 400ms; --dur-fade: 2000ms; --dur-spring: 900ms; --dur-ui: 300ms; --stagger: 100ms; /* Parallax */ --parallax-hero: 0.30; --parallax-image: 0.16; /* Escala tipográfica — desktop */ --fs-display-xl: 92px; --lh-display-xl: 96px; --ls-display-xl: -0.3px; --fs-display-l: 64px; --lh-display-l: 72px; --ls-display-l: -1.1px; --fs-display-m: 52px; --lh-display-m: 64px; --ls-display-m: -1px; --fs-heading-l: 40px; --lh-heading-l: 52px; --ls-heading-l: -0.6px; --fs-heading-m: 28px; --lh-heading-m: 38px; --ls-heading-m: -0.1px; --fs-heading-s: 20px; --lh-heading-s: 26px; --ls-heading-s: -0.1px; --fs-body-l: 16px; --lh-body-l: 22px; --ls-body-l: 0px; /* era 18/24 */ --fs-body-m: 16px; --lh-body-m: 20px; --ls-body-m: 0px; --fs-label: 14px; --lh-label: 18px; --ls-label: 0.2px; --fs-caption: 12px; --lh-caption: 14px; --ls-caption: 0.1px; } @media (max-width: 1199px) { :root { --section-y: 136px; --gutter: 32px; --fs-display-xl: 62px; --lh-display-xl: 66px; --ls-display-xl: -1px; --fs-display-l: 54px; --lh-display-l: 64px; --ls-display-l: -0.8px; --fs-display-m: 34px; --lh-display-m: 42px; --ls-display-m: -0.6px; --fs-heading-l: 28px; --lh-heading-l: 38px; --ls-heading-l: -0.3px; --fs-heading-m: 24px; --lh-heading-m: 32px; --ls-heading-m: -0.2px; --fs-heading-s: 18px; --lh-heading-s: 26px; --ls-heading-s: 0px; --fs-body-l: 16px; --lh-body-l: 24px; --fs-body-m: 15px; --lh-body-m: 20px; --ls-body-m: 0.1px; --fs-label: 12px; --fs-caption: 13px; } } @media (max-width: 809px) { :root { --section-y: 104px; --gutter: 20px; --gap-xl: 48px; --gap-l: 40px; --gap-m: 32px; --fs-display-xl: 52px; --lh-display-xl: 52px; --ls-display-xl: -0.5px; --fs-display-l: 32px; --lh-display-l: 40px; --ls-display-l: -0.4px; --fs-display-m: 28px; --lh-display-m: 36px; --ls-display-m: -0.3px; --fs-heading-l: 24px; --lh-heading-l: 32px; --ls-heading-l: -0.2px; --fs-heading-m: 20px; --lh-heading-m: 28px; --ls-heading-m: -0.1px; --fs-heading-s: 16px; --lh-heading-s: 24px; --fs-body-l: 14px; --lh-body-l: 20px; --fs-body-m: 14px; --lh-body-m: 18px; --ls-body-m: 0.1px; --fs-caption: 10px; } } /* -------------------------------------------------------------------------- A INTER, HOSPEDADA AQUI Vinha do Google Fonts, e em 4G lento demorava 6,3s para chegar: o navegador precisa abrir conexão com dois servidores e fazer duas idas e voltas antes de começar a baixar o arquivo. Agora ela vem do mesmo servidor do site, comprimida, e o pede o arquivo latino com prioridade. É a fonte variável: um arquivo só cobre todos os pesos de 100 a 900. O latin-ext só é baixado se aparecer na página uma letra que não exista no latin — em português isso não acontece, então na prática são 71KB. Baixada de fonts.gstatic.com em 11/09/2026. Licença SIL Open Font 1.1. -------------------------------------------------------------------------- */ @font-face{ font-family:"Inter"; src:url("../fonts/inter-latin.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family:"Inter"; src:url("../fonts/inter-latin-ext.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap; unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* -------------------------------------------------------------------------- FONTE DE RESERVA COM AS MEDIDAS DA INTER A Inter vem do Google Fonts, então nos primeiros instantes o texto é desenhado com a fonte do sistema. No Mac ela é 6,6% mais estreita que a Inter; no Windows, 6% mais larga. Quando a Inter chega, tudo se reorganiza — no site publicado isso valia 0,21 de CLS, o dobro do limite que o Google considera aceitável. Estas duas faces são a fonte do sistema esticada ou encolhida para ocupar exatamente o espaço da Inter. Os valores foram medidos, não chutados: uma frase de 76 letras em 100px, com e sem Inter. A primeira resolve no Mac (Helvetica Neue), a segunda no Windows e no Android (Arial, Segoe UI, Roboto). Onde nenhuma existir, cai no sans-serif de sempre. Os números saem de medir a mesma frase nas duas fontes, em 28, 52 e 92px: as do sistema são de 4% a 6% mais largas que a Inter. O ajuste as deixa uns 2% mais estreitas, de propósito — reserva mais larga empurra uma palavra para a linha seguinte, e foi assim que a hera ganhou uma quarta linha e pulou 36px quando a Inter chegou. -------------------------------------------------------------------------- */ @font-face{ font-family:"Inter reserva"; src:local("Helvetica Neue"), local("HelveticaNeue"); size-adjust:94%; font-weight:100 900; font-style:normal; } @font-face{ font-family:"Inter reserva win"; src:local("Arial"), local("Segoe UI"), local("Roboto"); size-adjust:93%; font-weight:100 900; font-style:normal; } /* -------------------------------------------------------------------------- 3. RESET MÍNIMO + BASE -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text-primary); font-family: var(--font-sans); font-size: var(--fs-body-l); line-height: var(--lh-body-l); font-weight: 300; /* era 400: uma casa mais fina em toda a página */ font-feature-settings: var(--font-features); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; } /* height:auto é obrigatório: as imagens levam os atributos width e height no HTML, e sem isso o navegador usa a altura do atributo enquanto o max-width encolhe a largura — a arte sai esticada */ img, video { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4, h5, h6, p { margin: 0; font-weight: 300; } /* era 400 */ /* -------------------------------------------------------------------------- 4. ESCALA TIPOGRÁFICA -------------------------------------------------------------------------- */ .t-display-xl { font-size: var(--fs-display-xl); line-height: var(--lh-display-xl); letter-spacing: var(--ls-display-xl); } .t-display-l { font-size: var(--fs-display-l); line-height: var(--lh-display-l); letter-spacing: var(--ls-display-l); } .t-display-m { font-size: var(--fs-display-m); line-height: var(--lh-display-m); letter-spacing: var(--ls-display-m); } .t-heading-l { font-size: var(--fs-heading-l); line-height: var(--lh-heading-l); letter-spacing: var(--ls-heading-l); } .t-heading-m { font-size: var(--fs-heading-m); line-height: var(--lh-heading-m); letter-spacing: var(--ls-heading-m); } .t-heading-s { font-size: var(--fs-heading-s); line-height: var(--lh-heading-s); letter-spacing: var(--ls-heading-s); } .t-body-l { font-size: var(--fs-body-l); line-height: var(--lh-body-l); } .t-body-m { font-size: var(--fs-body-m); line-height: var(--lh-body-m); letter-spacing: var(--ls-body-m); } .t-label { font-size: var(--fs-label); line-height: var(--lh-label); letter-spacing: var(--ls-label); font-weight: 400; } .t-caption { font-size: var(--fs-caption); line-height: var(--lh-caption); letter-spacing: var(--ls-caption); } .t-muted { color: var(--text-muted); } .t-second { color: var(--text-secondary); } .t-invert { color: var(--text-invert); } /* -------------------------------------------------------------------------- 5. LAYOUT -------------------------------------------------------------------------- */ .section { padding: var(--section-y) var(--gutter); display: flex; flex-direction: column; gap: var(--gap-l); } .section--wide { gap: var(--gap-xl); } .container { width: 100%; max-width: var(--container); margin-inline: auto; } .site-header { position: fixed; inset: 0 0 auto 0; height: var(--header-h); display: flex; align-items: center; justify-content: space-between; padding-inline: var(--gutter); z-index: 4; } /* Assinatura do template: eyebrow à esquerda, régua no meio, headline à direita */ .section-head { display: flex; align-items: baseline; gap: var(--gap-s); width: 100%; max-width: var(--container); margin-inline: auto; } .section-head .rule { flex: 1; height: 1px; background: var(--line); } .section-head .title { text-align: right; } .eyebrow { font-size: var(--fs-label); line-height: var(--lh-label); letter-spacing: var(--ls-label); font-weight: 400; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; } /* Painel de vidro do CTA final */ .glass-panel { background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-radius: var(--radius); padding: var(--gutter); display: flex; flex-direction: column; gap: var(--gap-m); } /* Janela de parallax */ .parallax-window { position: relative; overflow: hidden; border-radius: var(--radius); } .parallax-window > img, .parallax-window > .parallax-media { width: 100%; height: 220%; object-fit: cover; position: absolute; top: -60%; left: 0; will-change: transform; } .scrim-bottom { position: absolute; inset: 0; background: var(--scrim-bottom); pointer-events: none; } /* Card do Process */ .process-card { position: sticky; top: var(--sticky-top); background: var(--bg-card); border-radius: var(--radius); padding: var(--gap-s); display: flex; flex-direction: column; gap: var(--gap-l); } .process-card:nth-child(2) { margin-top: 25px; } .process-card:nth-child(3) { margin-top: 50px; } /* -------------------------------------------------------------------------- 6. MOTION — estados iniciais e revelados As classes .is-in são adicionadas pelo terascape-motion.js -------------------------------------------------------------------------- */ /* 6.1 Wipe de máscara — a assinatura de motion do site (1300ms) */ [data-reveal] { transition: clip-path var(--dur-reveal) var(--ease-reveal); will-change: clip-path; } [data-reveal="up"] { clip-path: inset(0% 0% 100% 0%); } /* texto: de baixo p/ cima */ [data-reveal="right"] { clip-path: inset(0% 0% 0% 100%); } /* imagem: esq. p/ dir. */ [data-reveal="center"] { clip-path: inset(100%); } /* card: centro p/ fora */ [data-reveal].is-in { clip-path: inset(0%); } /* 6.2 Fade + subida com spring (usado no bloco de apoio do hero) */ [data-rise] { opacity: 0; transform: translateY(30px); transition: opacity var(--dur-spring) var(--ease-spring), transform var(--dur-spring) var(--ease-spring); will-change: transform, opacity; } [data-rise].is-in { opacity: 1; transform: none; } /* 6.3 Fade com stagger de 100ms — parágrafos longos, listas, logos */ [data-stagger] > * { opacity: 0; transition: opacity var(--dur-fade) var(--ease-enter); } [data-stagger].is-in > * { opacity: 1; } [data-stagger].is-in > *:nth-child(1) { transition-delay: 0ms; } [data-stagger].is-in > *:nth-child(2) { transition-delay: 100ms; } [data-stagger].is-in > *:nth-child(3) { transition-delay: 200ms; } [data-stagger].is-in > *:nth-child(4) { transition-delay: 300ms; } [data-stagger].is-in > *:nth-child(5) { transition-delay: 400ms; } [data-stagger].is-in > *:nth-child(6) { transition-delay: 500ms; } [data-stagger].is-in > *:nth-child(7) { transition-delay: 600ms; } [data-stagger].is-in > *:nth-child(n+8) { transition-delay: 700ms; } /* 6.4 Abertura da página */ @keyframes ts-nav-in { from { opacity: 0; transform: translateY(-150px); } to { opacity: 1; transform: none; } } @keyframes ts-pop-in { from { transform: scale(0); } to { transform: none; } } .site-header { animation: ts-nav-in var(--dur-enter) var(--ease-enter) 400ms both; } .pop-in { animation: ts-pop-in 800ms var(--ease-spring) 80ms both; } /* -------------------------------------------------------------------------- 7. COMPONENTES INTERATIVOS -------------------------------------------------------------------------- */ /* 7.1 Link de texto: sublinhado desliza da esquerda + ícone gira */ .link-btn { position: relative; display: inline-flex; align-items: center; gap: 5px; padding: 4px 0; font-size: var(--fs-body-l); line-height: var(--lh-body-l); overflow: hidden; } .link-btn::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: translateX(-101%); transition: transform var(--dur-spring) var(--ease-spring); } .link-btn:hover::after { transform: none; } .link-btn .icon { display: inline-block; transition: transform 200ms var(--ease-enter); } .link-btn:hover .icon { transform: rotate(90deg); } /* 7.2 Botão sólido */ .btn { display: inline-flex; align-items: center; gap: 14px; padding: 6px 20px; border-radius: var(--radius); background: var(--bg); color: var(--text-primary); font-size: var(--fs-body-m); line-height: var(--lh-body-m); transition: background var(--dur-ui) var(--ease-input), box-shadow var(--dur-ui) var(--ease-input); } .btn:hover { background: var(--bg-alt); } /* 7.3 Roll 3D do botão de menu */ .roll-3d { position: relative; display: inline-block; overflow: clip; } .roll-3d > span { display: block; transition: transform 300ms var(--ease-enter); } .roll-3d > .bottom { position: absolute; inset: 0; transform: perspective(500px) rotate(-14deg) rotateY(40deg); transform-origin: left center; } .roll-3d:hover > .top { transform: perspective(500px) rotate(14deg) rotateY(-40deg); } .roll-3d:hover > .bottom { transform: none; } /* 7.4 Input de newsletter */ .field { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: transparent; padding: 12px 4px; font-family: var(--font-sans); font-size: var(--fs-body-m); line-height: 140%; letter-spacing: .2px; color: var(--text-primary); transition: all var(--dur-ui) var(--ease-input); } .field:focus { outline: 0; border-bottom-color: var(--text-primary); } /* 7.5 Carrossel arrastável */ .drag-row { display: flex; gap: 14px; cursor: grab; user-select: none; will-change: transform; } .drag-row.is-dragging { cursor: grabbing; } /* -------------------------------------------------------------------------- 8. ACESSIBILIDADE -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } [data-reveal] { clip-path: none !important; } [data-rise] { opacity: 1 !important; transform: none !important; } [data-stagger] > * { opacity: 1 !important; } .parallax-window > img { transform: none !important; } }