/* ========================================================================== FINANCEIRO DIÁRIO · link na bio (Lucas Pontes) Nenhuma cor, raio ou sombra escrita à mão aqui. Tudo vem de tokens.css. A página roda no tema LIGHT do DS, que é o `:root` de tokens.css. O não leva [data-theme]: se levar "dark", ela vira a versão escura inteira sem mais nenhuma mudança aqui. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--fd-bg); color: var(--fd-text); font-family: var(--fd-font-sans); font-size: var(--fd-text-body); line-height: 1.5; -webkit-font-smoothing: antialiased; } /* O único brilho da página: um halo verde atrás do hero, e no claro ele é bem mais discreto que no escuro (12%, não 20%), senão o #F4F4F4 fica esverdeado. Não é decoração solta, é o que separa a dobra do resto do fundo chapado. Fica `fixed` para não custar repaint ao rolar. */ body::before { content: ""; position: fixed; inset: -20% 0 auto 0; height: 620px; background: radial-gradient(58% 52% at 50% 0%, rgba(40, 164, 69, .12), transparent 70%); pointer-events: none; z-index: 0; } img { max-width: 100%; height: auto; display: block; } h1, h2, h3, p, ul, figure { margin: 0; } ul { padding: 0; list-style: none; } a { color: inherit; } :focus-visible { outline: 3px solid var(--fd-primary-strong); outline-offset: 3px; border-radius: var(--fd-radius-sm); } .pula { position: absolute; left: -9999px; top: var(--fd-s3); z-index: 10; background: var(--fd-surface); color: var(--fd-text); padding: var(--fd-s3) var(--fd-s4); border-radius: var(--fd-radius-md); font-weight: var(--fd-fw-bold); } .pula:focus { left: var(--fd-s3); } /* -------------------------------------------------------------------------- Coluna. Isto é um link na bio: a página tem largura de celular em qualquer tela. Não existe breakpoint que a abra em grade. -------------------------------------------------------------------------- */ .coluna { position: relative; z-index: 1; width: 100%; max-width: var(--fd-col); margin: 0 auto; padding: 0 var(--fd-s5) var(--fd-s7); } /* -------------------------------------------------------------------------- Rótulo de seção. A régua verde curta antes do texto é a mesma linha que separa os lançamentos: marca onde um bloco começa. -------------------------------------------------------------------------- */ .rot { display: flex; align-items: center; gap: var(--fd-s2); font-size: 12px; font-weight: var(--fd-fw-semibold); letter-spacing: var(--fd-track-label); text-transform: uppercase; color: var(--fd-text-muted); } .rot::before { content: ""; width: 18px; height: 2px; background: var(--fd-primary); border-radius: var(--fd-radius-full); flex: none; } /* -------------------------------------------------------------------------- Hero É o único bloco centrado da página. O miolo segue alinhado à esquerda, e esse contraste é o que faz a dobra parecer capa e o resto parecer leitura. -------------------------------------------------------------------------- */ .hero { padding: var(--fd-s7) 0 0; text-align: center; } .hero__logo { margin: 0 auto var(--fd-s6); } /* Pílula partida: a mesma construção do logo (bloco neutro + metade verde). O verde aqui é suave, não chapado. O único preenchimento verde sólido da página é o botão, para que verde sólido queira dizer sempre "clique". */ .pill-split { display: inline-flex; align-items: stretch; border: 1px solid var(--fd-border); border-radius: var(--fd-radius-full); overflow: hidden; font-size: 12.5px; font-weight: var(--fd-fw-bold); letter-spacing: .01em; } .pill-split__a, .pill-split__b { padding: 7px 14px; } .pill-split__a { background: var(--fd-surface); color: var(--fd-text-muted); } .pill-split__b { background: var(--fd-primary-soft); color: var(--fd-primary-strong); font-variant-numeric: tabular-nums; } .hero__titulo { margin: var(--fd-s4) 0 0; font-size: var(--fd-text-hero); font-weight: var(--fd-fw-extrabold); letter-spacing: var(--fd-track-tight); line-height: 1.05; } .hero__lead { margin: var(--fd-s4) auto 0; max-width: var(--fd-col-text); font-size: var(--fd-text-lead); line-height: 1.55; color: var(--fd-text-muted); } /* -------------------------------------------------------------------------- Botão. Único verde chapado da página. 19px/800 é proposital: nesse tamanho o rótulo branco sobre #28A445 entra como texto grande na WCAG (3,1:1 contra o mínimo de 3:1). Reduzir a fonte quebra o contraste do botão. -------------------------------------------------------------------------- */ .btn { display: flex; align-items: center; justify-content: center; gap: var(--fd-s2); min-height: 56px; margin-top: var(--fd-s5); padding: 0 var(--fd-s5); background: var(--fd-primary); color: var(--fd-on-primary); border-radius: var(--fd-radius-full); font-size: 19px; font-weight: var(--fd-fw-extrabold); letter-spacing: -.01em; text-decoration: none; box-shadow: var(--fd-shadow-md); transition: background var(--fd-dur-fast) var(--fd-ease), transform var(--fd-dur-fast) var(--fd-ease); } .btn:hover { background: var(--fd-primary-hover); transform: translateY(-2px); } .btn:active { transform: translateY(0); } .nota { margin-top: var(--fd-s3); font-size: var(--fd-text-small); color: var(--fd-text-muted); } /* -------------------------------------------------------------------------- Extrato. A assinatura da página. O produto é uma linha de lançamento; o limite do teste é um contador dentro dessa mesma linha. É por isso que não existe seção de oferta. -------------------------------------------------------------------------- */ .extrato { margin-top: var(--fd-s7); background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius-xl); box-shadow: var(--fd-shadow-lg); overflow: hidden; } .extrato__head { display: flex; align-items: center; justify-content: space-between; gap: var(--fd-s3); padding: var(--fd-s4) var(--fd-s5) var(--fd-s3); border-bottom: 1px solid var(--fd-border); } .extrato__titulo { font-size: var(--fd-text-small); font-weight: var(--fd-fw-bold); letter-spacing: .02em; color: var(--fd-text); } .extrato__tag { padding: 3px 9px; border: 1px solid var(--fd-border-strong); border-radius: var(--fd-radius-full); font-size: 11px; font-weight: var(--fd-fw-semibold); letter-spacing: .06em; text-transform: uppercase; color: var(--fd-text-muted); } .lanc { display: grid; grid-template-columns: 46px 1fr auto; align-items: baseline; gap: var(--fd-s3); padding: var(--fd-s3) var(--fd-s5); border-bottom: 1px solid var(--fd-border); } .lanc__hora { font-size: 12px; font-weight: var(--fd-fw-semibold); font-variant-numeric: tabular-nums; color: var(--fd-text-muted); } .lanc__desc { font-size: 14px; color: var(--fd-text); min-width: 0; } .lanc__valor { font-size: 14px; font-weight: var(--fd-fw-bold); font-variant-numeric: tabular-nums; white-space: nowrap; } .lanc__valor--entrada { color: var(--fd-success); } .lanc__valor--saida { color: var(--fd-danger); } .extrato__pe { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--fd-s3); padding: var(--fd-s4) var(--fd-s5); background: var(--fd-surface-2); } /* O contador é o próprio limite do teste, medido na régua embaixo. */ .contador { display: flex; align-items: baseline; gap: 5px; position: relative; padding-bottom: var(--fd-s2); } .contador::before, .contador::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; border-radius: var(--fd-radius-full); } .contador::before { width: 100%; background: var(--fd-border-strong); } .contador::after { width: var(--barra, 6%); background: var(--fd-primary); transition: width var(--fd-dur-slow) var(--fd-ease); } .contador__n { font-size: 19px; font-weight: var(--fd-fw-extrabold); font-variant-numeric: tabular-nums; color: var(--fd-primary-strong); } .contador__r { font-size: 14px; font-weight: var(--fd-fw-bold); font-variant-numeric: tabular-nums; color: var(--fd-text-muted); } .contador__rot { font-size: 11.5px; font-weight: var(--fd-fw-semibold); letter-spacing: .04em; color: var(--fd-text-muted); } .extrato__saldo { font-size: 12.5px; text-align: right; color: var(--fd-text-muted); } .extrato__saldo b { display: block; font-size: 16px; font-weight: var(--fd-fw-extrabold); font-variant-numeric: tabular-nums; color: var(--fd-text); } /* -------------------------------------------------------------------------- Seções do miolo -------------------------------------------------------------------------- */ .sec { padding-top: var(--fd-s9); } .sec__titulo { margin-top: var(--fd-s3); font-size: var(--fd-text-sec); font-weight: var(--fd-fw-extrabold); letter-spacing: -.02em; line-height: 1.15; } .sec__texto { margin-top: var(--fd-s4); max-width: var(--fd-col-text); font-size: 15.5px; line-height: 1.6; color: var(--fd-text-muted); } /* -------------------------------------------------------------------------- Perguntas -------------------------------------------------------------------------- */ .faq { margin-top: var(--fd-s5); } .q { border-top: 1px solid var(--fd-border); } .q:last-child { border-bottom: 1px solid var(--fd-border); } .q__p { display: flex; align-items: center; justify-content: space-between; gap: var(--fd-s4); min-height: var(--fd-tap); padding: var(--fd-s4) 0; font-size: 15.5px; font-weight: var(--fd-fw-bold); color: var(--fd-text); cursor: pointer; list-style: none; } .q__p::-webkit-details-marker { display: none; } .q__p::after { content: ""; width: 11px; height: 11px; flex: none; border-right: 2px solid var(--fd-primary-strong); border-bottom: 2px solid var(--fd-primary-strong); transform: translateY(-3px) rotate(45deg); transition: transform var(--fd-dur) var(--fd-ease); } .q[open] .q__p::after { transform: translateY(2px) rotate(-135deg); } .q__r { padding: 0 0 var(--fd-s5); max-width: var(--fd-col-text); font-size: 14.5px; line-height: 1.6; color: var(--fd-text-muted); } /* -------------------------------------------------------------------------- Fechamento -------------------------------------------------------------------------- */ .fecha { margin-top: var(--fd-s9); padding: var(--fd-s6) var(--fd-s5) var(--fd-s5); background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius-xl); } .fecha__titulo { font-size: var(--fd-text-sec); font-weight: var(--fd-fw-extrabold); letter-spacing: -.02em; line-height: 1.15; } .fecha__texto { margin-top: var(--fd-s3); font-size: 15.5px; line-height: 1.55; color: var(--fd-text-muted); } /* -------------------------------------------------------------------------- Rodapé -------------------------------------------------------------------------- */ .rodape { position: relative; z-index: 1; padding-top: var(--fd-s7); border-top: 1px solid var(--fd-border); margin-top: var(--fd-s8); } .rodape__logo { opacity: .9; } .rodape__assinatura { margin-top: var(--fd-s4); font-size: 14px; line-height: 1.5; color: var(--fd-text-muted); } .rodape__links { display: flex; flex-direction: column; margin-top: var(--fd-s5); } .rodape__links a { display: flex; align-items: center; min-height: var(--fd-tap); font-size: 14.5px; font-weight: var(--fd-fw-semibold); color: var(--fd-text-muted); text-decoration: none; border-bottom: 1px solid var(--fd-border); transition: color var(--fd-dur-fast) var(--fd-ease); } .rodape__links a:first-child { border-top: 1px solid var(--fd-border); } .rodape__links a:hover { color: var(--fd-primary-strong); } .rodape__nota { margin-top: var(--fd-s5); font-size: 12.5px; line-height: 1.5; color: var(--fd-text-muted); } .rodape__ano { display: block; } /* -------------------------------------------------------------------------- Passos numerados O número só existe porque estes blocos SÃO uma sequência: a ordem carrega informação (não dá para conferir a importação antes de subir o arquivo). Nas listas que não são sequência, como os recursos, não há numeração. -------------------------------------------------------------------------- */ .passos { margin: var(--fd-s5) 0 0; padding: 0; list-style: none; counter-reset: none; } .passo { display: grid; grid-template-columns: auto 1fr; gap: var(--fd-s4); padding: var(--fd-s5) 0; border-top: 1px solid var(--fd-border); } .passo:last-child { border-bottom: 1px solid var(--fd-border); } .passo__n { font-size: var(--fd-text-small); font-weight: var(--fd-fw-extrabold); font-variant-numeric: tabular-nums; letter-spacing: .06em; color: var(--fd-primary-strong); padding-top: 2px; } .passo__titulo { font-size: 16.5px; font-weight: var(--fd-fw-bold); letter-spacing: -.01em; } .passo__texto { margin-top: 6px; font-size: 14.5px; line-height: 1.55; color: var(--fd-text-muted); } /* -------------------------------------------------------------------------- Selos -------------------------------------------------------------------------- */ .selos { display: flex; flex-wrap: wrap; gap: var(--fd-s2); margin-top: var(--fd-s5); } .selo { padding: 6px 12px; background: var(--fd-primary-soft); border-radius: var(--fd-radius-full); font-size: 12.5px; font-weight: var(--fd-fw-semibold); color: var(--fd-primary-strong); } /* -------------------------------------------------------------------------- Depoimentos Fotos e falas reais, com autorização, vindas do site institucional. -------------------------------------------------------------------------- */ .sec__texto--nota { font-size: 13.5px; color: var(--fd-text-muted); } .depos { margin-top: var(--fd-s5); display: grid; gap: var(--fd-s4); } .depo { padding: var(--fd-s5); background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius-lg); box-shadow: var(--fd-shadow-sm); } .depo__fala { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--fd-text); } .depo__fala::before { content: "\201C"; } .depo__fala::after { content: "\201D"; } .depo__quem { display: flex; align-items: center; gap: var(--fd-s3); margin: var(--fd-s4) 0 0; padding-top: var(--fd-s4); border-top: 1px solid var(--fd-border); } .depo__quem img { width: 44px; height: 44px; flex: none; border-radius: var(--fd-radius-full); border: 1px solid var(--fd-border); object-fit: cover; } .depo__quem b { display: block; font-size: 13.5px; font-weight: var(--fd-fw-bold); } .depo__quem span { display: block; margin-top: 1px; font-size: 12.5px; color: var(--fd-text-muted); } /* Título sem rótulo em cima não precisa da folga que compensa o rótulo. */ .sec__titulo--solo { margin-top: 0; } /* -------------------------------------------------------------------------- Clareza visual (entra · sai · sobra) As três cores são as mesmas do extrato do hero: verde para entrada, vermelho para saída, texto cheio para o resultado. A página inteira usa esse par de cores só para dinheiro, nunca para decorar. -------------------------------------------------------------------------- */ .clareza { margin-top: var(--fd-s5); display: grid; gap: var(--fd-s4); } .clar { padding: var(--fd-s5); background: var(--fd-surface); border: 1px solid var(--fd-border); border-left: 3px solid var(--fd-border-strong); border-radius: var(--fd-radius-lg); } .clar--in { border-left-color: var(--fd-success); } .clar--out { border-left-color: var(--fd-danger); } .clar--res { border-left-color: var(--fd-text); } .clar__rot { display: block; font-size: 11.5px; font-weight: var(--fd-fw-extrabold); letter-spacing: var(--fd-track-label); text-transform: uppercase; } .clar--in .clar__rot { color: var(--fd-success); } .clar--out .clar__rot { color: var(--fd-danger); } .clar--res .clar__rot { color: var(--fd-text); } .clar__titulo { margin-top: 6px; font-size: 16.5px; font-weight: var(--fd-fw-extrabold); letter-spacing: -.01em; } .clar__texto { margin-top: var(--fd-s2); font-size: 14.5px; line-height: 1.55; color: var(--fd-text-muted); } /* -------------------------------------------------------------------------- Funcionalidades Linhas com marca de conferido, como na página de vendas. Não são cards em grade de propósito: numa coluna de 520px, oito cards viram oito caixinhas de duas palavras. -------------------------------------------------------------------------- */ .checks { margin-top: var(--fd-s5); } .check { display: grid; grid-template-columns: auto 1fr; gap: var(--fd-s3); padding: var(--fd-s4) 0; border-top: 1px solid var(--fd-border); } .check:last-child { border-bottom: 1px solid var(--fd-border); } .check::before { content: "✓"; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; background: var(--fd-primary-soft); border-radius: var(--fd-radius-full); font-size: 12px; font-weight: var(--fd-fw-extrabold); color: var(--fd-primary-strong); } /* Título e texto na MESMA coluna, um embaixo do outro. Sem isto o posicionamento automático da grade joga o parágrafo para a coluna 1, debaixo da marca de conferido, e o título fica espremido na coluna 2. */ .check__titulo, .check__texto { grid-column: 2; } .check__titulo { font-size: 16px; font-weight: var(--fd-fw-bold); letter-spacing: -.01em; } .check__texto { margin-top: 4px; font-size: 14.5px; line-height: 1.55; color: var(--fd-text-muted); } /* -------------------------------------------------------------------------- Para quem não é Bloco de honestidade: fica em cartão apagado, sem verde nenhum. O verde nesta página é sempre avanço, e aqui a mensagem é o contrário. -------------------------------------------------------------------------- */ .naoe { margin-top: var(--fd-s5); display: grid; gap: var(--fd-s3); } .naoe__item { padding: var(--fd-s4) var(--fd-s5); background: var(--fd-surface-2); border-radius: var(--fd-radius-lg); } .naoe__titulo { font-size: 15.5px; font-weight: var(--fd-fw-extrabold); letter-spacing: -.01em; } .naoe__texto { margin-top: 5px; font-size: 14px; line-height: 1.55; color: var(--fd-text-muted); } /* -------------------------------------------------------------------------- Telas do produto Todas as imagens vieram de /seu-primeiro-passo (ltq-financeirodiario-2/ assets/), que é onde a LTQ publica os prints oficiais do sistema. O mockup do hero é o único com canal alfa: ele senta direto no fundo da página, sem cartão. Os prints de tela são chapados em branco, então precisam de borda para não se dissolverem no cartão branco em volta. -------------------------------------------------------------------------- */ /* O mockup sangra por cima do respiro lateral da coluna. Numa tela de 390px isso devolve 48px de largura, que é a diferença entre "dá para ver que são três aparelhos" e "é um borrão". O detalhe legível de cada tela está nos prints das seções seguintes; aqui o trabalho da imagem é só dizer que o sistema abre no computador, no tablet e no celular. */ .hero__mock { width: calc(100% + var(--fd-s5) * 2); max-width: none; margin: var(--fd-s6) calc(var(--fd-s5) * -1) 0; } .tela { width: 100%; margin-top: var(--fd-s4); border: 1px solid var(--fd-border); border-radius: var(--fd-radius-md); } /* A lista de lançamentos é um print alto (900x1125) e a coluna da direita já vem cortada no arquivo original. Recortar pelo topo mostra o cabeçalho e as primeiras linhas, que é o que a seção precisa provar, sem que uma imagem só ocupe uma tela inteira de celular. */ .tela--alta { aspect-ratio: 900 / 620; object-fit: cover; object-position: top; } .time { width: 100%; margin-top: var(--fd-s5); border-radius: var(--fd-radius-lg); } /* -------------------------------------------------------------------------- Movimento Um momento orquestrado só: os três lançamentos caindo e o contador subindo até 3. O resto da página é revelação discreta ao rolar. -------------------------------------------------------------------------- */ @keyframes lancIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* O extrato deixou de morar no hero: agora ele ilustra a seção da conta gratuita, no meio da página. Por isso a animação não dispara mais no carregamento, e sim quando o cartão entra na tela (o main.js põe o `is-on`). Sem isso os lançamentos cairiam sozinhos, muito antes de alguém ver. */ .js .lanc { opacity: 0; } .js .extrato.is-on .lanc { animation: lancIn var(--fd-dur-slow) var(--fd-ease) forwards; animation-delay: calc(var(--i) * 130ms); } /* Rede de segurança: se o main.js não subir, os lançamentos aparecem mesmo assim, junto com o resto do conteúdo. */ .js.reveal-fallback .lanc { opacity: 1; } .js [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity var(--fd-dur-slow) var(--fd-ease), transform var(--fd-dur-slow) var(--fd-ease); } .js [data-reveal].is-in, .js.reveal-fallback [data-reveal] { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js .lanc { opacity: 1; animation: none; } .js [data-reveal] { opacity: 1; transform: none; transition: none; } .contador::after { transition: none; } .btn:hover { transform: none; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* -------------------------------------------------------------------------- Telas menores. A coluna não muda de layout, só de respiro. -------------------------------------------------------------------------- */ @media (max-width: 360px) { .coluna { padding-left: var(--fd-s4); padding-right: var(--fd-s4); } .lanc { grid-template-columns: 1fr auto; } .lanc__hora { display: none; } .extrato__head, .lanc, .extrato__pe { padding-left: var(--fd-s4); padding-right: var(--fd-s4); } }