/* ========================================================================== Método Trufas de Sucesso — Página de vendas Tokens e escala tipográfica extraídos do Figma (arquivo 34ek1CCoSRrtndPt1NUpTi, frame "Desktop 1440 — Trufas de Sucesso" / node 19:2). ========================================================================== */ :root { /* Cor — obsidian */ --obsidian-900: #170309; --obsidian-800: #280814; --obsidian-700: #3b1220; /* Cor — carmine */ --carmine-100: #f7dedc; --carmine-300: #e89490; --carmine-400: #d9635f; --carmine-500: #c24441; --carmine-600: #a63a37; --carmine-700: #8c302e; /* Cor — ivory */ --ivory-50: #fcf8f7; --ivory-100: #f5edeb; --ivory-200: #eadfdc; /* Traços */ --stroke-dark: #4a1f2a; --stroke-light: #e6d9d6; /* Texto */ --text-on-dark: #fbf2f1; --text-on-dark-muted: #c4a5a8; --text-on-light: #280814; --text-on-light-muted: #6e4a50; /* Layout */ --gutter: 96px; --content-max: 1336px; --sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --serif: "Instrument Serif", Georgia, "Times New Roman", serif; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* As entradas de scroll deslocam elementos no eixo X; sem isto o deslocamento cria uma barra horizontal durante a animação. */ overflow-x: hidden; } body { margin: 0; font-family: var(--sans); background: var(--obsidian-900); color: var(--text-on-dark); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img { max-width: 100%; display: block; } p { margin: 0; } /* figure traz margem lateral de 40px por padrão no navegador */ figure { margin: 0; } /* -------------------------------------------------------------------------- Motion de scroll Só entra em ação quando o JS marca , para que a página continue legível se o script falhar. -------------------------------------------------------------------------- */ .js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } .js [data-reveal].is-visible { opacity: 1; transform: none; } /* Variantes de entrada */ .js [data-reveal="left"] { transform: translateX(-32px); } .js [data-reveal="right"] { transform: translateX(32px); } .js [data-reveal="zoom"] { transform: scale(0.955) translateY(20px); } .js [data-reveal="left"].is-visible, .js [data-reveal="right"].is-visible, .js [data-reveal="zoom"].is-visible { transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js [data-reveal], .js [data-reveal="left"], .js [data-reveal="right"], .js [data-reveal="zoom"] { opacity: 1; transform: none; transition: none; } } /* -------------------------------------------------------------------------- Estruturas de seção -------------------------------------------------------------------------- */ .section { padding: 108px var(--gutter); } .section--dark { background: var(--obsidian-900); } .section--ivory-50 { background: var(--ivory-50); color: var(--text-on-light); } .section--ivory-100 { background: var(--ivory-100); color: var(--text-on-light); } .section--carmine { background: var(--carmine-500); } .wrap { max-width: var(--content-max); margin-inline: auto; width: 100%; } .stack { display: flex; flex-direction: column; } .center { align-items: center; text-align: center; } /* -------------------------------------------------------------------------- Tipografia -------------------------------------------------------------------------- */ /* Eyebrow — 12/1.2 SemiBold, tracking 14% */ .eyebrow { font-size: 12px; font-weight: 600; line-height: 1.2; letter-spacing: 0.14em; text-transform: uppercase; margin: 0; } .eyebrow--carmine-600 { color: var(--carmine-600); } .eyebrow--carmine-400 { color: var(--carmine-400); } .eyebrow--carmine-300 { color: var(--carmine-300); } .eyebrow--carmine-100 { color: var(--carmine-100); } /* Display/L — 46/1.1 SemiBold, tracking -2.5% */ .display-l { font-size: 46px; font-weight: 600; line-height: 1.1; letter-spacing: -0.025em; margin: 0; } /* Display/M — 36/1.15 SemiBold, tracking -2% */ .display-m { font-size: 36px; font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; margin: 0; } /* Display/S — 24/1.3 SemiBold, tracking -1% */ .display-s { font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; margin: 0; } /* Destaque serifado itálico — sobe ~4px em relação ao display que acompanha */ .accent { font-family: var(--serif); font-style: italic; font-weight: 400; } .display-l .accent { font-size: 50px; letter-spacing: -0.025em; } .display-m .accent { font-size: 40px; letter-spacing: -0.02em; } .display-s .accent { font-size: 26px; letter-spacing: -0.01em; } .body-l { font-size: 18px; line-height: 1.6; } .body-m { font-size: 16px; line-height: 1.6; } .body-s { font-size: 13px; line-height: 1.5; } /* Quebras de linha `balance` distribui os títulos em linhas de largura parecida, em vez de deixar uma palavra sozinha na última. `pretty` faz o mesmo trabalho nos parágrafos, só para as últimas linhas. Navegadores sem suporte apenas quebram como antes. */ .display-l, .display-m, .display-s, .hero__title, .learn-card__title, .doubt__text, .eyebrow { text-wrap: balance; } .body-l, .body-m, .body-s, .learn-card__text, .promise__lead { text-wrap: pretty; } /* Textos curtos e centralizados: equilibrar todas as linhas rende mais que só cuidar da última. */ .lede, .hero__sub, .wrap.center > .body-l, .wrap.center > .body-m, .testimonials__note, .footer__disclaimer { text-wrap: balance; } .lede { max-width: 528px; } .muted-dark { color: var(--text-on-dark-muted); } .muted-light { color: var(--text-on-light-muted); } .on-dark { color: var(--text-on-dark); } .on-light { color: var(--text-on-light); } .strong { font-weight: 600; } /* -------------------------------------------------------------------------- Botão / CTA -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 12px; padding: 24px 44px; border-radius: 100px; background: var(--carmine-500); color: var(--text-on-dark); font-family: var(--sans); font-size: 17px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; border: 0; cursor: pointer; box-shadow: 0 14px 36px -6px rgba(194, 69, 64, 0.45); transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease; } .btn:hover { background: var(--carmine-400); transform: translateY(-2px); box-shadow: 0 18px 44px -6px rgba(194, 69, 64, 0.55); } .btn:active { transform: translateY(0); } .btn:focus-visible { outline: 3px solid var(--carmine-300); outline-offset: 3px; } .btn__arrow { display: inline-block; transition: transform 0.18s ease; } .btn:hover .btn__arrow { transform: translateX(4px); } .btn--lg { padding: 26px 52px; box-shadow: 0 16px 44px -8px rgba(194, 69, 64, 0.5); } .btn--dark { background: var(--obsidian-900); box-shadow: none; } .btn--dark .btn__arrow { color: var(--carmine-300); } .btn--dark:hover { background: var(--obsidian-800); box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.5); } @media (prefers-reduced-motion: reduce) { .btn, .btn__arrow { transition: none; } .btn:hover { transform: none; } } /* -------------------------------------------------------------------------- Chips e bullets -------------------------------------------------------------------------- */ .chip { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 22px 13px 18px; border-radius: 100px; background: var(--obsidian-700); border: 1px solid var(--stroke-dark); font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--text-on-dark); } .chip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--carmine-400); flex-shrink: 0; } .chip--solid { background: var(--obsidian-900); border: 0; padding: 11px 20px; font-size: 13px; font-weight: 400; line-height: 1.5; } .chip--sm { padding: 10px 18px 10px 16px; gap: 8px; font-size: 13px; font-weight: 400; line-height: 1.5; color: var(--text-on-dark-muted); } .chip--sm .chip__dot { width: 7px; height: 7px; } .bullet { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-radius: 100px; background: var(--carmine-600); font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--text-on-dark); } .bullet .chip__dot { background: var(--carmine-100); } /* -------------------------------------------------------------------------- Mídia — molduras de foto -------------------------------------------------------------------------- */ .shot { overflow: hidden; background: var(--obsidian-800); position: relative; } /* As fotos já saem recortadas em 4:5 centradas no doce (ver README). --op permite reenquadrar uma foto pontualmente, se necessário. */ .shot img { width: 100%; height: 100%; object-fit: cover; object-position: center var(--op, 50%); transition: transform 0.9s var(--ease-out); } .shot--zoom:hover img { transform: scale(1.045); } @media (prefers-reduced-motion: reduce) { .shot img { transition: none; } .shot--zoom:hover img { transform: none; } } /* -------------------------------------------------------------------------- 01 — Hero -------------------------------------------------------------------------- */ .hero { background: var(--obsidian-900); } /* O padding fica na faixa e a medida no .wrap interno — mesma estrutura das demais seções, para o hero parar de esticar em telas ultralargas. */ .hero__row { padding: 96px var(--gutter) 72px; } .hero__inner { display: flex; align-items: center; gap: 72px; } .hero__content { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 28px; } .hero__title { font-size: 51px; font-weight: 500; line-height: 1.11; letter-spacing: -0.01em; max-width: 15ch; } .hero__sub { font-size: 21px; line-height: 1.6; color: var(--text-on-dark-muted); max-width: 46ch; } .hero__media { width: 440px; aspect-ratio: 4 / 5; flex-shrink: 0; border-radius: 36px; } .hero__chips { padding: 0 var(--gutter) 48px; } .hero__chips-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } /* -------------------------------------------------------------------------- 02 — Mosaico de produtos -------------------------------------------------------------------------- */ .showcase { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; width: 100%; } .showcase__item { aspect-ratio: 4 / 5; border-radius: 26px; background: var(--ivory-100); } /* -------------------------------------------------------------------------- 03 — A promessa -------------------------------------------------------------------------- */ .promise { padding: 112px var(--gutter); } .promise__inner { max-width: 920px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; } .promise__lead { max-width: 728px; color: var(--carmine-100); line-height: 1.5; } .product-card { display: flex; gap: 40px; align-items: center; justify-content: center; width: 100%; padding: 48px 52px; border-radius: 36px; background: var(--ivory-50); text-align: left; } .product-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; flex: 1 1 0; min-width: 0; } .product-card__body .eyebrow { color: var(--carmine-500); } .product-card__title { color: var(--text-on-light); } .product-card__title .accent { color: var(--carmine-500); } .product-card__text { color: var(--text-on-light-muted); } .product-card__text .strong { color: var(--carmine-500); } .product-card__media { width: 352px; height: 339px; flex-shrink: 0; border-radius: 20px; } /* -------------------------------------------------------------------------- 04 — Não é só receitas -------------------------------------------------------------------------- */ .split { display: flex; align-items: center; gap: 72px; width: 100%; } .split__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; } .doubts-card { width: 560px; flex-shrink: 0; padding: 16px 36px; border-radius: 32px; background: var(--obsidian-700); border: 1px solid var(--stroke-dark); display: flex; flex-direction: column; justify-content: center; } .doubts-card > .eyebrow { padding-bottom: 4px; } .doubt { display: flex; align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--stroke-dark); } .doubt:last-child { border-bottom: 0; } .doubt__num { font-family: var(--serif); font-style: italic; font-size: 26px; line-height: 1.15; color: var(--carmine-400); flex-shrink: 0; } .doubt__text { flex: 1 1 0; min-width: 0; font-size: 19px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; } /* -------------------------------------------------------------------------- 05 — Na prática (player de vídeo) -------------------------------------------------------------------------- */ .practice__row { display: flex; align-items: center; justify-content: center; gap: 64px; width: 100%; } .practice__text { flex: 1 1 0; min-width: 0; max-width: 560px; display: flex; flex-direction: column; gap: 18px; } /* O vídeo foi gravado em 9:16; o player assume a mesma proporção para exibi-lo cheio, sem tarjas laterais. */ .player { flex: 0 0 340px; aspect-ratio: 9 / 16; border-radius: 32px; overflow: hidden; position: relative; background: var(--obsidian-800); display: flex; align-items: center; justify-content: center; } .player video { height: 100%; width: 100%; object-fit: cover; display: block; background: var(--obsidian-900); } .player__poster { position: absolute; inset: 0; border: 0; padding: 0; cursor: pointer; background: var(--obsidian-800); display: flex; align-items: center; justify-content: center; } /* Só a imagem de fundo preenche o poster — o ícone de play tem tamanho próprio. */ .player__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center var(--op, 50%); filter: brightness(0.66); } .player__play { position: relative; width: 96px; height: 96px; transition: transform 0.25s var(--ease-out); filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.45)); } .player__poster:hover .player__play { transform: scale(1.09); } .player__poster:focus-visible { outline: 3px solid var(--carmine-300); outline-offset: -6px; } .player[data-playing="true"] .player__poster { display: none; } /* Enquanto o vídeo é baixado, o play vira um anel girando */ .player[data-loading] .player__poster { cursor: progress; } .player[data-loading] .player__play { opacity: 0; } .player[data-loading] .player__poster::after { content: ""; position: absolute; width: 54px; height: 54px; border-radius: 50%; border: 3px solid rgba(251, 242, 241, 0.28); border-top-color: var(--carmine-300); animation: player-spin 0.8s linear infinite; } @keyframes player-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .player[data-loading] .player__poster::after { animation-duration: 2.4s; } } @media (prefers-reduced-motion: reduce) { .player__play { transition: none; } .player__poster:hover .player__play { transform: none; } } /* -------------------------------------------------------------------------- 06 — O que você vai aprender -------------------------------------------------------------------------- */ .learn-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; width: 100%; } .learn-card { display: flex; flex-direction: column; gap: 18px; padding: 28px 28px 34px; border-radius: 32px; background: var(--ivory-100); border: 1px solid var(--stroke-dark); } .learn-card__media { height: 190px; border-radius: 22px; flex-shrink: 0; } .learn-card__title { font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--carmine-500); margin: 0 0 8px; } /* Nota: no Figma este parágrafo usa text/on-dark-muted (#c4a5a8) sobre um card claro (#f5edeb) — contraste ~1.9:1, ilegível. Trocado pelo token de tema claro correspondente (text/on-light-muted). */ .learn-card__text { color: var(--text-on-light-muted); } .pricing-card { width: 100%; padding: 52px; border-radius: 36px; background: var(--carmine-500); display: flex; flex-direction: column; gap: 20px; text-align: left; } .pricing-card__bullets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; width: 100%; } .pricing-card__col { display: flex; flex-direction: column; gap: 12px; } /* -------------------------------------------------------------------------- 07 — O método -------------------------------------------------------------------------- */ .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; width: 100%; } .step { display: flex; flex-direction: column; gap: 10px; padding: 34px 30px; border-radius: 28px; background: var(--ivory-100); border: 1px solid var(--stroke-light); text-align: left; } .step__icon { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; flex-shrink: 0; border-radius: 17px; background: rgba(194, 69, 64, 0.1); color: var(--carmine-500); margin-bottom: 4px; } .step__icon svg { width: 27px; height: 27px; display: block; } /* -------------------------------------------------------------------------- 08 — Depoimentos (prints reais, em mosaico) -------------------------------------------------------------------------- */ .testimonials { width: 100%; columns: 3; column-gap: 20px; } .shot-card { break-inside: avoid; margin: 0 0 20px; padding: 0; border: 1px solid var(--stroke-dark); border-radius: 20px; overflow: hidden; background: var(--obsidian-700); display: block; width: 100%; cursor: zoom-in; transition: transform 0.3s var(--ease-out), border-color 0.3s ease; } .shot-card img { width: 100%; height: auto; display: block; } .shot-card:hover { transform: translateY(-4px); border-color: var(--carmine-600); } .shot-card:focus-visible { outline: 3px solid var(--carmine-300); outline-offset: 3px; } .testimonials__note { font-size: 13px; line-height: 1.5; color: var(--text-on-dark-muted); } @media (prefers-reduced-motion: reduce) { .shot-card { transition: none; } .shot-card:hover { transform: none; } } /* Lightbox */ .lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(10, 2, 5, 0.92); display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s; } .lightbox[data-open="true"] { opacity: 1; visibility: visible; } .lightbox img { max-width: min(760px, 100%); max-height: 92vh; width: auto; height: auto; border-radius: 16px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8); } .lightbox__close { position: absolute; top: 20px; right: 20px; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--stroke-dark); background: var(--obsidian-800); color: var(--text-on-dark); font-size: 22px; line-height: 1; cursor: pointer; } .lightbox__close:hover { background: var(--carmine-600); } .lightbox__close:focus-visible { outline: 3px solid var(--carmine-300); outline-offset: 2px; } /* -------------------------------------------------------------------------- 09 — Para quem é -------------------------------------------------------------------------- */ .audience__media { width: 520px; height: 520px; flex-shrink: 0; border-radius: 36px; } .audience__chips { display: flex; flex-wrap: wrap; gap: 10px; } /* -------------------------------------------------------------------------- 10 — Garantia -------------------------------------------------------------------------- */ .guarantee-section { background: var(--obsidian-900); padding: 32px var(--gutter); } .guarantee { max-width: 1071px; margin-inline: auto; min-height: 412px; padding: 64px 96px; border-radius: 89px; background: var(--carmine-500); display: flex; align-items: center; justify-content: center; } .guarantee__row { display: flex; align-items: center; gap: 72px; width: 100%; } .guarantee__seal { width: 315px; height: 315px; flex-shrink: 0; } .guarantee__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; } .guarantee__body { max-width: 533px; } /* -------------------------------------------------------------------------- 11 — CTA final -------------------------------------------------------------------------- */ .final-cta { padding: 128px var(--gutter); } .final-cta__inner { max-width: 900px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: 26px; text-align: center; } .final-cta__seals { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } /* -------------------------------------------------------------------------- 12 — Rodapé -------------------------------------------------------------------------- */ .footer { background: var(--obsidian-900); border-top: 1px solid var(--stroke-dark); padding: 44px var(--gutter) 48px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; } .footer__disclaimer { max-width: 476px; color: var(--text-on-dark-muted); } /* -------------------------------------------------------------------------- Responsivo -------------------------------------------------------------------------- */ @media (max-width: 1280px) { :root { --gutter: 56px; } .hero__media { width: 38%; max-width: 440px; } .hero__inner { gap: 48px; } .doubts-card { width: 46%; } .audience__media { width: 44%; height: auto; aspect-ratio: 1; } .split { gap: 48px; } .guarantee { padding: 56px 64px; border-radius: 64px; } .guarantee__row { gap: 48px; } .guarantee__seal { width: 240px; height: 240px; } .learn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .showcase { grid-template-columns: repeat(3, minmax(0, 1fr)); } .player { flex-basis: 300px; } } @media (max-width: 960px) { :root { --gutter: 32px; } .section { padding: 80px var(--gutter); } .promise, .final-cta { padding: 80px var(--gutter); } .display-l { font-size: 34px; } .display-l .accent { font-size: 37px; } .display-m { font-size: 28px; } .display-m .accent { font-size: 31px; } .display-s { font-size: 21px; } .display-s .accent { font-size: 23px; } .body-l { font-size: 17px; } .hero__row { padding: 72px var(--gutter) 32px; } .hero__inner { flex-direction: column; align-items: stretch; gap: 32px; } .hero__content { gap: 22px; } .hero__title { font-size: 34px; max-width: none; } .hero__sub { font-size: 18px; max-width: none; } .hero__media { width: 100%; max-width: 420px; align-self: center; border-radius: 32px; } .hero__chips { padding: 0 var(--gutter) 40px; } .hero__chips-row { justify-content: flex-start; } .product-card { flex-direction: column; align-items: stretch; padding: 32px; gap: 24px; } .product-card__media { width: 100%; height: 280px; } .split { flex-direction: column; align-items: stretch; gap: 32px; } .doubts-card { width: auto; padding: 8px 24px; } .doubt__text { font-size: 17px; } .practice__row { flex-direction: column-reverse; align-items: stretch; gap: 28px; } .player { flex: 0 0 auto; width: min(340px, 100%); align-self: center; } .pricing-card { padding: 32px; border-radius: 28px; } .pricing-card__bullets { grid-template-columns: minmax(0, 1fr); gap: 12px; } .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .testimonials { columns: 2; column-gap: 16px; } .shot-card { margin-bottom: 16px; } .audience__media { width: auto; } .guarantee-section { padding: 24px var(--gutter); } .guarantee { padding: 40px 32px; border-radius: 40px; min-height: 0; } .guarantee__row { flex-direction: column; text-align: center; gap: 28px; } .guarantee__text { align-items: center; } .guarantee__body { max-width: none; } /* Mosaico vira carrossel com snap — melhor uso do espaço no toque */ .showcase { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* sangra até as bordas da tela */ margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); padding-bottom: 4px; } .showcase::-webkit-scrollbar { display: none; } .showcase__item { flex: 0 0 62%; scroll-snap-align: center; aspect-ratio: 4 / 5; border-radius: 22px; } } @media (max-width: 600px) { /* 24px dá um respiro lateral confortável sem estreitar demais a linha */ :root { --gutter: 24px; } .section { padding: 64px var(--gutter); } .promise, .final-cta { padding: 64px var(--gutter); } /* Um passo abaixo no display: as manchetes fecham em menos linhas, com menos sobra na última. */ .display-l { font-size: 26px; } .display-l .accent { font-size: 29px; } .display-m { font-size: 23px; } .display-m .accent { font-size: 26px; } .display-s { font-size: 19px; } .display-s .accent { font-size: 21px; } .hero__title { font-size: 28px; line-height: 1.15; } .hero__sub { font-size: 16px; } .body-l { font-size: 16px; } .body-m { font-size: 15px; } /* Blocos de texto centralizados ficam melhor com a linha um pouco mais curta que a largura total da tela. */ .promise__inner > .body-l, .promise__inner > .display-l, .final-cta__inner > .display-l, .final-cta__inner > .display-s, .wrap.center > .body-l, .wrap.center > .body-m, .lede, .footer__disclaimer { max-width: 36ch; margin-inline: auto; } .btn, .btn--lg { padding: 20px 28px; font-size: 16px; width: 100%; justify-content: center; } .hero__row { padding: 56px var(--gutter) 28px; } .hero__media { max-width: 100%; border-radius: 24px; } .showcase__item { flex-basis: 72%; } .learn-grid { grid-template-columns: minmax(0, 1fr); } .learn-card { padding: 22px 22px 26px; border-radius: 24px; } .learn-card__media { height: 210px; } .steps { grid-template-columns: minmax(0, 1fr); } .step { padding: 26px 24px; } .step__icon { width: 46px; height: 46px; border-radius: 14px; } .step__icon svg { width: 24px; height: 24px; } .player { width: 100%; border-radius: 24px; } .player__play { width: 66px; height: 66px; } .product-card { padding: 24px; border-radius: 28px; } .product-card__media { height: 240px; } .chip { font-size: 14px; padding: 11px 18px 11px 14px; } /* Um print por vez: no telefone o texto do print precisa de largura */ .testimonials { columns: 1; } .shot-card { border-radius: 16px; } .lightbox { padding: 12px; } .lightbox__close { top: 12px; right: 12px; } }