/* ========================================================================== FITCHECK AI — Landing page Consome os tokens do design system (design-system/styles.css) carregado antes deste arquivo no . Nenhum token novo é criado aqui: tudo abaixo é layout, ritmo e componentes de marketing construídos sobre o DS. Convenção de especificidade: cada regra usa UMA classe. Padding vertical de seção vive exclusivamente em .sec — nenhuma outra regra o sobrescreve. ========================================================================== */ /* -------------------------------------------------------------------------- 0. Um único alias local -------------------------------------------------------------------------- */ :root { /* Micro-texto da landing (eyebrows, legendas, ticks, metadados). Sobre #080808 o --text-tertiary do DS (grey-500) fica em 4.14:1 e sobre os cards em 3.94:1 — abaixo do mínimo AA de 4.5:1. Nenhum token do design system é alterado: apenas escolhemos o degrau do ramp que passa no contraste (grey-300 = 7.81:1). A hierarquia continua sendo feita por tamanho, peso e tracking, como manda o DS. Dentro dos mockups de aparelho o tertiary é mantido, porque ali estamos reproduzindo a interface do app, não escrevendo texto de página. */ --text-micro: var(--grey-300); } /* -------------------------------------------------------------------------- 1. Base da página -------------------------------------------------------------------------- */ html { scroll-behavior: smooth; scroll-padding-top: 88px; } body { overflow-x: hidden; text-rendering: optimizeLegibility; } ::selection { background: var(--lime-500); color: var(--lime-ink); } :focus-visible { outline: 2px solid var(--lime-500); outline-offset: 3px; border-radius: var(--radius-xs); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip { position: absolute; top: 8px; left: 8px; z-index: 100; padding: 10px 16px; background: var(--lime-500); color: var(--lime-ink); border-radius: var(--radius-xs); font-weight: var(--fw-bold); transform: translateY(-200%); transition: transform var(--dur-fast) var(--ease-standard); } .skip:focus { transform: translateY(0); } .icon { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* -------------------------------------------------------------------------- 2. Layout -------------------------------------------------------------------------- */ .wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter-screen); } .sec { position: relative; padding-block: clamp(72px, 11vw, 148px); } .sec-flush { position: relative; padding-block: 0; } .stack-sm > * + * { margin-top: var(--space-3); } .stack-md > * + * { margin-top: var(--space-5); } .stack-lg > * + * { margin-top: var(--space-8); } /* -------------------------------------------------------------------------- 3. Tipografia de página -------------------------------------------------------------------------- */ .kicker { font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: var(--fw-medium); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--text-micro); } .kicker-accent { color: var(--lime-500); } /* Assinatura estrutural: régua hairline com etiqueta mono sentada sobre ela — o vocabulário de uma etiqueta de peça de roupa, não decoração. */ .notch { display: flex; align-items: center; gap: var(--space-4); margin-bottom: clamp(28px, 5vw, 48px); } .notch::after { content: ""; flex: 1; height: 1px; background: var(--border-subtle); } .h-display { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: clamp(38px, 6.2vw, 76px); line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance; } .h-sec { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: clamp(30px, 4.6vw, 56px); line-height: 1.06; letter-spacing: -0.032em; text-wrap: balance; max-width: 16ch; } .h-sub { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: clamp(20px, 2.4vw, 26px); line-height: 1.2; letter-spacing: var(--tr-heading); } .lede { font-size: clamp(17px, 1.7vw, 20px); line-height: 1.5; color: var(--text-secondary); max-width: 46ch; text-wrap: pretty; } .copy { font-size: var(--fs-body); line-height: 1.55; color: var(--text-secondary); max-width: 52ch; text-wrap: pretty; } .copy-sm { font-size: var(--fs-body-sm); line-height: 1.5; color: var(--text-micro); text-wrap: pretty; } .accent { color: var(--lime-500); } /* -------------------------------------------------------------------------- 4. Botões / CTAs -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 58px; padding-inline: 26px; border: 1px solid transparent; border-radius: var(--radius-button); background: var(--surface-3); color: var(--text-primary); font-family: var(--font-display); font-size: var(--fs-body); font-weight: var(--fw-extrabold); letter-spacing: -0.01em; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), transform var(--dur-instant) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); } .btn:active { transform: scale(var(--press-scale)); } .btn-primary { background: var(--lime-500); color: var(--lime-ink); text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--fs-body-sm); box-shadow: var(--glow-accent-strong); } .btn-primary:hover { background: var(--lime-400); opacity: 1; } .btn-outline { background: transparent; border-color: var(--border-strong); color: var(--text-primary); } .btn-outline:hover { background: var(--w-06); opacity: 1; } .btn-sm { height: var(--tap-min); padding-inline: 18px; font-size: var(--fs-body-sm); } .btn-quiet { display: inline-flex; align-items: center; gap: 8px; color: var(--text-secondary); font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard); } .btn-quiet:hover { color: var(--text-primary); opacity: 1; } .btn-quiet .icon { width: 16px; height: 16px; transition: transform var(--dur-base) var(--ease-out); } .btn-quiet:hover .icon { transform: translateX(3px); } /* Badges de loja ---------------------------------------------------------- */ .stores { display: flex; flex-wrap: wrap; gap: var(--space-3); } .store { display: inline-flex; align-items: center; gap: 12px; height: 58px; padding-inline: 20px; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius-button); color: var(--text-primary); text-decoration: none; -webkit-tap-highlight-color: transparent; transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), transform var(--dur-instant) var(--ease-standard); } .store:hover { background: var(--ink-500); border-color: var(--w-20); opacity: 1; } .store:active { transform: scale(var(--press-scale)); } .store-glyph { width: 24px; height: 24px; flex: 0 0 auto; fill: currentColor; stroke: none; } .store-text { display: grid; gap: 1px; line-height: 1; } .store-top { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-micro); } .store-name { font-family: var(--font-display); font-size: 15px; font-weight: var(--fw-extrabold); letter-spacing: -0.02em; } /* Estado "em breve": o app ainda está em revisão nas lojas, então o badge informa em vez de convidar — sem href, sem hover de link, sem cursor de ponteiro. O JS reativa o botão sozinho assim que STORE_URLS for preenchido. */ .stores-label { display: block; color: var(--text-micro); } .store.is-soon { cursor: default; background: transparent; border-style: dashed; border-color: var(--border-subtle, var(--border-strong)); color: var(--text-secondary, var(--text-primary)); } .store.is-soon:hover { background: transparent; border-color: var(--border-strong); } .store.is-soon:active { transform: none; } .store.is-soon .store-glyph { opacity: 0.65; } .store.is-soon .store-top { color: var(--lime-500); opacity: 0.8; } /* -------------------------------------------------------------------------- 5. Navegação -------------------------------------------------------------------------- */ .nav { position: sticky; top: 0; z-index: 60; background: var(--surface-glass); -webkit-backdrop-filter: var(--blur-glass); backdrop-filter: var(--blur-glass); border-bottom: 1px solid var(--border-subtle); } .nav-inner { display: flex; align-items: center; gap: var(--space-6); height: 68px; } .nav-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--text-primary); text-decoration: none; flex: 0 0 auto; } .nav-logo:hover { opacity: 1; } .nav-mark { width: 26px; height: 26px; flex: 0 0 auto; } .nav-word { font-family: var(--font-display); font-size: 17px; font-weight: var(--fw-extrabold); letter-spacing: -0.03em; } .nav-links { display: none; margin-left: auto; gap: var(--space-6); } .nav-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-secondary); font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard); } .nav-link:hover { color: var(--text-primary); opacity: 1; } .nav-cta { margin-left: auto; } /* -------------------------------------------------------------------------- 6. Hero -------------------------------------------------------------------------- */ .hero { position: relative; padding-top: clamp(40px, 6vw, 76px); padding-bottom: clamp(56px, 8vw, 104px); overflow: hidden; } .hero-grid { display: grid; gap: clamp(40px, 6vw, 64px); } /* Garantia: texto e CTA sempre por cima dos aparelhos, aconteça o que acontecer com a largura da janela. */ .hero-copy { position: relative; z-index: 4; } .hero-title { font-family: var(--font-display); font-weight: var(--fw-extrabold); /* No celular as três palavras ocupam a largura quase inteira — é a manchete que carrega a personalidade da página, não um título de apoio. */ font-size: clamp(64px, 22vw, 116px); line-height: 0.92; letter-spacing: -0.045em; margin-block: var(--space-5) var(--space-6); } .hero-title span { display: block; } .hero-sub { font-family: var(--font-display); font-size: clamp(19px, 2.3vw, 24px); font-weight: var(--fw-bold); line-height: 1.3; letter-spacing: var(--tr-heading); max-width: 22ch; text-wrap: balance; } .hero-text { margin-top: var(--space-4); font-size: var(--fs-body); line-height: 1.55; color: var(--text-secondary); max-width: 44ch; text-wrap: pretty; } .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-8); } .hero-stores { margin-top: var(--space-5); } .hero-meta { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-6); color: var(--text-micro); } .hero-meta .icon { width: 14px; height: 14px; color: var(--lime-500); } /* Cluster de aparelhos ---------------------------------------------------- */ .hero-phones { position: relative; display: flex; align-items: flex-start; justify-content: center; } .hero-phone-main { position: relative; z-index: 3; } /* Os aparelhos laterais só aparecem quando há largura para eles respirarem. */ .hero-phone-side { display: none; position: relative; z-index: 1; } /* A sobreposição é forte de propósito: mantém o conjunto estreito o bastante para nunca invadir a coluna de texto nem o CTA. */ .hero-phone-a { margin-right: -26%; transform: translateY(56px); } .hero-phone-b { margin-left: -26%; transform: translateY(92px); } /* -------------------------------------------------------------------------- 7. Problema -------------------------------------------------------------------------- */ .problema-head { max-width: 20ch; } .situacoes { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); margin-top: clamp(32px, 5vw, 56px); padding: 0; list-style: none; } .situacao { display: grid; gap: var(--space-3); } .situacao-photo { aspect-ratio: 3 / 4; border-radius: var(--radius-sm); filter: grayscale(1) contrast(1.06); transition: filter var(--dur-base) var(--ease-standard); } .situacao-cap { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lime-500); } .situacao-line { font-size: var(--fs-body-sm); line-height: 1.45; color: var(--text-secondary); margin-top: -6px; text-wrap: pretty; } .turn { margin-top: clamp(40px, 6vw, 72px); padding-top: clamp(28px, 4vw, 40px); border-top: 1px solid var(--border-subtle); display: grid; gap: var(--space-4); } .turn-line { font-family: var(--font-display); font-size: clamp(22px, 3.2vw, 34px); font-weight: var(--fw-bold); line-height: 1.24; letter-spacing: -0.03em; color: var(--text-secondary); max-width: 24ch; text-wrap: balance; } .turn-answer { font-family: var(--font-display); font-size: clamp(30px, 5vw, 56px); font-weight: var(--fw-extrabold); line-height: 1.02; letter-spacing: -0.035em; color: var(--text-primary); } /* -------------------------------------------------------------------------- 8. Como funciona -------------------------------------------------------------------------- */ .steps { display: grid; gap: clamp(48px, 7vw, 72px); counter-reset: none; } .step { display: grid; gap: var(--space-6); } .step-num { font-family: var(--font-mono); font-size: 13px; font-weight: var(--fw-bold); letter-spacing: 0.16em; color: var(--lime-500); } .step-title { font-family: var(--font-display); font-size: clamp(24px, 2.8vw, 30px); font-weight: var(--fw-extrabold); line-height: 1.12; letter-spacing: -0.03em; margin-block: var(--space-3) var(--space-3); } .step-copy { font-size: var(--fs-body-sm); line-height: 1.55; color: var(--text-secondary); max-width: 34ch; text-wrap: pretty; } .step-phone { display: flex; justify-content: flex-start; } /* -------------------------------------------------------------------------- 9. Análise -------------------------------------------------------------------------- */ .analise-grid { display: grid; gap: clamp(40px, 6vw, 72px); align-items: center; } .analise-phone { display: flex; justify-content: center; } .dims { display: grid; gap: var(--space-4); margin-top: clamp(28px, 4vw, 40px); padding: 0; list-style: none; } .dim { display: grid; grid-template-columns: 1fr auto; gap: 10px var(--space-4); align-items: baseline; } .dim-label { font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--text-secondary); } .dim-value { font-family: var(--font-display); font-size: 17px; font-weight: var(--fw-extrabold); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .dim-track { grid-column: 1 / -1; height: 6px; background: var(--w-08); border-radius: var(--radius-pill); overflow: hidden; } .dim-fill { display: block; height: 100%; border-radius: inherit; background: var(--score-good); transition: width var(--dur-score) var(--ease-out); } .dim-elite .dim-fill { background: var(--score-elite); } .insights { display: grid; gap: var(--space-3); margin-top: clamp(28px, 4vw, 40px); } .insight { position: relative; overflow: hidden; padding: var(--space-5); background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); } .insight::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 100% 0%, var(--lime-08) 0%, transparent 55%); pointer-events: none; } .insight-warn::before { background: radial-gradient(120% 90% at 100% 0%, var(--w-04) 0%, transparent 55%); } .insight-head { position: relative; display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); color: var(--lime-500); } .insight-warn .insight-head { color: var(--status-warning); } .insight-head .icon { width: 14px; height: 14px; } .insight-label { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--tr-label); text-transform: uppercase; } .insight-body { position: relative; font-family: var(--font-display); font-size: clamp(17px, 1.7vw, 19px); font-weight: var(--fw-bold); line-height: 1.35; letter-spacing: var(--tr-heading); text-wrap: pretty; } .reco { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-3); padding: var(--space-4) var(--space-5); background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); } .reco-index { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 auto; border-radius: var(--radius-xs); background: var(--lime-16); color: var(--lime-500); font-family: var(--font-mono); font-size: 12px; font-weight: var(--fw-bold); } .reco-text { display: grid; gap: 3px; } .reco-title { font-family: var(--font-display); font-size: var(--fs-body-sm); font-weight: var(--fw-extrabold); letter-spacing: -0.01em; } .reco-impact { margin-left: auto; flex: 0 0 auto; font-family: var(--font-display); font-size: var(--fs-body-sm); font-weight: var(--fw-extrabold); font-variant-numeric: tabular-nums; color: var(--lime-500); } /* -------------------------------------------------------------------------- 10. Inteligência -------------------------------------------------------------------------- */ .beneficios { display: grid; gap: clamp(32px, 4vw, 44px); margin-top: clamp(36px, 5vw, 56px); padding: 0; list-style: none; } .beneficio { display: grid; gap: var(--space-3); padding-top: var(--space-5); border-top: 1px solid var(--border-subtle); } .beneficio-title { font-family: var(--font-display); font-size: clamp(20px, 2.2vw, 24px); font-weight: var(--fw-extrabold); line-height: 1.2; letter-spacing: -0.028em; text-wrap: balance; } .beneficio-copy { font-size: var(--fs-body-sm); line-height: 1.55; color: var(--text-secondary); max-width: 34ch; text-wrap: pretty; } /* -------------------------------------------------------------------------- 11. Evolução -------------------------------------------------------------------------- */ .evolucao-grid { display: grid; gap: clamp(36px, 5vw, 64px); align-items: center; } .evo-panel { padding: clamp(20px, 3vw, 32px); background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); } .evo-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); } .evo-score { display: flex; align-items: flex-end; gap: var(--space-2); } .evo-num { font-family: var(--font-display); font-size: clamp(44px, 6vw, 64px); font-weight: var(--fw-extrabold); line-height: 0.86; letter-spacing: var(--tr-score); font-variant-numeric: tabular-nums; } .evo-max { font-family: var(--font-display); font-size: 18px; font-weight: var(--fw-extrabold); color: var(--text-micro); padding-bottom: 4px; } .badge-up { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding-inline: 12px; background: var(--lime-16); border: 1px solid var(--border-accent); border-radius: var(--radius-pill); color: var(--lime-500); font-size: 12px; font-weight: var(--fw-bold); white-space: nowrap; } .badge-up .icon { width: 13px; height: 13px; } .evo-chart { position: relative; height: clamp(120px, 16vw, 172px); } .evo-chart svg { width: 100%; height: 100%; display: block; overflow: visible; /* Revelação por corte lateral: a linha "se desenha" sem depender de stroke-dasharray, que se deforma com preserveAspectRatio="none". Desenhado por padrão; só recolhe quando o JS arma a animação. */ transition: clip-path 1100ms var(--ease-out); } .is-armed:not(.is-drawn) .evo-chart svg { clip-path: inset(0 100% 0 0); } .evo-line { fill: none; stroke: var(--lime-500); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .evo-dot { fill: var(--ink-900); stroke: var(--lime-500); stroke-width: 1.6; vector-effect: non-scaling-stroke; transition: opacity var(--dur-base) var(--ease-standard); } .is-armed:not(.is-drawn) .evo-dot { opacity: 0; } .evo-dot-last { fill: var(--lime-500); } .evo-axis { display: flex; justify-content: space-between; margin-top: var(--space-3); } .evo-tick { font-family: var(--font-mono); font-size: 11px; color: var(--text-micro); font-variant-numeric: tabular-nums; } .evo-tick-last { color: var(--lime-500); } .evo-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-card); margin-top: var(--space-6); padding: 0; list-style: none; } .evo-fit { position: relative; aspect-ratio: 3 / 4; border-radius: var(--radius-sm); overflow: hidden; } .evo-fit-score { position: absolute; left: 8px; bottom: 7px; font-family: var(--font-display); font-size: 15px; font-weight: var(--fw-extrabold); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .evo-fit-scrim { position: absolute; inset: 0; background: var(--scrim); } /* -------------------------------------------------------------------------- 11b. Comunidade -------------------------------------------------------------------------- */ .comunidade-grid { display: grid; gap: clamp(40px, 6vw, 72px); align-items: center; } .comunidade-phone { display: flex; justify-content: center; } .com-list { display: grid; gap: var(--space-5); margin-top: clamp(28px, 4vw, 44px); padding: 0; list-style: none; } .com-item { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: start; padding-top: var(--space-5); border-top: 1px solid var(--border-subtle); } .com-icon { width: 20px; height: 20px; margin-top: 2px; color: var(--lime-500); } .com-title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-extrabold); line-height: 1.25; letter-spacing: -0.02em; } .com-copy { margin-top: 6px; font-size: var(--fs-body-sm); line-height: 1.55; color: var(--text-secondary); max-width: 40ch; text-wrap: pretty; } /* -------------------------------------------------------------------------- 12. Experiência do app (faixa de telas) -------------------------------------------------------------------------- */ .screens { margin-top: clamp(32px, 5vw, 56px); padding-bottom: var(--space-5); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--w-12) transparent; } .screens::-webkit-scrollbar { height: 6px; } .screens::-webkit-scrollbar-thumb { background: var(--w-12); border-radius: var(--radius-pill); } .screens-track { display: flex; gap: clamp(16px, 2.4vw, 28px); width: max-content; padding-inline: var(--gutter-screen); } .screen-item { display: grid; gap: var(--space-3); scroll-snap-align: center; } .screen-cap { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-micro); } .screens-hint { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-4); color: var(--text-micro); } .screens-hint .icon { width: 14px; height: 14px; } /* -------------------------------------------------------------------------- 13. Prova social -------------------------------------------------------------------------- */ .proof-grid { display: grid; gap: clamp(36px, 5vw, 64px); align-items: start; } .proof-quote { font-family: var(--font-display); font-size: clamp(24px, 3.4vw, 40px); font-weight: var(--fw-extrabold); line-height: 1.16; letter-spacing: -0.032em; text-wrap: balance; } .proof-attr { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-6); } .proof-avatar { width: 40px; height: 40px; flex: 0 0 auto; border-radius: var(--radius-pill); border: 1px solid var(--border-strong); } .proof-name { font-size: var(--fs-body-sm); font-weight: var(--fw-bold); } .proof-handle { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--text-micro); } .proof-list { display: grid; gap: var(--space-5); padding: 0; list-style: none; } .proof-item { display: grid; gap: var(--space-3); padding-top: var(--space-5); border-top: 1px solid var(--border-subtle); } .stars { display: flex; gap: 3px; color: var(--lime-500); } .stars .icon { width: 14px; height: 14px; fill: currentColor; stroke: none; } .proof-text { font-size: var(--fs-body-sm); line-height: 1.5; color: var(--text-secondary); text-wrap: pretty; } .proof-note { margin-top: var(--space-8); padding: var(--space-4) var(--space-5); border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); } /* -------------------------------------------------------------------------- 14. CTA de download -------------------------------------------------------------------------- */ .download { position: relative; overflow: hidden; border-top: 1px solid var(--border-subtle); } .download-glow { position: absolute; inset: 0; background: radial-gradient(90% 70% at 50% 108%, var(--lime-08) 0%, transparent 60%); pointer-events: none; } .download-inner { position: relative; display: grid; gap: clamp(44px, 6vw, 72px); align-items: center; } .download-copy { display: grid; justify-items: start; } .download-phone { display: flex; justify-content: center; } /* -------------------------------------------------------------------------- 15. Rodapé -------------------------------------------------------------------------- */ .foot { border-top: 1px solid var(--border-subtle); /* espaço extra embaixo para a barra fixa não cobrir a última linha */ padding-block: clamp(40px, 5vw, 64px) calc(clamp(40px, 5vw, 64px) + 88px); } .foot-top { display: grid; gap: var(--space-8); } .foot-tag { margin-top: var(--space-3); font-family: var(--font-display); font-size: var(--fs-body-sm); font-weight: var(--fw-bold); color: var(--text-micro); letter-spacing: -0.01em; } .foot-nav { display: flex; flex-wrap: wrap; gap: 0 var(--space-6); } .foot-link { display: inline-flex; align-items: center; min-height: var(--tap-min); color: var(--text-secondary); font-size: var(--fs-body-sm); font-weight: var(--fw-medium); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard); } .foot-link:hover { color: var(--text-primary); opacity: 1; } .foot-bottom { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; margin-top: clamp(32px, 4vw, 48px); padding-top: var(--space-5); border-top: 1px solid var(--border-subtle); } /* -------------------------------------------------------------------------- 16. Barra fixa mobile -------------------------------------------------------------------------- */ .dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; padding: 12px var(--gutter-screen) calc(12px + env(safe-area-inset-bottom)); background: var(--surface-glass); -webkit-backdrop-filter: var(--blur-glass); backdrop-filter: var(--blur-glass); border-top: 1px solid var(--border-subtle); transform: translateY(110%); transition: transform var(--dur-slow) var(--ease-out); } .dock-on { transform: translateY(0); } .dock .btn { width: 100%; height: 52px; } /* -------------------------------------------------------------------------- 17. Revelação em scroll -------------------------------------------------------------------------- */ /* O estado final é o padrão. O estado inicial só existe depois que o JS "arma" o elemento — assim, sem JS a página aparece inteira e correta. */ [data-reveal] { transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } [data-reveal].is-armed:not(.is-in) { opacity: 0; transform: translateY(18px); } [data-reveal-delay="1"] { transition-delay: 70ms; } [data-reveal-delay="2"] { transition-delay: 140ms; } [data-reveal-delay="3"] { transition-delay: 210ms; } [data-reveal-delay="4"] { transition-delay: 280ms; } /* -------------------------------------------------------------------------- 18. Breakpoints -------------------------------------------------------------------------- */ @media (min-width: 600px) { .situacoes { grid-template-columns: repeat(4, 1fr); } .foot-top { grid-template-columns: 1fr auto; align-items: start; } } @media (min-width: 860px) { .nav-links { display: flex; } .nav-cta { margin-left: 0; } .steps { grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 40px); } /* Ritmo editorial: os passos não se alinham numa fileira plana. */ .step-2 { margin-top: clamp(28px, 4vw, 56px); } .step-3 { margin-top: clamp(56px, 8vw, 112px); } .analise-grid, .evolucao-grid, .comunidade-grid, .proof-grid, .download-inner { grid-template-columns: 1fr 1fr; } .analise-phone { order: 2; } .download-phone { order: 2; } .beneficios { grid-template-columns: repeat(3, 1fr); } .proof-quote { max-width: 18ch; } /* A barra fixa não existe a partir daqui — o respiro extra sai junto. */ .foot { padding-block: clamp(40px, 5vw, 64px); } } @media (min-width: 1024px) { .hero-grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); align-items: center; } /* Ancorado à direita: o aparelho central encosta na margem e os laterais recuam para dentro da coluna de texto. Assim o assunto do hero nunca é cortado — só o terceiro aparelho sangra, e só quando existe. */ .hero-phones { justify-content: flex-end; margin-right: 0; } .analise-grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr); } .evolucao-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } /* Aparelho à esquerda aqui: quebra a alternância e evita que as seções Análise, Comunidade e Download fiquem com a mesma composição. */ .comunidade-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); } .download-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); } } /* Os aparelhos de apoio só entram quando sobra largura de verdade. Abaixo disso o hero fica com um aparelho só — que é mais forte do que três espremidos. O terceiro é o único que pode ser cortado pela borda. */ @media (min-width: 1200px) { .hero-phone-side { display: block; } /* A sangria vale exatamente a largura que o terceiro aparelho pode perder. */ .hero-phones { margin-right: calc(clamp(90px, 10vw, 170px) * -1); } } @media (min-width: 1280px) { .wrap { padding-inline: clamp(32px, 4vw, 56px); } } /* -------------------------------------------------------------------------- 19. Preferências do usuário -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }