/* ========================================================================== Preciso — precisoapp.com Base clara e quente, roxo de marca, titulos com serifa. Sem CDNs, sem fontes externas, sem bibliotecas. ========================================================================== */ :root { --roxo: #6C47FF; --roxo-fundo: #5334E0; /* para texto branco: 6C47FF nao chega em corpo */ --roxo-tenue: #F1ECFF; --roxo-linha: #DCD1FF; --tinta: #1A1533; /* derivado do #16122C da marca */ --tinta-suave: #56506E; --tinta-tenue: #6B6483; /* #7A7391 dava 4.23:1 sobre o creme; chumbava */ --creme: #FBF8F3; --creme-2: #F5F0E7; --branco: #FFFFFF; --linha: #E9E2D7; --verde: #15803D; /* o #22C55E nao passa em texto sobre claro */ --verde-vivo: #22C55E; --laranja: #C2410C; /* idem para o #FF8C3C */ --laranja-vivo:#FF8C3C; --escuro: #16122C; --escuro-2: #231C42; --envelope: 1140px; --raio: 18px; --sombra: 0 1px 2px rgba(26,21,51,.04), 0 8px 24px rgba(26,21,51,.06); --sombra-md: 0 2px 4px rgba(26,21,51,.05), 0 18px 45px rgba(26,21,51,.10); --display: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif; --tipo: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--creme); color: var(--tinta); font-family: var(--tipo); font-size: 17px; line-height: 1.62; -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 700; line-height: 1.13; letter-spacing: -.018em; } p { margin: 0; } img { max-width: 100%; display: block; } a { color: var(--roxo-fundo); } :focus-visible { outline: 2px solid var(--roxo); outline-offset: 3px; border-radius: 6px; } .salta-para { position: absolute; left: -9999px; top: 0; z-index: 99; background: var(--roxo-fundo); color: #fff; padding: 12px 18px; border-radius: 0 0 10px 0; text-decoration: none; } .salta-para:focus { left: 0; } /* --- animacao de entrada -------------------------------------------------- */ /* Melhoria progressiva: por omissao esta tudo visivel. So depois de o JS confirmar que consegue animar e que ha IntersectionObserver e que a classe .js-anima entra no e o conteudo comeca escondido. Se o JS falhar, nao arrancar, ou o observador nunca disparar, a pagina le-se na mesma — nunca ha texto preso a opacidade zero. */ .js-anima .reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; } .js-anima .reveal.visivel { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js-anima .reveal { opacity: 1; transform: none; transition: none; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* --- estrutura ------------------------------------------------------------ */ .envelope { width: 100%; max-width: var(--envelope); margin: 0 auto; padding: 0 22px; } .envelope--estreito { max-width: 780px; } .centrado { text-align: center; } .seccao { padding: 76px 0; } .seccao--creme { background: var(--creme-2); } .rotulo { display: inline-block; font-family: var(--tipo); font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--roxo-fundo); margin-bottom: 16px; } .titulo-seccao { font-size: clamp(1.85rem, 5.6vw, 2.75rem); max-width: 19ch; margin-bottom: 18px; } .centrado .titulo-seccao { margin-left: auto; margin-right: auto; } .intro { color: var(--tinta-suave); font-size: clamp(1.02rem, 3.4vw, 1.14rem); max-width: 60ch; margin-bottom: 16px; } .centrado .intro { margin-left: auto; margin-right: auto; } .remate { margin-top: 26px; font-family: var(--display); font-size: clamp(1.15rem, 4vw, 1.5rem); font-weight: 700; letter-spacing: -.02em; } /* --- marca ---------------------------------------------------------------- */ .marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; } .marca__quadrado { display: grid; place-items: center; width: 36px; height: 36px; background: var(--roxo); color: #fff; border-radius: 11px; font-family: var(--tipo); font-weight: 800; font-size: 21px; line-height: 1; padding-bottom: 2px; box-shadow: 0 4px 12px rgba(108,71,255,.32); } .marca__nome { font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: -.02em; } /* --- nav ------------------------------------------------------------------ */ .nav { position: sticky; top: 0; z-index: 40; background: rgba(251,248,243,.82); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--linha); } .nav__interior { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 14px; padding-bottom: 14px; } .nav__pastilha { font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--roxo-fundo); background: var(--roxo-tenue); border: 1px solid var(--roxo-linha); border-radius: 999px; padding: 6px 14px; white-space: nowrap; } /* --- heroi ---------------------------------------------------------------- */ .heroi { padding: 52px 0 64px; position: relative; overflow: hidden; } .heroi::before { content: ""; position: absolute; top: -340px; right: -180px; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(circle, rgba(108,71,255,.13), transparent 66%); pointer-events: none; } .heroi__grelha { position: relative; display: grid; gap: 42px; } .heroi h1 { font-size: clamp(2.15rem, 8.2vw, 3.55rem); letter-spacing: -.032em; margin-bottom: 22px; } /* cada frase na sua linha: sem isto o titulo partia em quatro linhas irregulares */ .heroi h1 em { display: block; font-style: normal; color: var(--roxo-fundo); } .chamada { color: var(--tinta-suave); font-size: clamp(1.05rem, 3.7vw, 1.22rem); max-width: 52ch; margin-bottom: 30px; } /* --- foto do heroi -------------------------------------------------------- */ .heroi__foto { margin: 0; position: relative; border-radius: 26px; overflow: hidden; background: linear-gradient(150deg, #EDE6FF, #FDF2E8 62%, #F5F0E7); box-shadow: var(--sombra-md); aspect-ratio: 4 / 5; } .heroi__foto img { width: 100%; height: 100%; object-fit: cover; } /* cartao a flutuar por cima da foto */ .flutuante { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.7); border-radius: 16px; padding: 13px 15px; box-shadow: var(--sombra-md); } .flutuante__icone { flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--verde-vivo); color: #fff; } .flutuante__texto { display: flex; flex-direction: column; min-width: 0; } .flutuante__titulo { font-weight: 700; font-size: 14.5px; line-height: 1.3; } .flutuante__sub { font-size: 12.5px; color: var(--tinta-suave); line-height: 1.35; } /* --- botoes das lojas (inertes de proposito) ------------------------------ */ .lojas { display: flex; flex-wrap: wrap; gap: 12px; } .lojas--centradas { justify-content: center; } .loja { display: inline-flex; align-items: center; gap: 12px; background: var(--tinta); color: #fff; border-radius: 15px; padding: 12px 18px; cursor: default; user-select: none; flex: 1 1 230px; max-width: 290px; box-shadow: var(--sombra); } .loja__glifo { display: grid; place-items: center; flex-shrink: 0; color: rgba(255,255,255,.9); } .loja__texto { display: flex; flex-direction: column; line-height: 1.22; min-width: 0; } .loja__linha1 { font-size: 11px; color: rgba(255,255,255,.88); } /* .78 dava 4.48:1 */ .loja__linha2 { font-size: 16px; font-weight: 700; letter-spacing: -.01em; } .loja__pastilha { margin-left: auto; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #1A1533; background: #FFC98F; border-radius: 999px; padding: 4px 9px; white-space: nowrap; } .nota-lojas { margin-top: 16px; font-size: 14.5px; color: var(--tinta-tenue); } /* --- faixa de confianca --------------------------------------------------- */ .faixa { background: var(--branco); border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); padding: 26px 0; } .faixa__itens { display: grid; gap: 18px; } .faixa__item { display: flex; align-items: center; gap: 11px; font-size: 15px; font-weight: 600; } .faixa__item svg { flex-shrink: 0; color: var(--roxo); } /* --- o problema ----------------------------------------------------------- */ .problema { background: var(--escuro); color: #fff; padding: 68px 0; } .problema__lista { color: rgba(255,255,255,.72); font-size: clamp(1.04rem, 3.6vw, 1.24rem); max-width: 56ch; margin-bottom: 20px; } .problema__remate { font-family: var(--display); font-size: clamp(1.4rem, 5.4vw, 2.1rem); font-weight: 700; letter-spacing: -.025em; max-width: 20ch; line-height: 1.16; } /* --- cartoes -------------------------------------------------------------- */ .grelha { display: grid; gap: 18px; margin-top: 38px; } .cartao { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: 26px; box-shadow: var(--sombra); } .cartao__icone { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--roxo-tenue); color: var(--roxo-fundo); margin-bottom: 16px; } .cartao h3 { font-size: 1.16rem; margin-bottom: 10px; } .cartao p { color: var(--tinta-suave); font-size: .98rem; } /* --- passos --------------------------------------------------------------- */ .passos { list-style: none; margin: 38px 0 0; padding: 0; display: grid; gap: 16px; } .passo { display: flex; gap: 17px; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: 24px; box-shadow: var(--sombra); } .passo__numero { flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: var(--roxo); color: #fff; font-family: var(--display); font-weight: 700; font-size: 18px; } .passo h3 { font-size: 1.1rem; margin-bottom: 8px; } .passo p { color: var(--tinta-suave); font-size: .97rem; max-width: 58ch; } /* --- urgente -------------------------------------------------------------- */ .urgente { background: var(--escuro); color: #fff; padding: 84px 0; position: relative; overflow: hidden; } .urgente::before { content: ""; position: absolute; top: -160px; left: -120px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(255,140,60,.16), transparent 66%); } .urgente .envelope { position: relative; } .urgente .rotulo { color: var(--laranja-vivo); } .urgente .titulo-seccao { color: #fff; } .urgente .intro { color: rgba(255,255,255,.74); } .urgente .remate { color: #fff; } .selo-urgente { display: inline-flex; align-items: center; gap: 7px; color: var(--laranja-vivo); background: rgba(255,140,60,.12); border: 1px solid rgba(255,140,60,.5); border-radius: 999px; padding: 5px 13px; font-size: 12.5px; font-weight: 700; margin-bottom: 18px; } /* --- sem comissao --------------------------------------------------------- */ .gratis { display: inline-flex; align-items: baseline; gap: 10px; background: var(--branco); border: 2px solid var(--verde-vivo); border-radius: 999px; padding: 12px 26px; margin-top: 26px; font-weight: 700; color: var(--verde); box-shadow: var(--sombra); } /* --- confianca ------------------------------------------------------------ */ .confianca { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; color: var(--tinta-suave); font-size: .98rem; } .confianca li { position: relative; padding-left: 30px; } .confianca li::before { content: ""; position: absolute; left: 0; top: .42em; width: 18px; height: 18px; border-radius: 50%; background: var(--roxo-tenue); box-shadow: inset 0 0 0 1.5px var(--roxo-linha); } .confianca li::after { content: ""; position: absolute; left: 5.5px; top: .78em; width: 6px; height: 3px; border-left: 2px solid var(--roxo-fundo); border-bottom: 2px solid var(--roxo-fundo); transform: rotate(-45deg); } /* --- fecho ---------------------------------------------------------------- */ .fecho { background: var(--escuro); color: #fff; padding: 88px 0 94px; position: relative; overflow: hidden; } .fecho::before { content: ""; position: absolute; bottom: -280px; left: 50%; width: 780px; height: 560px; transform: translateX(-50%); background: radial-gradient(ellipse, rgba(108,71,255,.34), transparent 66%); } .fecho .envelope { position: relative; } .fecho__assinatura { font-size: clamp(2.1rem, 7.6vw, 3.4rem); letter-spacing: -.034em; } .fecho .lojas { margin: 34px 0 20px; } .fecho .nota-lojas { color: rgba(255,255,255,.62); } .fecho .loja { background: var(--branco); color: var(--tinta); } .fecho .loja__glifo { color: var(--tinta-suave); } .fecho .loja__linha1 { color: var(--tinta-tenue); } /* --- rodape --------------------------------------------------------------- */ .rodape { background: var(--escuro); color: rgba(255,255,255,.68); padding: 34px 0; border-top: 1px solid rgba(255,255,255,.1); } .rodape__interior { display: grid; gap: 22px; } .rodape .marca { color: #fff; margin-bottom: 12px; } .rodape__linha { font-size: 14.5px; } .rodape__linha--tenue { color: rgba(255,255,255,.5); font-size: 13.5px; } .rodape a { color: #fff; font-size: 14.5px; text-decoration: none; } .rodape a:hover { text-decoration: underline; } /* ========================================================================== PAGINAS LEGAIS — /termos e /privacidade Paginas ocultas: sem ligacao no menu nem no rodape da landing. ========================================================================== */ .legal { padding: 44px 0 80px; } .legal__envelope { max-width: 780px; margin: 0 auto; padding: 0 22px; } .legal__topo { border-bottom: 1px solid var(--linha); padding: 20px 0; margin-bottom: 40px; } .legal h1 { font-size: clamp(1.9rem, 6vw, 2.6rem); margin-bottom: 14px; } .legal__meta { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; color: var(--tinta-suave); background: var(--branco); border: 1px solid var(--linha); border-radius: 14px; padding: 14px 18px; margin-bottom: 34px; } .legal__intro { color: var(--tinta-suave); font-size: 1.05rem; margin-bottom: 34px; } .legal h2 { font-size: 1.42rem; margin: 46px 0 14px; padding-top: 26px; border-top: 1px solid var(--linha); } .legal h2:first-of-type { border-top: 0; padding-top: 0; } .legal h3 { font-size: 1.08rem; margin: 26px 0 10px; font-family: var(--tipo); font-weight: 700; } .legal p { margin-bottom: 14px; color: var(--tinta-suave); } .legal strong { color: var(--tinta); } .legal ul, .legal ol { margin: 0 0 16px; padding-left: 22px; color: var(--tinta-suave); } .legal li { margin-bottom: 8px; } .legal__tabela-caixa { overflow-x: auto; margin-bottom: 20px; -webkit-overflow-scrolling: touch; } .legal table { border-collapse: collapse; width: 100%; min-width: 460px; font-size: .95rem; } .legal th, .legal td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--linha); vertical-align: top; } .legal th { font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--tinta); background: var(--creme-2); font-weight: 700; } .legal td { color: var(--tinta-suave); } .aviso { border-left: 3px solid var(--roxo); background: var(--roxo-tenue); border-radius: 0 14px 14px 0; padding: 16px 20px; margin: 22px 0; } .aviso p { color: var(--tinta); margin-bottom: 0; } .aviso--laranja { border-left-color: var(--laranja-vivo); background: #FDF0E4; } /* marcador de dado em falta — tem de saltar a vista de quem revê */ .falta { background: #FFE8C2; color: #7A3E00; border: 1px dashed #C2410C; border-radius: 6px; padding: 1px 7px; font-weight: 700; font-size: .92em; } .legal__rodape { margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--linha); font-size: 14px; color: var(--tinta-tenue); } .legal__rodape a { color: var(--roxo-fundo); } /* --- ecras maiores -------------------------------------------------------- */ @media (min-width: 620px) { .grelha--3 { grid-template-columns: repeat(2, 1fr); } .faixa__itens { grid-template-columns: repeat(2, 1fr); } .rodape__interior { grid-template-columns: 1fr auto; align-items: end; } .rodape__contacto { text-align: right; } } @media (min-width: 940px) { body { font-size: 18px; } .seccao { padding: 104px 0; } .heroi { padding: 76px 0 92px; } .heroi__grelha { grid-template-columns: 1.04fr .96fr; gap: 60px; align-items: center; } .heroi__foto { aspect-ratio: 4 / 4.6; } .grelha--3 { grid-template-columns: repeat(3, 1fr); } .faixa__itens { grid-template-columns: repeat(4, 1fr); } .passos { grid-template-columns: repeat(2, 1fr); } .confianca { grid-template-columns: repeat(2, 1fr); column-gap: 44px; } .problema { padding: 92px 0; } } /* O selo do Google Play passou a ser um link a serio. O `.loja` tinha `cursor: default` porque so decorava; agora clica-se. */ a.loja { cursor: pointer; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; } a.loja:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.18); } a.loja:focus-visible { outline: 3px solid var(--realce, #6C47FF); outline-offset: 3px; } a.nav__pastilha { text-decoration: none; cursor: pointer; } a.nav__pastilha:focus-visible { outline: 3px solid var(--realce, #6C47FF); outline-offset: 3px; }