/* Landing v3 (futurista, aprovada) — padrão das plataformas de IA (Lovable, Bolt, v0), tema claro e escuro. Tema: (script no ); sem JS, segue o sistema. */ :root { --fundo: #FBFBFD; --fundo-2: #F3F4F8; --superficie: #FFFFFF; --texto: #0E1220; --suave: #5A6275; --borda: #E3E6EE; --borda-forte: #CFD4DF; --primario: #0E1220; --primario-texto: #FFFFFF; --chip: rgba(255, 255, 255, .72); --vidro: rgba(251, 251, 253, .72); --sombra-caixa: 0 1px 0 rgba(14, 18, 32, .04), 0 24px 70px -28px rgba(47, 123, 255, .45); --hero-arte: url("/assets/img/hero-claro.webp"); --aurora: linear-gradient(120deg, #19D3A2 0%, #2F7BFF 52%, #7C5CFF 100%); --foco: #2F7BFF; --superficie-vidro: rgba(255, 255, 255, .82); --grade: rgba(47, 90, 180, .14); --grao: .05; --final-op: .35; --titulo: "Unbounded", "Geist", system-ui, sans-serif; --fonte: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; --caixa: 1200px; --margem: 24px; color-scheme: light; } :root[data-tema="escuro"] { --fundo: #06070B; --fundo-2: #0C0E15; --superficie: #11141D; --texto: #F2F4F8; --suave: #9CA4B6; --borda: #222736; --borda-forte: #333A4D; --primario: #F2F4F8; --primario-texto: #0E1220; --chip: rgba(17, 20, 29, .72); --vidro: rgba(6, 7, 11, .7); --sombra-caixa: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 30px 90px -30px rgba(47, 123, 255, .55); --hero-arte: url("/assets/img/hero-escuro.webp"); --foco: #6FA3FF; --superficie-vidro: rgba(17, 20, 29, .72); --grade: rgba(120, 170, 255, .16); --grao: .09; --final-op: .55; color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-tema]) { --fundo: #06070B; --fundo-2: #0C0E15; --superficie: #11141D; --texto: #F2F4F8; --suave: #9CA4B6; --borda: #222736; --borda-forte: #333A4D; --primario: #F2F4F8; --primario-texto: #0E1220; --chip: rgba(17, 20, 29, .72); --vidro: rgba(6, 7, 11, .7); --sombra-caixa: 0 30px 90px -30px rgba(47, 123, 255, .55); --hero-arte: url("/assets/img/hero-escuro.webp"); --foco: #6FA3FF; --superficie-vidro: rgba(17, 20, 29, .72); --grade: rgba(120, 170, 255, .16); --grao: .09; --final-op: .55; color-scheme: dark; } } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--fundo); color: var(--texto); font: 400 1rem/1.6 var(--fonte); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg { display: block; max-width: 100%; } a { color: inherit; } h1, h2, h3 { margin: 0; letter-spacing: -.03em; } p { margin: 0; } button { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; border-radius: 8px; } [hidden] { display: none !important; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .caixa { width: min(100% - 2 * var(--margem), var(--caixa)); margin-inline: auto; } .pular { position: absolute; left: -9999px; top: 8px; z-index: 60; background: var(--superficie); padding: 10px 14px; border-radius: 10px; } .pular:focus { left: 8px; } .so-escuro { display: none; } :root[data-tema="escuro"] .so-escuro { display: inline; } :root[data-tema="escuro"] .so-claro { display: none; } /* botões */ .botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 12px; background: var(--primario); color: var(--primario-texto); font: 600 .9375rem/1 var(--fonte); letter-spacing: -.01em; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .15s ease, opacity .15s ease; } .botao:hover { opacity: .88; } .botao:active { transform: translateY(1px); } .botao:disabled { opacity: .45; cursor: not-allowed; } .botao-p { min-height: 38px; padding: 0 14px; font-size: .875rem; border-radius: 10px; } .botao-cheio { width: 100%; min-height: 50px; } .botao-icone { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--borda); background: transparent; color: var(--texto); cursor: pointer; } .botao-icone:hover { background: var(--fundo-2); } .botao-icone svg { width: 18px; height: 18px; } /* sugestão de idioma */ .sugestao { background: var(--primario); color: var(--primario-texto); font-size: .875rem; } .sugestao-linha { display: flex; align-items: center; gap: 14px; min-height: 44px; flex-wrap: wrap; padding-block: 4px; } .sugestao-link { font-weight: 600; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; } .sugestao-fechar { margin-left: auto; background: none; border: 0; color: inherit; opacity: .75; min-height: 36px; cursor: pointer; text-decoration: underline; } /* cabeçalho */ .topo { position: sticky; top: 0; z-index: 30; background: var(--vidro); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid transparent; } .topo.rolou { border-bottom-color: var(--borda); } .topo-linha { display: flex; align-items: center; gap: 28px; min-height: 68px; } .marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 1.125rem; letter-spacing: -.03em; } .marca-simbolo { width: 28px; height: 28px; } .nav { margin-inline: auto; } .nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; } .nav a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 9px; text-decoration: none; font-size: .9375rem; color: var(--suave); font-weight: 500; } .nav a:hover { color: var(--texto); background: var(--fundo-2); } .topo-acoes { display: flex; align-items: center; gap: 10px; } .idiomas { display: flex; align-items: center; gap: 2px; color: var(--suave); } .idiomas > svg { width: 16px; height: 16px; margin-right: 4px; } .idiomas a { display: inline-grid; place-items: center; min-width: 32px; min-height: 36px; border-radius: 8px; font-size: .8125rem; font-weight: 600; text-decoration: none; color: var(--suave); } .idiomas a:hover { color: var(--texto); background: var(--fundo-2); } .idiomas a[aria-current="page"] { color: var(--texto); } .menu-movel { display: none; position: relative; } .menu-movel summary { list-style: none; display: inline-flex; align-items: center; min-height: 38px; padding: 0 12px; border: 1px solid var(--borda); border-radius: 10px; font-weight: 600; font-size: .875rem; cursor: pointer; } .menu-movel summary::-webkit-details-marker { display: none; } .menu-movel ul { position: absolute; right: 0; top: calc(100% + 8px); list-style: none; margin: 0; padding: 8px; min-width: 230px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .35); } .menu-movel a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 9px; text-decoration: none; font-weight: 500; } .menu-movel a:hover { background: var(--fundo-2); } /* topo (hero) — conceito "futurista": fundo vivo (shader), entrada orquestrada, borda de luz */ @property --angulo { syntax: ""; inherits: false; initial-value: 0deg; } .hero { position: relative; overflow: hidden; isolation: isolate; margin-top: -68px; padding: 150px 0 0; min-height: min(100svh, 980px); display: flex; flex-direction: column; } .hero-fundo { position: absolute; inset: 0; z-index: -4; background: var(--hero-arte) center bottom / cover no-repeat; transition: opacity .8s ease; } .hero-shader { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s ease; } .hero.shader-ok .hero-shader { opacity: 1; } .hero.shader-ok .hero-fundo { opacity: 0; } .hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 160px; z-index: -1; background: linear-gradient(transparent, var(--fundo)); pointer-events: none; } /* grade em perspectiva com feixes de luz correndo nas linhas */ .hero-grade { position: absolute; left: -20%; right: -20%; bottom: -2%; height: 46%; z-index: -2; background-image: linear-gradient(var(--grade) 1px, transparent 1px), linear-gradient(90deg, var(--grade) 1px, transparent 1px); background-size: 64px 64px; transform: perspective(520px) rotateX(62deg); transform-origin: 50% 100%; -webkit-mask: linear-gradient(transparent, #000 45%, #000 80%, transparent); mask: linear-gradient(transparent, #000 45%, #000 80%, transparent); } .hero-grade i { position: absolute; bottom: 0; width: 2px; height: 34%; border-radius: 2px; background: linear-gradient(transparent, #7FE9FF 60%, #fff); box-shadow: 0 0 14px 2px rgba(111, 200, 255, .8); opacity: 0; animation: feixe 5.2s cubic-bezier(.4, 0, .2, 1) infinite; } .hero-grade i:nth-child(1) { left: calc(64px * 9); animation-delay: .4s; } .hero-grade i:nth-child(2) { left: calc(64px * 14); animation-delay: 2.1s; } .hero-grade i:nth-child(3) { left: calc(64px * 18); animation-delay: 3.3s; } .hero-grade i:nth-child(4) { left: calc(64px * 23); animation-delay: 1.2s; } .hero-grade i:nth-child(5) { left: calc(64px * 27); animation-delay: 4.2s; } @keyframes feixe { 0% { transform: translateY(100%); opacity: 0; } 12% { opacity: 1; } 70% { opacity: .9; } 100% { transform: translateY(-260%); opacity: 0; } } .hero-grao { position: absolute; inset: 0; z-index: -1; opacity: var(--grao); pointer-events: none; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"); } .hero-conteudo { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; } .selo { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 12px; border-radius: 999px; border: 1px solid var(--borda); background: var(--chip); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 500 .8125rem/1.2 var(--mono); letter-spacing: .01em; color: var(--suave); } .selo-ponto { width: 8px; height: 8px; border-radius: 50%; background: #19D3A2; box-shadow: 0 0 0 0 rgba(25, 211, 162, .6); animation: pulso 2s ease-out infinite; } @keyframes pulso { 0% { box-shadow: 0 0 0 0 rgba(25, 211, 162, .55); } 100% { box-shadow: 0 0 0 12px rgba(25, 211, 162, 0); } } .hero h1 { margin-top: 26px; font-family: var(--titulo); font-weight: 500; font-size: clamp(2.2rem, 5.4vw, 4.6rem); line-height: 1.06; letter-spacing: -.035em; max-width: 16ch; text-wrap: balance; } .palavra { display: inline-block; } .palavra > span { display: inline-block; opacity: 0; filter: blur(14px); transform: translateY(.35em); transition: opacity .9s cubic-bezier(.2, .7, .2, 1) var(--d), filter .9s cubic-bezier(.2, .7, .2, 1) var(--d), transform .9s cubic-bezier(.2, .7, .2, 1) var(--d); } .pronto .palavra > span { opacity: 1; filter: none; transform: none; } .hero-sub { margin-top: 22px; max-width: 40rem; font-size: clamp(1.0625rem, 1.45vw, 1.1875rem); line-height: 1.6; color: var(--suave); text-wrap: pretty; } /* entradas em sequência (usadas no topo e nas seções ao rolar) */ .entra { opacity: 0; transform: translateY(18px); filter: blur(6px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms), transform .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms), filter .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms); } .pronto .hero .entra, .entra.visivel { opacity: 1; transform: none; filter: none; } .chip.entra { transform: translateY(12px) scale(.94); } .pronto .hero .chip.entra, .chip.entra.visivel { transform: none; } .topo { transition: transform .7s cubic-bezier(.2, .7, .2, 1), opacity .7s ease; } html:not(.pronto) .topo { transform: translateY(-100%); opacity: 0; } /* caixa de pedido com borda de luz girando */ .pedido { position: relative; width: min(100%, 780px); margin-top: 40px; text-align: left; background: var(--superficie-vidro); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); border-radius: 24px; box-shadow: var(--sombra-caixa); padding: 20px 16px 14px 22px; } .pedido-borda { position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; background: conic-gradient(from var(--angulo), var(--borda) 0deg, var(--borda) 200deg, #19D3A2 250deg, #2F7BFF 290deg, #7C5CFF 320deg, var(--borda) 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: girar 5s linear infinite; } .pedido:focus-within .pedido-borda { animation-duration: 2.2s; filter: drop-shadow(0 0 6px rgba(47, 123, 255, .55)); } @keyframes girar { to { --angulo: 360deg; } } .pedido textarea { display: block; width: 100%; min-height: 64px; max-height: 240px; resize: none; border: 0; outline: none; background: transparent; color: var(--texto); font: 400 1.0625rem/1.55 var(--fonte); } .pedido textarea::placeholder { color: var(--suave); opacity: .95; } .pedido-rodape { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 8px; } .pedido-dica { font: 400 .75rem/1.3 var(--mono); color: var(--suave); letter-spacing: .01em; } .pedido-enviar { position: relative; flex: none; margin-left: auto; display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--aurora); color: #fff; cursor: pointer; transition: transform .2s cubic-bezier(.2, .7, .2, 1), filter .2s ease, opacity .2s ease, box-shadow .2s ease; box-shadow: 0 8px 26px -8px rgba(47, 123, 255, .8); } .pedido-enviar-icone svg { width: 20px; height: 20px; } .pedido-enviar:disabled { filter: grayscale(1); opacity: .35; cursor: default; box-shadow: none; } .pedido-anel { position: absolute; inset: -5px; border-radius: 50%; border: 2px solid transparent; border-top-color: #7FE9FF; border-right-color: #7C5CFF; opacity: 0; } .pedido-enviar.carregando .pedido-anel { opacity: 1; animation: girar-anel .7s linear infinite; } .pedido-enviar.carregando .pedido-enviar-icone { animation: subir .7s ease-in-out infinite alternate; } @keyframes girar-anel { to { transform: rotate(360deg); } } @keyframes subir { to { transform: translateY(-3px); } } .chips { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 18px; max-width: 780px; } .chips-rotulo { font-size: .875rem; color: var(--suave); margin-right: 2px; } .chip { min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--borda); background: var(--chip); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: .875rem; font-weight: 500; color: var(--texto); cursor: pointer; transition: opacity .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms), transform .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms), filter .8s ease var(--d, 0ms), border-color .2s ease, background .2s ease; } .chip:hover { border-color: var(--borda-forte); background: var(--superficie); } /* faixa de tipos de app, correndo sem parar */ .faixa { position: relative; display: flex; overflow: hidden; margin-top: auto; padding: 56px 0 36px; gap: 0; -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .faixa ul { flex: none; display: flex; gap: 44px; padding-right: 44px; margin: 0; list-style: none; animation: correr 42s linear infinite; } .faixa li { font: 500 .9375rem/1 var(--titulo); letter-spacing: -.01em; color: var(--suave); white-space: nowrap; display: flex; align-items: center; gap: 44px; } .faixa li::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--aurora); opacity: .8; } @keyframes correr { to { transform: translateX(-100%); } } /* ═════════════ seções ═════════════ */ .secao { position: relative; padding-block: 120px; } .cabeca { max-width: 46rem; } .cabeca.centro { margin-inline: auto; text-align: center; } .etiqueta { display: inline-flex; align-items: center; gap: 8px; font: 500 .8125rem/1 var(--mono); color: var(--suave); letter-spacing: .02em; } .etiqueta::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--aurora); box-shadow: 0 0 10px rgba(47, 123, 255, .7); } .secao h2, .final h2 { margin-top: 16px; font-family: var(--titulo); font-weight: 500; font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.1; letter-spacing: -.035em; text-wrap: balance; } .secao-sub { margin-top: 16px; color: var(--suave); font-size: 1.0625rem; line-height: 1.65; text-wrap: pretty; } .cabeca.centro .secao-sub { max-width: 38rem; margin-inline: auto; } .cabeca + * { margin-top: 56px; } /* cartões que acendem sob o mouse (--mx/--my vêm do JS) */ .cartao-luz { position: relative; background: var(--superficie); border: 1px solid var(--borda); border-radius: 22px; overflow: hidden; isolation: isolate; } .cartao-luz::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .3s ease; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, #2F7BFF 16%, transparent), transparent 60%); } .cartao-luz:hover::after { opacity: 1; } .luzes { display: inline-flex; gap: 6px; } .luzes i { width: 11px; height: 11px; border-radius: 50%; background: #FF5F57; } .luzes i:nth-child(2) { background: #FEBC2E; } .luzes i:nth-child(3) { background: #28C840; } /* produto: editor montando o app ao vivo */ .editor { border: 1px solid var(--borda); border-radius: 22px; background: var(--superficie); box-shadow: 0 40px 120px -50px rgba(47, 123, 255, .55); overflow: hidden; } .editor-barra { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--borda); background: var(--fundo-2); } .editor-url { flex: 1; text-align: center; font: 400 .8125rem/1 var(--mono); color: var(--suave); background: var(--superficie); border: 1px solid var(--borda); border-radius: 8px; padding: 7px 10px; max-width: 360px; margin-inline: auto; } .editor-status { display: inline-flex; align-items: center; gap: 8px; font: 500 .75rem/1 var(--mono); color: var(--suave); white-space: nowrap; } .editor-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #28C840; box-shadow: 0 0 0 0 rgba(40, 200, 64, .5); animation: pulso 2s ease-out infinite; } .editor.construindo .editor-status::before { background: #FEBC2E; } .editor-corpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); min-height: 640px; } .editor-chat { display: flex; flex-direction: column; gap: 14px; padding: 24px; border-right: 1px solid var(--borda); } .msg { max-width: 92%; transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .2, 1); } .msg-autor { display: flex; align-items: center; gap: 8px; font: 500 .75rem/1 var(--mono); color: var(--suave); margin-bottom: 6px; } .msg-marca { width: 16px; height: 16px; border-radius: 5px; background: var(--aurora); } .msg-voce { align-self: flex-end; text-align: left; } .msg-voce p { background: var(--fundo-2); border: 1px solid var(--borda); border-radius: 16px 16px 4px 16px; padding: 12px 14px; font-size: .9375rem; line-height: 1.55; } .msg-voce .msg-autor { justify-content: flex-end; } .tarefas { list-style: none; margin: 0; padding: 12px 14px; display: grid; gap: 9px; border: 1px solid var(--borda); border-radius: 4px 16px 16px 16px; } .tarefas li { display: flex; gap: 10px; align-items: center; font-size: .9375rem; color: var(--suave); transition: color .3s ease, opacity .4s ease; } .tarefa-icone { position: relative; flex: none; width: 20px; height: 20px; display: grid; place-items: center; } .tarefa-icone .check { width: 18px; height: 18px; color: #19D3A2; } .giro { position: absolute; inset: 1px; border-radius: 50%; border: 2px solid var(--borda-forte); border-top-color: #2F7BFF; opacity: 0; } .editor-compor { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; border: 1px solid var(--borda); border-radius: 14px; color: var(--suave); font-size: .9375rem; } .editor-compor b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--aurora); color: #fff; font-size: .875rem; } /* estados da animação (o JS põe .tocando no editor e .ok/.girando nas tarefas) */ .editor.tocando .msg:not(.visivel) { opacity: 0; transform: translateY(10px); } .editor.tocando .tarefas li:not(.ok):not(.girando) { opacity: .35; } .tarefas li.girando .giro { opacity: 1; animation: girar-anel .8s linear infinite; } .tarefas li.girando .check, .editor.tocando .tarefas li:not(.ok) .check { opacity: 0; } .tarefas li.ok { color: var(--texto); } .tarefas li.ok .check { opacity: 1; animation: estalo .35s cubic-bezier(.2, 1.6, .4, 1); } @keyframes estalo { from { transform: scale(.3); } } .digitando::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -.15em; background: currentColor; animation: piscar 1s steps(1) infinite; } @keyframes piscar { 50% { opacity: 0; } } .editor-previa { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 20px 24px 24px; background: radial-gradient(600px 400px at 50% 30%, color-mix(in srgb, #2F7BFF 10%, transparent), transparent 70%); } .previa-topo { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .versoes { display: inline-flex; padding: 3px; border-radius: 11px; background: var(--fundo-2); border: 1px solid var(--borda); } .versoes button { min-height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--suave); font: 500 .8125rem var(--fonte); cursor: pointer; } .versoes button[aria-pressed="true"] { background: var(--superficie); color: var(--texto); box-shadow: 0 1px 3px rgba(0, 0, 0, .18); } .versoes button:disabled { cursor: default; opacity: .5; } .botao-texto { background: none; border: 0; padding: 6px 4px; color: var(--suave); font: 500 .875rem var(--fonte); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; } .botao-texto:hover { color: var(--texto); } .previa-celular { width: min(100%, 320px); padding: 10px; border-radius: 44px; background: #0E1220; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .06); } .celular-tela { position: relative; height: 560px; border-radius: 35px; overflow: hidden; background: #F6F7FA; } .esqueleto { position: absolute; inset: 0; z-index: 2; padding: 48px 16px; display: flex; flex-direction: column; gap: 14px; background: #F6F7FA; transition: opacity .6s ease; } .esqueleto i { display: block; width: var(--w); height: 18px; border-radius: 8px; background: linear-gradient(90deg, #E7EAF0 25%, #F4F6FA 50%, #E7EAF0 75%); background-size: 200% 100%; animation: brilho 1.3s linear infinite; } .esqueleto i:nth-child(3) { height: 92px; border-radius: 16px; } .esqueleto i:nth-child(6) { height: 120px; border-radius: 16px; } @keyframes brilho { to { background-position: -200% 0; } } .editor:not(.montando) .esqueleto { opacity: 0; pointer-events: none; } .nota-demo { font-size: .8125rem; color: var(--suave); text-align: center; } /* passos */ .passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; counter-reset: p; } .passo { padding: 28px; } .passo-topo { display: flex; justify-content: space-between; align-items: center; } .passo-icone { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--fundo-2); border: 1px solid var(--borda); color: var(--texto); } .passo-icone svg { width: 22px; height: 22px; } .passo-n { font: 500 .8125rem/1 var(--mono); color: var(--suave); } .passo h3 { margin-top: 26px; font-family: var(--titulo); font-weight: 500; font-size: 1.25rem; letter-spacing: -.02em; } .passo p { margin-top: 10px; color: var(--suave); } /* vitrine com cartões 3D */ .exemplos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; perspective: 1400px; } .exemplo { position: relative; border-radius: 22px; background: var(--superficie); border: 1px solid var(--borda); overflow: hidden; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; transition: transform .25s ease, box-shadow .25s ease, opacity .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms), filter .8s ease var(--d, 0ms); } .exemplo:hover { box-shadow: 0 30px 60px -30px rgba(47, 123, 255, .5); } .exemplo::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s ease; background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .22), transparent 55%); mix-blend-mode: overlay; } .exemplo:hover::after { opacity: 1; } .exemplo-img { aspect-ratio: 1280 / 880; overflow: hidden; border-bottom: 1px solid var(--borda); background: var(--fundo-2); } .exemplo-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); } .exemplo:hover .exemplo-img img { transform: scale(1.04); } .exemplo-txt { padding: 18px 20px 20px; display: grid; gap: 8px; } .exemplo-txt h3 { font-family: var(--titulo); font-weight: 500; font-size: 1.0625rem; letter-spacing: -.02em; } .exemplo-txt p { color: var(--suave); font-size: .9375rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .exemplo-usar { justify-self: start; display: inline-flex; gap: 6px; align-items: center; margin-top: 4px; min-height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--borda); background: transparent; color: var(--texto); font: 500 .875rem var(--fonte); cursor: pointer; transition: background .2s ease, border-color .2s ease; } .exemplo-usar:hover { background: var(--fundo-2); border-color: var(--borda-forte); } /* limites */ .limites { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; } .limites .cabeca + * { margin-top: 0; } .vidro { background: var(--superficie-vidro); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--borda); border-radius: 22px; } .medidores { padding: 28px; } .medidores-titulo { font: 500 .8125rem/1 var(--mono); color: var(--suave); } .medidor { margin-top: 22px; } .medidor-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .medidor h3 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; } .medidor-contagem { font: 500 .8125rem/1 var(--mono); color: var(--suave); white-space: nowrap; } .barra { position: relative; margin-top: 10px; height: 10px; border-radius: 99px; background: var(--fundo-2); border: 1px solid var(--borda); overflow: hidden; } .barra-cheia { position: relative; display: block; height: 100%; width: 0; border-radius: 99px; background: var(--aurora); transition: width .6s cubic-bezier(.2, .7, .2, 1); box-shadow: 0 0 16px rgba(47, 123, 255, .6); } .barra-cheia::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); background-size: 50% 100%; background-repeat: no-repeat; animation: varrer 2.2s ease-in-out infinite; } @keyframes varrer { from { background-position: -60% 0; } to { background-position: 160% 0; } } .medidor.cheio .medidor-contagem { color: var(--texto); } .medidor p { margin-top: 8px; font-size: .875rem; color: var(--suave); } .medidores-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; align-items: center; } .botao-contorno { background: transparent; color: var(--texto); box-shadow: inset 0 0 0 1px var(--borda-forte); } .botao-contorno:disabled { opacity: .45; } .medidores-status { margin-top: 16px; min-height: 1.5em; font-size: .9375rem; } .medidores-status.alerta { padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, #FEBC2E 22%, transparent); color: var(--texto); } /* planos */ .planos-controles { margin-top: 44px; display: flex; flex-direction: column; align-items: center; gap: 14px; } .abas-planos { position: relative; display: flex; width: max-content; padding: 4px; border-radius: 14px; background: var(--fundo-2); border: 1px solid var(--borda); } .abas-planos [role="tab"] { position: relative; z-index: 1; min-height: 40px; padding: 0 20px; border: 0; border-radius: 10px; background: transparent; color: var(--suave); font: 600 .9375rem var(--fonte); cursor: pointer; transition: color .25s ease; } .abas-planos [role="tab"][aria-selected="true"] { color: var(--texto); } .abas-indicador { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 10px; background: var(--superficie); box-shadow: 0 1px 4px rgba(0, 0, 0, .2); transition: transform .35s cubic-bezier(.2, .7, .2, 1), width .35s cubic-bezier(.2, .7, .2, 1); } .planos-grade { margin-top: 32px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; } .plano { display: flex; flex-direction: column; padding: 28px; } .plano h3 { font-family: var(--titulo); font-weight: 500; font-size: 1.25rem; letter-spacing: -.02em; } .plano-para { margin-top: 6px; color: var(--suave); font-size: .9375rem; line-height: 1.5; min-height: 3em; } /* 2 linhas: o preço fica na mesma altura nos 3 cartões */ /* cobrança: mensal / anual (o anual vem marcado, é o mais barato) */ .ciclo { position: relative; display: flex; padding: 3px; border-radius: 999px; background: var(--fundo-2); border: 1px solid var(--borda); } .ciclo button { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--suave); font: 600 .875rem var(--fonte); cursor: pointer; transition: color .25s ease; } .ciclo button[aria-pressed="true"] { color: var(--texto); } .ciclo-indicador { position: absolute; top: 3px; bottom: 3px; left: 0; width: 0; border-radius: 999px; background: var(--superficie); box-shadow: 0 1px 4px rgba(0, 0, 0, .2); transition: transform .35s cubic-bezier(.2, .7, .2, 1), width .35s cubic-bezier(.2, .7, .2, 1); } .ciclo-off, .plano-off { display: inline-block; padding: 4px 8px; border-radius: 999px; background: var(--aurora); color: #fff; font: 700 .75rem/1 var(--fonte); letter-spacing: .01em; } #planos[data-ciclo="anual"] .so-mensal, #planos[data-ciclo="mensal"] .so-anual { display: none; } .plano-valor { margin-top: 18px; } .plano-valor .so-anual, .plano-valor .so-mensal { animation: troca-preco .5s cubic-bezier(.2, .7, .2, 1) both; } .plano-valor .plano-linha { animation-delay: 60ms; } .plano-valor .plano-nota { animation-delay: 120ms; } @keyframes troca-preco { from { opacity: 0; transform: translateY(10px); filter: blur(6px); } } .plano-preco { display: flex; align-items: baseline; gap: 8px; } .preco-num { display: inline-block; font-family: var(--titulo); font-size: 2.25rem; font-weight: 500; letter-spacing: -.04em; } .plano-preco small { color: var(--suave); font-size: .875rem; } .plano-linha { margin-top: 6px; min-height: 24px; display: flex; align-items: center; gap: 8px; color: var(--suave); font-size: .875rem; } .plano-linha s { text-decoration-thickness: 1.5px; } .plano-nota { margin-top: 4px; color: var(--suave); font-size: .8125rem; } .plano-itens { list-style: none; margin: 20px 0 24px; padding: 0; display: grid; gap: 10px; font-size: .9375rem; } .plano-itens li, .planos-inclui li, .devs-itens li { display: flex; gap: 10px; align-items: flex-start; } .check { flex: none; width: 18px; height: 18px; margin-top: 3px; color: #19D3A2; } .plano .botao { margin-top: auto; width: 100%; min-height: 46px; } .botao-fantasma { background: transparent; color: var(--texto); box-shadow: inset 0 0 0 1px var(--borda-forte); } .botao-aurora { background: var(--aurora); color: #fff; box-shadow: 0 10px 30px -10px rgba(47, 123, 255, .8); } .plano-destaque { border-color: transparent; } .plano-borda { position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; background: conic-gradient(from var(--angulo), #19D3A2, #2F7BFF, #7C5CFF, #19D3A2); animation: girar 6s linear infinite; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .planos-rodape { margin-top: 36px; display: grid; gap: 10px; text-align: center; color: var(--suave); font-size: .9375rem; } .planos-teste { color: var(--texto); font-weight: 500; } .planos-moeda { max-width: 44rem; margin: 0 auto; } .planos-inclui { margin-top: 18px; } .planos-inclui h3 { font: 500 .8125rem/1 var(--mono); color: var(--suave); } .planos-inclui ul { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; color: var(--texto); } /* para devs */ .devs-grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; } .devs .cabeca + * { margin-top: 0; } .devs-itens { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 10px; } .terminal { margin: 0; border-radius: 18px; overflow: hidden; background: #0A0D16; border: 1px solid #1F2536; box-shadow: 0 40px 100px -40px rgba(47, 123, 255, .6); } .terminal-barra { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-bottom: 1px solid #1F2536; background: #0E1220; } .terminal figcaption { flex: 1; font: 500 .8125rem/1 var(--mono); color: #8A93A8; } .terminal-copiar { min-height: 30px; padding: 0 12px; border-radius: 8px; border: 1px solid #2A3146; background: transparent; color: #C9D1E4; font: 500 .8125rem var(--mono); cursor: pointer; } .terminal-copiar:hover { background: #161B2A; } .terminal pre { margin: 0; padding: 22px; overflow-x: auto; font: 400 .875rem/1.8 var(--mono); color: #E6EAF3; } .c-com { color: #6C7793; } .c-chave { color: #7FE9FF; } .c-val { color: #B9A6FF; } .c-cursor { display: inline-block; width: 8px; height: 1.1em; margin-left: 4px; vertical-align: -.2em; background: #19D3A2; animation: piscar 1.1s steps(1) infinite; } /* perguntas */ .faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 64px; align-items: start; } .faq .cabeca + * { margin-top: 0; } .faq .secao-sub a { color: var(--texto); } .faq-lista { border-top: 1px solid var(--borda); } .faq details { border-bottom: 1px solid var(--borda); } .faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 68px; padding-block: 16px; font-size: 1.0625rem; font-weight: 500; cursor: pointer; } .faq summary::-webkit-details-marker { display: none; } .mais { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--borda); transition: transform .3s cubic-bezier(.2, .7, .2, 1), background .2s ease; } .mais::before, .mais::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.6px; background: var(--texto); transform: translate(-50%, -50%); } .mais::after { transform: translate(-50%, -50%) rotate(90deg); } .faq details[open] .mais { transform: rotate(45deg); background: var(--fundo-2); } .resposta { overflow: hidden; } .resposta p { padding: 0 44px 22px 0; color: var(--suave); } .faq details[open] .resposta { animation: abrir .4s cubic-bezier(.2, .7, .2, 1); } @keyframes abrir { from { opacity: 0; transform: translateY(-6px); } } /* chamada final */ .final { position: relative; overflow: hidden; isolation: isolate; padding: 140px 0 130px; text-align: center; border-top: 1px solid var(--borda); } .final-fundo { position: absolute; inset: -40%; z-index: -1; opacity: var(--final-op); background: radial-gradient(40% 30% at 20% 60%, rgba(25, 211, 162, .55), transparent 70%), radial-gradient(40% 35% at 55% 70%, rgba(47, 123, 255, .6), transparent 70%), radial-gradient(35% 30% at 85% 55%, rgba(124, 92, 255, .6), transparent 70%); filter: blur(40px); animation: flutuar 18s ease-in-out infinite alternate; } @keyframes flutuar { 0% { transform: translate3d(-4%, 2%, 0) rotate(0deg) scale(1); } 100% { transform: translate3d(4%, -3%, 0) rotate(8deg) scale(1.08); } } .final-conteudo { display: flex; flex-direction: column; align-items: center; } .final h2 { font-size: clamp(2rem, 4.6vw, 3.6rem); max-width: 18ch; } .final .secao-sub { max-width: 34rem; } .final-caixa { width: 100%; display: flex; flex-direction: column; align-items: center; } .final .pedido { margin-top: 36px; } /* ───────── app de exemplo (dentro do celular) ───────── */ .app { --a-fundo: #F6F7FA; --a-cartao: #FFFFFF; --a-texto: #1D2233; --a-sub: #636B82; --a-linha: #E5E8EF; --a-trilho: #E9ECF2; --a-destaque: #5B3DF5; height: 100%; overflow-y: auto; background: var(--a-fundo); color: var(--a-texto); font: 400 14px/1.45 var(--fonte); padding: 46px 16px 90px; scrollbar-width: none; } .app::-webkit-scrollbar { display: none; } .app.escuro { --a-fundo: #10131D; --a-cartao: #1A1F2E; --a-texto: #EEF0F6; --a-sub: #9AA2B8; --a-linha: #2A3144; --a-trilho: #2A3144; --a-destaque: #8D7BFF; } .app-topo { display: flex; align-items: center; justify-content: space-between; } .app-topo h3 { font-size: 20px; letter-spacing: -.02em; } .app-mes { color: var(--a-sub); font-size: 13px; } .app-tema { width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--a-linha); background: var(--a-cartao); color: var(--a-texto); display: grid; place-items: center; cursor: pointer; } .app-tema svg { width: 18px; height: 18px; } .app-total { margin-top: 14px; padding: 16px; border-radius: 18px; background: var(--a-destaque); color: #fff; } .app-total small { font-size: 12.5px; opacity: .85; } .app-total strong { display: block; font-size: 28px; letter-spacing: -.02em; line-height: 1.15; margin-top: 2px; } .app-cartao { margin-top: 12px; padding: 14px; border-radius: 16px; background: var(--a-cartao); border: 1px solid var(--a-linha); } .app-cartao h4 { margin: 0 0 10px; font-size: 13.5px; font-weight: 700; } .app-meta-linha { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--a-sub); } .app-barra { height: 8px; border-radius: 4px; background: var(--a-trilho); overflow: hidden; margin-top: 6px; } .app-barra span { display: block; height: 100%; border-radius: 4px; background: var(--a-destaque); transition: width .3s ease; } .app-barra.alerta span { background: #E5484D; } .app-cat + .app-cat { margin-top: 9px; } .app-lista { list-style: none; margin: 0; padding: 0; } .app-lista li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--a-linha); } .app-lista li:last-child { border-bottom: 0; } .app-item-txt { flex: 1; min-width: 0; } .app-item-txt b { display: block; font-weight: 700; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-item-txt span { font-size: 12px; color: var(--a-sub); } .app-item-valor { font-weight: 700; white-space: nowrap; } .app-excluir { width: 30px; height: 30px; border: 0; border-radius: 9px; background: transparent; color: var(--a-sub); cursor: pointer; display: grid; place-items: center; } .app-excluir:hover { background: var(--a-trilho); } .app-excluir svg { width: 15px; height: 15px; } .app-adicionar { position: absolute; left: 16px; right: 16px; bottom: 16px; min-height: 48px; border: 0; border-radius: 14px; background: var(--a-destaque); color: #fff; font: 700 14.5px var(--fonte); cursor: pointer; } .app-form { display: grid; gap: 8px; } .app-form label { font-size: 12px; color: var(--a-sub); display: grid; gap: 4px; } .app-form input, .app-form select { min-height: 40px; border-radius: 10px; border: 1px solid var(--a-linha); background: var(--a-fundo); color: var(--a-texto); padding: 0 10px; font: 400 16px var(--fonte); } .app-form-acoes { display: flex; gap: 8px; margin-top: 4px; } .app-form-acoes button { flex: 1; min-height: 42px; border-radius: 11px; border: 1px solid var(--a-linha); background: var(--a-cartao); color: var(--a-texto); font: 700 14px var(--fonte); cursor: pointer; } .app-form-acoes button[type="submit"] { background: var(--a-destaque); border-color: var(--a-destaque); color: #fff; } /* janela da lista de espera */ .janela { width: min(100% - 32px, 480px); padding: 0; border: 1px solid var(--borda); border-radius: 22px; background: var(--superficie); color: var(--texto); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .55); } .janela::backdrop { background: rgba(6, 7, 11, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .janela .lista { position: relative; padding: 28px; display: grid; gap: 12px; } .janela h2 { font-size: 1.5rem; font-weight: 600; padding-right: 44px; } .janela-texto { color: var(--suave); } .janela-fechar { position: absolute; top: 18px; right: 18px; } .janela-pedido { background: var(--fundo-2); border-radius: 14px; padding: 12px 14px; font-size: .9375rem; } .janela-pedido span { display: block; font-size: .8125rem; color: var(--suave); margin-bottom: 2px; } .janela-pedido p { max-height: 7.5em; overflow: auto; } .lista-rotulo { font-weight: 600; font-size: .875rem; margin-top: 4px; } .lista input[type="email"] { min-height: 50px; padding: 0 14px; border: 1px solid var(--borda-forte); border-radius: 12px; background: var(--fundo); color: var(--texto); font: 400 1rem var(--fonte); } .lista input[type="email"]:focus { outline: none; border-color: var(--foco); box-shadow: 0 0 0 3px color-mix(in srgb, var(--foco) 30%, transparent); } .lista input[aria-invalid="true"] { border-color: #E5484D; } .lista-aceite { display: flex; gap: 10px; align-items: flex-start; font-size: .875rem; color: var(--suave); cursor: pointer; } .lista-aceite input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: #2F7BFF; } .lista-aceite a { color: var(--texto); } .lista-retorno:not(:empty) { padding: 10px 14px; border-radius: 10px; font-size: .9375rem; background: color-mix(in srgb, #2F7BFF 14%, transparent); } .lista-retorno.erro { background: color-mix(in srgb, #E5484D 16%, transparent); } .lista-isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* rodapé */ .rodape { border-top: 1px solid var(--borda); padding-block: 56px 64px; font-size: .9375rem; color: var(--suave); } .rodape-grade { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; } .rodape .marca { color: var(--texto); margin-bottom: 14px; } .rodape h2 { font-size: .875rem; font-weight: 600; letter-spacing: 0; color: var(--texto); margin-bottom: 10px; } .rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .rodape li a { display: inline-flex; min-height: 34px; align-items: center; text-decoration: none; } .rodape li a:hover { color: var(--texto); } /* página legal */ .legal { padding-block: 48px 96px; max-width: 760px; } .legal h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 600; } .legal-data { margin-top: 8px; color: var(--suave); } .legal h2 { margin-top: 36px; font-size: 1.375rem; font-weight: 600; } .legal p { margin-top: 10px; color: var(--suave); } .legal a { color: var(--foco); } /* responsivo */ @media (max-width: 1020px) { .nav { display: none; } .topo-acoes { margin-left: auto; } .menu-movel { display: block; } } @media (max-width: 980px) { .editor-corpo { grid-template-columns: 1fr; } .editor-chat { border-right: 0; border-bottom: 1px solid var(--borda); } .passos, .exemplos, .planos-grade { grid-template-columns: 1fr 1fr; } .limites, .devs-grade, .faq { grid-template-columns: 1fr; gap: 40px; } .rodape-grade { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { :root { --margem: 16px; } .secao { padding-block: 84px; } .passos, .exemplos, .planos-grade { grid-template-columns: 1fr; } .editor-chat { padding: 18px; } .editor-url { display: none; } .celular-tela { height: 520px; } .abas-planos [role="tab"] { padding: 0 14px; } .resposta p { padding-right: 0; } .final { padding: 100px 0 96px; } .topo-linha { gap: 10px; min-height: 60px; } .hero { margin-top: -60px; padding: 108px 0 0; min-height: auto; } .hero h1 { font-size: clamp(1.9rem, 8.6vw, 2.6rem); } .hero-grade { height: 30%; } .faixa { padding: 44px 0 28px; } .pedido-dica { display: none; } .topo-acoes > .botao-p, .idiomas > svg { display: none; } .idiomas a { min-width: 30px; } .pedido { margin-top: 28px; padding: 14px 12px 12px 16px; border-radius: 20px; } .chips-rotulo { width: 100%; text-align: center; } .rodape-grade { grid-template-columns: 1fr; gap: 28px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } .entra, .palavra > span { opacity: 1 !important; transform: none !important; filter: none !important; } html:not(.pronto) .topo { transform: none; opacity: 1; } .hero-shader { display: none; } }