/* ============================================================================
SD Digital: Landing Pages de Marketplace
---------------------------------------------------------------------------
Camada de componentes que roda POR CIMA do CSS compilado do Webflow
(saiddiazdigital.webflow.shared.*.min.css). Todos os componentes aqui são
réplicas ou variações dos que existem em /case/topfit:
TOPFIT -> LP de marketplace
.navigation-01 -> .lp-nav (réplica + CTA fixo)
.section-regular-3 (header) -> .lp-hero (réplica)
.header-image-grid/.header-image-> .lp-shots/.lp-shot (réplica)
.carousel / .roller-text -> .lp-ticker (réplica, CSS puro)
.divider-caption + .dot-orange -> reuso direto
.gallery-card / .gallery-badge -> .lp-card/.lp-badge (variação)
.team-about-card -> .lp-service (variação)
.team-badge -> .lp-tag (variação)
.logo-section (bloco vermelho) -> .lp-band (variação, cor do mk)
.process-card -> .lp-step (variação)
.contact-sec / .form-right -> reuso direto + .lp-form
.footer / .whatsapp-block -> reuso direto
A cor de destaque vem do CMS (marketplace.accent) e é injetada em
`--mk` no , então o mesmo CSS serve Shopee, Mercado Livre, Amazon...
========================================================================= */
:root {
--mk: #ee4d2d; /* sobrescrito por página (CMS) */
--mk-soft: #fff1ec; /* sobrescrito por página (CMS) */
--mk-ink: #1e2022;
--lp-bg: #f3f3f5;
--lp-surface: #ffffff;
--lp-line: #e4e5e9;
--lp-muted: #6b7280;
--lp-radius: 16px;
/* easing padrão do site (o Webflow usa este em toda transição da home) */
--lp-ease: cubic-bezier(.215, .61, .355, 1);
/* corpo de texto da home: peso 300 + 0.5px de tracking. É o traço que mais
dá "cara de SD" fora dos títulos. */
--lp-body-weight: 300;
--lp-body-tracking: .5px;
--lp-shadow: 0 46px 13px #6c718000, 0 29px 12px #6c718003,
0 17px 10px #6c71800a, 0 7px 7px #6c718012, 0 2px 4px #6c718014;
/* mesmas 5 camadas de --lp-shadow, só que 100% transparentes: usada como
estado de repouso em elementos que animam a sombra no hover. Sem isso,
o box-shadow pula de "none" (0 camadas) pro valor final (5 camadas) sem
transição suave, porque a interpolação exige o mesmo número de camadas
dos dois lados. */
--lp-shadow-flat: 0 46px 13px #6c718000, 0 29px 12px #6c718000,
0 17px 10px #6c718000, 0 7px 7px #6c718000, 0 2px 4px #6c718000;
/* idem: 5 camadas, alpha maior, pro hover dos cards do hero interpolar. */
--lp-shadow-hover: 0 46px 13px #6c718005, 0 29px 12px #6c71800a,
0 17px 10px #6c718017, 0 7px 7px #6c718021, 0 2px 4px #6c718026;
}
/* ---------------------------------------------------------------- base ---- */
/* rolagem suave nos links de âncora do menu, com folga pro nav sticky não
tampar o topo da seção de destino. Este CSS só carrega nas LPs, então dá
pra mexer direto no html sem vazar pro resto do site. */
html { scroll-behavior: smooth; }
#servicos, #entregaveis, #resultados, #faq, #form { scroll-margin-top: 96px; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
.lp-body { background-color: var(--lp-bg); }
.lp-body * { box-sizing: border-box; }
/* Quebras de linha:
`balance` distribui as linhas de um título de forma equilibrada (evita a
última linha com uma ou duas palavras soltas);
`pretty` faz o mesmo para blocos de texto corrido, priorizando não deixar
órfã a última linha.
Onde o navegador não suportar, a quebra continua sendo a padrão — é uma
melhoria progressiva, não uma dependência. */
.lp-hero h1,
.lp-head h2,
.lp-band h2,
.lp-service-name,
.lp-case-result,
.lp-split-title,
.lp-faq-q { text-wrap: balance; }
.lp-hero-sub,
.lp-head p,
.lp-service-desc,
.lp-case p,
.lp-step p,
.lp-kpi-label,
.lp-body .paragraph { text-wrap: pretty; }
/* A home roda .paragraph-16 em weight 300 com 0.5px de tracking; as LPs
estavam em 400/normal, o que deixava o texto mais "pesado" que o do site.
Aplica-se ao corpo, não a títulos/botões/rótulos, que têm peso próprio. */
.lp-body p,
.lp-hero-sub,
.lp-service-desc,
.lp-case p,
.lp-step p,
.lp-faq-a p {
font-weight: var(--lp-body-weight);
letter-spacing: var(--lp-body-tracking);
}
.lp-section {
background-color: var(--lp-bg);
padding: 96px 5%;
position: relative;
overflow: hidden;
}
.lp-section.is-tight { padding-top: 64px; padding-bottom: 64px; }
.lp-section.is-white { background-color: #fff; }
/* mesma largura de container da home (.container do Webflow = 1236px), pra
as duas páginas alinharem a coluna de conteúdo quando abertas em sequência */
.lp-wide { width: 100%; max-width: 1236px; margin: 0 auto; }
.lp-mid { width: 100%; max-width: 840px; margin: 0 auto; }
/* Mesma medida e centralização do .lp-mid (840px), mantendo o texto alinhado
à esquerda. Antes o bloco de título ficava colado na borda esquerda do
.lp-wide (1236px) enquanto o conteúdo abaixo ocupava a largura toda — o
título parecia descolado da seção. Centralizado, ele fica sobre o eixo do
conteúdo; a grade de cards embaixo continua na largura cheia. */
.lp-head {
width: 100%;
max-width: 840px;
margin-left: auto;
margin-right: auto;
margin-bottom: 56px;
}
.lp-head.is-center { margin-left: auto; margin-right: auto; text-align: center; }
.lp-head.is-center .divider-caption { justify-content: center; }
.lp-head .divider-caption { margin-bottom: 16px; }
/* Quando a legenda vem dentro da régua (.divider-wrapper), quem carrega o
espaçamento é o wrapper — senão a margem da legenda desalinharia a linha
dentro da própria fileira flex. */
.lp-head .divider-wrapper { margin-bottom: 16px; }
.lp-head .divider-wrapper .divider-caption { flex: none; margin-bottom: 0; }
/* o gap de 64px do Webflow é grande demais para o vão legenda→régua aqui */
.lp-head .divider-wrapper { gap: 24px; }
/* .caption-small vem do CSS compilado do Webflow (também usado no
/case/topfit), então o all-caps fica só nas LPs via .lp-body, sem mexer
no visual daquela página. */
.lp-body .caption-small { text-transform: uppercase; letter-spacing: .04em; }
.lp-head h2 {
color: var(--mk-ink);
letter-spacing: -.2px;
margin: 0 0 16px;
font-size: 40px;
font-weight: 500;
line-height: 1.15;
}
.lp-head p {
color: var(--lp-muted);
margin: 0;
font-size: 18px;
line-height: 1.6;
}
.lp-head .lp-em { color: var(--mk); }
.lp-em { color: var(--mk); }
.lp-strong { font-weight: 700; }
/* ----------------------------------------------------- header (home) ----
O header destas páginas usa a MESMA marcação da home (.nav.w-nav): logo +
hambúrguer que abre um dropdown com os links. O CSS base das classes .nav*
/ .w-nav* vem do bundle compilado do Webflow que estas páginas já
carregam, e o ícone hambúrguer↔X e o fundo escuro vêm do site-overrides.css.
Aqui ficam só as diferenças da LP:
- o runtime do Webflow (jQuery/IX2) não roda aqui, então o dropdown é
revelado por uma classe .is-menu-open (alternada em lp-marketplace.js)
em vez do JS do w-nav;
- a logo é estática (a home anima um Lottie);
- a barra é transparente no topo e vira sólida ao rolar, como na home —
mas aqui o topo é claro (o hero é um cartão branco sobre cinza), então
a tinta do header também inverte: escura em cima, branca depois. */
.lp-body .nav.w-nav {
position: sticky;
color: var(--mk-ink);
background-color: #0000 !important;
}
.lp-body .nav.w-nav.nav--scrolled {
color: #fff;
background-color: var(--black) !important;
box-shadow: 0 10px 30px #0003;
}
/* hambúrguer sempre visível (a home é data-collapse="all"); a cor vem do
header, menos com o menu aberto — aí o botão ganha fundo escuro. */
.lp-body .nav .menu-button.w-nav-button { display: block; color: inherit; }
.lp-body .nav .menu-button.w--open { color: #fff; }
/* Logo: uma peça só, pintada com `currentColor` via mask — o mesmo truque do
ícone do menu em site-overrides.css. Assim ela acompanha o estado da barra
sem trocar de arquivo: os dois SVGs da marca (branco e #1E1E1E) têm viewBox
diferente (216x36 e 240x41), então alternar entre eles faria a largura
pular na hora da troca. */
/* `color: inherit` porque .w-nav-brand traz um #333 do bundle do Webflow, e é
dele que a máscara da logo tira o currentColor */
.lp-body .nav .logo.w-nav-brand {
width: auto;
height: auto;
overflow: visible;
color: inherit;
}
.lp-body .nav .lp-nav-logo {
display: block;
height: 26px;
aspect-ratio: 216 / 36;
background-color: currentColor;
-webkit-mask: url("../images/6431ae9e637d396272c8fb34_Group-1.svg") center / contain no-repeat;
mask: url("../images/6431ae9e637d396272c8fb34_Group-1.svg") center / contain no-repeat;
}
@media (min-width: 768px) {
.lp-body .nav .lp-nav-logo { height: 30px; }
}
/* Dropdown: o runtime do w-nav não roda aqui, então o painel é revelado pela
classe .is-menu-open e posicionado à mão.
O `.container.rel_2` vira estático de propósito: era ele (position:relative)
que servia de bloco de contenção do painel absoluto, e como ele é 24px mais
baixo que a barra, o `top:100%` caía DENTRO do header. Sem ele, quem ancora
é o próprio .nav (sticky também cria bloco de contenção), e aí 100% é a
altura real da barra.
O recuo lateral também precisa ser só um: o site-overrides.css já põe
margin-left/right de 16px no .nav-menu, que somava ao `inset` daqui e
deixava o painel 16px aquém da borda do botão. Aqui a margem é zerada e o
`inset` manda sozinho, alinhando o painel com o hambúrguer. */
.lp-body .nav .container.rel_2 { position: static; }
.lp-body .nav .nav-menu.w-nav-menu { display: none; }
.lp-body .nav.is-menu-open .nav-menu.w-nav-menu {
display: block;
position: absolute;
inset: 100% 16px auto 16px;
margin: 8px 0 0; /* respiro entre a barra e o painel */
padding: 0; /* o 16px 6px do Webflow desalinhava o conteúdo */
background-color: #1e1e1e;
border-radius: var(--sd-radius, 12px);
box-shadow: 0 18px 40px #00000038;
overflow: hidden;
}
.lp-body .nav.is-menu-open .nav-menu .container,
.lp-body .nav.is-menu-open .nav-menu .page-padding,
.lp-body .nav.is-menu-open .nav-menu .menu {
max-width: none;
width: auto;
margin: 0;
padding: 0;
display: block;
}
.lp-body .nav.is-menu-open .links-wrapper {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 2px;
background: none;
padding: 10px;
}
/* alvo de toque confortável: os 8px de padding do Webflow davam 36px de
altura, abaixo dos 44px recomendados */
.lp-body .nav.is-menu-open .nav-link,
.lp-body .nav.is-menu-open .nav-link_2 {
display: flex;
align-items: center;
justify-content: flex-end;
width: 100%;
min-height: 44px;
text-align: right;
padding: 8px 12px;
margin: 0;
}
/* "Contato" herda do Webflow um border-bottom que, com o item esticado, virava
uma régua branca de ponta a ponta. Encolhido ao conteúdo, o traço volta a
ser o sublinhado do rótulo — que é o que ele é na home. */
.lp-body .nav.is-menu-open .nav-link_2 {
width: auto;
align-self: flex-end;
}
/* "voltar para a home": sai da página, então fica separado dos âncoras da LP */
.lp-body .nav.is-menu-open .lp-nav-home {
gap: 8px;
border-top: 1px solid #ffffff24;
margin-top: 8px;
padding-top: 14px;
color: #ffffffb3;
font-size: 12px;
letter-spacing: .06em;
}
.lp-body .nav.is-menu-open .lp-nav-home:hover { color: #fff; }
.lp-body .nav.is-menu-open .lp-nav-home svg { flex: none; width: 14px; height: 14px; }
/* Desktop: painel compacto encostado à direita, como na home. O recuo não é
mais 16px lisos porque o botão não está na borda da barra — ele fica dentro
do .container (max-width 1236px, centrado) e do padding de 16px dele. O
`calc` soma essa sobra do container para o painel parar exatamente embaixo
do hambúrguer; o `max()` segura em 16px quando a janela é menor que o
container e essa sobra deixa de existir. */
@media (min-width: 992px) {
.lp-body .nav.is-menu-open .nav-menu.w-nav-menu {
left: auto;
width: max-content;
right: max(16px, calc(16px + (100% - 1236px) / 2));
}
.lp-body .nav.is-menu-open .links-wrapper { align-items: flex-end; }
.lp-body .nav.is-menu-open .nav-link,
.lp-body .nav.is-menu-open .nav-link_2 { width: auto; min-width: 168px; }
}
/* par de rótulos de CTA (ver ctaLabel() em cms/components.mjs): o curto só
aparece no breakpoint de celular, onde o longo estoura a largura do botão */
.lp-cta-short { display: none; }
/* ------------------------------------------------------------- hero -----
Layout do Beam Header 01 (flowbase.co/preview/beam-header-01): a página é
cinza e o hero inteiro é um cartão BRANCO arredondado com uma folga fina
nas bordas; dentro dele, a coluna de texto centrada e, embaixo, um segundo
cartão CINZA (mais arredondado) com a prova social — legenda curta + a
marquee de logos de clientes.
Os três painéis do hero (.lp-shots) saíram daqui: viraram parte de
#resultados, junto dos outros painéis de conta. */
.lp-hero {
background-color: var(--lp-bg);
padding: 8px 8px 0;
position: relative;
overflow: hidden;
}
.lp-hero-main {
background-color: var(--lp-surface);
border-radius: 24px;
width: 100%;
max-width: 1424px;
margin: 0 auto;
padding: 48px 5% 24px;
}
.lp-hero-inner {
width: 100%;
max-width: 760px;
margin: 0 auto 48px;
text-align: center;
}
/* cartão cinza interno: legenda + marquee de logos (o .hero_card do Beam) */
.lp-hero-card {
background-color: var(--lp-bg);
border-radius: 32px;
width: 100%;
max-width: 1088px;
margin: 0 auto;
padding: 40px 0;
overflow: hidden;
}
.lp-hero-card-title {
color: var(--lp-muted);
text-align: center;
margin: 0 0 24px;
padding: 0 24px;
font-size: 14px;
line-height: 21px;
}
/* No Beam a marquee de logos ocupa a faixa de cima do cartão (padding 40px 0)
e o print entra logo abaixo, embutido nos 8px que sobram das outras três
bordas. Como o print encosta no rodapé do cartão, o padding de baixo dele
sai — quem dá a folga é .lp-hero-dash. */
.lp-hero-card { padding-bottom: 0; }
.lp-hero-logos { padding-bottom: 40px; }
/* .hero_dashboard: 8px de folga em relação às bordas do cartão cinza */
.lp-hero-dash { padding: 0 8px 8px; }
/* .hero_image-wrapper: canto arredondado + sombra em camadas (o fade branco
que o Beam põe por cima do print fica de fora, de propósito).
O print do Seller Centre tem fundo cinza-claro, quase o mesmo do cartão que
o abriga — com a sombra suave do Beam (que lá funciona porque o print dele
é branco) as duas superfícies se fundiam e o bloco perdia o contorno. Aqui
a separação vem de três coisas: uma moldura branca fina, um fio de contorno
e uma sombra bem mais encorpada. */
.lp-hero-shot {
border: 5px solid #fff;
border-radius: 24px;
overflow: hidden;
box-shadow:
0 0 0 1px #1a19251f,
0 2px 4px #1a19250f,
0 12px 20px -8px #1a192524,
0 34px 52px -22px #1a192540;
}
/* ------------------------------------------- antes x depois (cortina) ----
Duas imagens do MESMO painel empilhadas; a de cima ("depois") é recortada
por clip-path a partir da posição da cortina, então as duas continuam com
a largura cheia do container e nada distorce.
O controle é um esticado por cima: arrasto, toque e
teclado saem de graça, e o leitor de tela anuncia um controle de verdade.
O que se vê (linha + alça) é desenhado à parte, com aria-hidden. */
.lp-compare {
--lp-compare: 50%;
position: relative;
isolation: isolate;
touch-action: pan-y; /* deslizar a cortina não sequestra o scroll vertical */
}
.lp-compare img {
width: 100%;
height: auto;
display: block;
}
.lp-compare-after {
position: absolute;
inset: 0;
clip-path: inset(0 0 0 var(--lp-compare));
}
.lp-compare-after img { height: 100%; object-fit: cover; object-position: left top; }
/* a linha precisa se sustentar sobre um print quase todo branco: faixa branca
com um contorno escuro fino de cada lado, mais um halo suave */
.lp-compare-line {
position: absolute;
top: 0;
bottom: 0;
left: var(--lp-compare);
width: 3px;
margin-left: -1.5px;
background-color: #fff;
box-shadow: 0 0 0 1px #1a19252e, 0 0 12px #1a192526;
pointer-events: none;
}
.lp-compare-grip {
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
width: 46px;
height: 46px;
border-radius: 999px;
background-color: #fff;
box-shadow: 0 4px 16px #1a19253d, 0 0 0 1px #1a19251a;
display: grid;
place-items: center;
color: var(--mk);
}
.lp-compare-grip svg { width: 20px; height: 20px; display: block; }
/* o range cobre a área toda, invisível: quem aparece é a linha acima */
.lp-compare-range {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background: none;
border: 0;
cursor: ew-resize;
-webkit-appearance: none;
appearance: none;
}
.lp-compare-range::-webkit-slider-thumb {
-webkit-appearance: none;
width: 44px;
height: 44px;
background: none;
cursor: ew-resize;
}
.lp-compare-range::-moz-range-thumb {
width: 44px;
height: 44px;
background: none;
border: 0;
cursor: ew-resize;
}
/* foco de teclado: o anel vai na alça, que é o que o visitante enxerga */
.lp-compare-range:focus-visible { outline: none; }
.lp-compare-range:focus-visible ~ .lp-compare-line .lp-compare-grip {
box-shadow: 0 4px 14px #1a192533, 0 0 0 3px var(--mk);
}
/* Rótulos e instrução ficam ABAIXO do print, numa linha discreta: dentro da
imagem eles viravam badges flutuando por cima dos números do painel, que é
justamente o que o visitante precisa ler. Aqui só texto — sem pílula, sem
fundo — "Antes" à esquerda, "Depois" (na cor do marketplace) à direita e a
instrução no meio. */
.lp-compare-legend {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 18px 0;
color: var(--lp-muted);
font-size: 11px;
line-height: 16px;
}
.lp-compare-legend-item {
flex: none;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
}
.lp-compare-legend-item.is-after { color: var(--mk); }
/* mesma caixa alta dos dois extremos: a linha inteira lê como uma legenda só */
.lp-compare-legend-hint {
text-align: center;
letter-spacing: .08em;
text-transform: uppercase;
}
/* ------------------------------------- botão "avançar alguns meses" ----
Só no celular: é ele que troca o print de antes para depois, no lugar da
cortina. Fica fora do .lp-hero-shot para não cobrir a imagem. */
.lp-compare-advance {
display: none; /* no desktop quem manda é a cortina */
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
margin-top: 10px;
padding: 13px 18px;
border: 1px solid var(--lp-line);
border-radius: 999px;
background-color: var(--lp-surface);
color: var(--mk-ink);
font: inherit;
font-size: 12px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
cursor: pointer;
transition: border-color .25s, color .25s, background-color .25s;
}
.lp-compare-advance:disabled { cursor: progress; color: var(--lp-muted); }
.lp-compare-advance-spin {
display: none;
flex: none;
width: 15px;
height: 15px;
border: 2px solid #1a19251f;
border-top-color: var(--mk);
border-radius: 999px;
}
.lp-compare-advance.is-loading .lp-compare-advance-spin {
display: block;
animation: lp-spin .7s linear infinite;
}
@keyframes lp-spin { to { transform: rotate(1turn); } }
/* --------------------------------------- explosão de bolinhas (mobile) --
Disparada ao avançar os meses: cada bolinha é um emoji de venda dentro de
um círculo branco, arremessado do centro do bloco com direção, distância e
duração próprias (as custom properties vêm do JS). */
.lp-compare-fx {
position: absolute;
inset: 0;
z-index: 3;
overflow: hidden;
pointer-events: none;
}
.lp-fx-bit {
position: absolute;
top: 55%;
left: 50%;
width: 34px;
height: 34px;
border-radius: 999px;
background-color: #fff;
box-shadow: 0 4px 14px #1a192533;
display: grid;
place-items: center;
font-size: 16px;
line-height: 1;
opacity: 0;
animation: lp-burst var(--lp-fx-dur, 900ms) cubic-bezier(.15, .75, .3, 1) var(--lp-fx-delay, 0ms) forwards;
}
@keyframes lp-burst {
0% { opacity: 0; translate: -50% -50%; scale: .25; rotate: 0deg; }
18% { opacity: 1; }
70% { opacity: 1; }
100% {
opacity: 0;
translate: calc(-50% + var(--lp-fx-x)) calc(-50% + var(--lp-fx-y));
scale: 1;
rotate: var(--lp-fx-r);
}
}
@media (prefers-reduced-motion: reduce) {
.lp-fx-bit { animation: none; display: none; }
.lp-compare-after { transition: none; }
}
.lp-eyebrow {
flex-direction: column;
align-items: center;
gap: 12px;
margin-bottom: 24px;
display: flex;
}
.lp-mk-logo {
justify-content: center;
align-items: center;
height: 40px;
display: flex;
}
.lp-mk-logo img { max-height: 40px; width: auto; }
.lp-eyebrow .h6-heading-2 { text-align: center; }
/* A home usa títulos em weight 400 e tracking normal. Uma LP precisa de mais
presença no H1, então não vou até 400 — mas o 700 com -1.74px de tracking
era de outra família tipográfica. 600 com tracking quase neutro fica no
meio do caminho e passa a conversar com o site. */
.lp-hero h1 {
color: var(--mk-ink);
letter-spacing: -.01em;
margin: 0 0 20px;
font-size: 50px;
font-weight: 600;
line-height: 1.08;
}
.lp-hero-sub {
color: #4b5563;
max-width: 640px;
margin: 0 auto;
font-size: 19px;
line-height: 1.6;
}
.lp-actions {
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin-top: 32px;
display: flex;
}
.lp-btn-mk {
grid-column-gap: 8px;
color: #fff;
text-align: center;
white-space: nowrap;
background-color: var(--mk);
border: 1px solid var(--mk);
border-radius: 99px;
justify-content: center;
align-items: center;
padding: 13px 26px;
font-size: 18px;
font-weight: 600;
line-height: 24px;
text-decoration: none;
transition: filter .3s, transform .3s;
display: inline-flex;
}
.lp-btn-mk:hover { filter: brightness(.92); transform: translateY(-1px); }
.lp-btn-ghost {
grid-column-gap: 8px;
color: #000;
text-align: center;
white-space: nowrap;
background-color: #fff;
border: 1px solid #0000001f;
border-radius: 99px;
justify-content: center;
align-items: center;
padding: 13px 26px;
font-size: 18px;
font-weight: 500;
line-height: 24px;
text-decoration: none;
transition: background-color .3s, border-color .3s;
display: inline-flex;
}
.lp-btn-ghost svg { width: 20px; height: 20px; }
/* Assinaturas do .bttn01 da home trazidas para os CTAs da LP: caixa alta com
tracking leve, e o easing padrão do site. O peso e o tamanho continuam
maiores que os da home de propósito — é o CTA principal de uma página de
campanha, não um botão de navegação. */
.lp-btn-mk,
.lp-btn-ghost {
text-transform: uppercase;
letter-spacing: .04em;
font-size: 15px;
transition: all .325s var(--lp-ease);
}
/* hover do .bttn01.b da home: o botão inverte (fundo vira a cor da borda). */
.lp-btn-ghost:hover {
color: #fff;
background-color: var(--mk-ink);
border-color: var(--mk-ink);
}
.lp-trust {
flex-wrap: wrap;
justify-content: center;
gap: 8px 20px;
margin-top: 24px;
display: flex;
}
.lp-trust-item {
color: var(--lp-muted);
align-items: center;
gap: 8px;
font-size: 14px;
line-height: 20px;
display: flex;
}
.lp-trust-item svg { color: var(--mk); flex: none; width: 16px; height: 16px; }
/* Painéis (.lp-shots): agora vivem em #resultados, como segunda fileira
abaixo dos painéis de conta. O leque (rotação + deslocamento vertical de
cada card) e a proporção 3/4 eram do hero, onde os três flutuavam sozinhos
sobre o fundo; ao lado de uma grade regular isso lê como desalinhamento.
Aqui eles se comportam como .lp-panel: retos, na mesma linha de base e com
a altura seguindo o conteúdo. */
.lp-hero-visual { margin-top: 24px; position: relative; }
.lp-hero-visual .lp-shot {
aspect-ratio: auto;
transform: none;
}
/* Sem aspect-ratio a altura do card passa a vir do conteudo, entao o mock nao
pode mais esticar para 100% — e as barras do grafico, que tem `height` em
%, so' resolvem contra um pai de altura DEFINIDA (senao colapsam para 0 e o
grafico some). Altura explicita nas barras resolve os dois casos. */
.lp-hero-visual .lp-shot .lp-mock { height: auto; }
.lp-hero-visual .lp-shot .lp-mock-chart { flex: none; height: 96px; }
.lp-hero-visual .lp-shot > img { aspect-ratio: 4 / 3; height: auto; }
.lp-shots {
z-index: 1;
grid-column-gap: 24px;
grid-template-columns: 1fr 1fr 1fr;
display: grid;
position: relative;
}
.lp-shot {
aspect-ratio: 3 / 4;
background-color: #fff;
border: 4px solid #fff;
border-radius: var(--lp-radius);
box-shadow: var(--lp-shadow);
width: 100%;
overflow: hidden;
}
.lp-shot > img { object-fit: cover; width: 100%; height: 100%; display: block; }
/* Hover: o card sobe um pouco e a sombra encorpa. Vale para as DUAS fileiras
de #resultados — os painéis de conta (.lp-panel) e os três recortes que
vieram do hero (.lp-shot): são o mesmo tipo de card e devem reagir igual.
Mesmo mecanismo do .lp-card: o deslocamento usa `translate` (propriedade
própria) pra não disputar o `transform` da animação de entrada, e o
.lp-panel — que é .lp-reveal — ganha um seletor de entrada dedicado.
`hover: hover` + `min-width` mantêm o efeito fora de tela de toque. */
.lp-shot,
.lp-panel {
position: relative;
transition:
translate .3s var(--lp-ease),
box-shadow .55s var(--lp-ease);
}
.js-reveal .lp-reveal.lp-panel {
transition:
opacity .7s ease,
transform .7s ease,
translate .3s var(--lp-ease),
box-shadow .55s var(--lp-ease);
}
@media (hover: hover) and (min-width: 768px) {
.lp-shot:hover,
.lp-panel:hover {
z-index: 2;
translate: 0 -4px;
box-shadow: var(--lp-shadow-hover);
}
}
@media (prefers-reduced-motion: reduce) {
.lp-shot:hover,
.lp-panel:hover { translate: none; }
}
/* dentro do shot, o mock ocupa a altura toda; quem manda na proporção é o
.lp-shot, não o .lp-mock */
.lp-shot .lp-mock { aspect-ratio: auto; height: 100%; }
/* Ticker: réplica do .carousel do TOPFIT, em CSS puro (sem Flowbase). Fecha a
seção "por que sua loja trava" — a lista de frentes de trabalho entra logo
depois do diagnóstico, como resposta a ele. */
#diagnostico .lp-ticker {
-webkit-mask-image: linear-gradient(90deg, #0000, #000 12%, #000 88%, #0000);
mask-image: linear-gradient(90deg, #0000, #000 12%, #000 88%, #0000);
width: 100%;
margin-top: 48px;
overflow: hidden;
}
.lp-ticker-track {
align-items: center;
gap: 64px;
width: max-content;
display: flex;
animation: lp-marquee 32s linear infinite;
}
.lp-ticker:hover .lp-ticker-track { animation-play-state: paused; }
.lp-ticker .roller-text { color: #9ca3af; }
@keyframes lp-marquee {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
.lp-ticker-track { animation: none; }
}
/* --------------------------------------------------------------- KPIs ---- */
.lp-kpis {
background-color: #fff;
border-radius: var(--lp-radius);
box-shadow: var(--lp-shadow);
grid-template-columns: repeat(4, 1fr);
display: grid;
overflow: hidden;
}
/* A grid estica todas as células à altura da mais alta (a que tem rótulo de
2 linhas), mas o conteúdo ficava colado no topo: as de rótulo curto
sobravam ~20px embaixo e o conjunto parecia subir. Centralizar em coluna
equilibra as folgas independentemente de quantas linhas o rótulo ocupa. */
.lp-kpi {
border-right: 1px solid var(--lp-line);
/* 37px em cima, 32 embaixo: compensação óptica, não erro de conta. O número
tem fonte grande (40px) e sobra vão acima dos dígitos dentro da própria
linha; o rótulo, pequeno, sobra vão abaixo da linha de base. Centralizar a
CAIXA deixava a TINTA 5px acima do centro. Com estes 5px a mais no topo,
a distância do topo da célula ao número iguala a do rótulo à base. */
padding: 37px 24px 32px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
.lp-kpi:last-child { border-right: 0; }
.lp-kpi-value {
color: var(--mk-ink);
letter-spacing: -.03em;
font-size: 40px;
font-weight: 700;
line-height: 1.1;
}
.lp-kpi-value .lp-kpi-prefix,
.lp-kpi-value .lp-kpi-suffix { color: var(--mk); }
.lp-kpi-label { color: var(--lp-muted); margin-top: 6px; font-size: 14px; line-height: 1.4; }
/* Só centralizar não bastava: com um rótulo de 2 linhas e os outros de 1, o
bloco centralizado deixava os NÚMEROS em alturas diferentes — e numa fileira
de estatísticas o olho lê os números na horizontal, então o desalinhamento
deles incomoda mais que a folga embaixo. Reservando a altura de 2 linhas
para todo rótulo, as células ficam idênticas: números na mesma linha de base
e folga igual em cima e embaixo.
Só a partir de 2 colunas — no empilhamento de 1 coluna isso viraria espaço
morto em cada item. */
/* Antes havia aqui uma altura mínima de 2 linhas no rótulo, para compensar
um texto que quebrava enquanto os outros três não. Era um remendo: mantinha
números e rótulos alinhados, mas sobrava espaço no rodapé das células curtas
e a tinta não ficava centralizada. Com todos os rótulos em uma linha (o
texto longo foi encurtado no CMS), o `justify-content: center` do .lp-kpi
resolve tudo sozinho — e sem remendo.
Se algum rótulo voltar a quebrar em duas linhas, o conjunto continua
centralizado; o que se perde é o alinhamento entre os números. */
/* --------------------------------- band (variação de .logo-section) ------ */
.lp-band {
background-color: var(--mk);
justify-content: center;
align-items: center;
padding: 96px 5%;
display: flex;
overflow: hidden;
}
.lp-band-inner { max-width: 900px; text-align: center; }
.lp-band h2 {
color: #fff;
letter-spacing: -.03em;
margin: 0;
font-size: 44px;
font-weight: 700;
line-height: 1.15;
}
.lp-band p { color: #ffffffd9; margin: 20px 0 0; font-size: 18px; line-height: 1.6; }
.lp-band .lp-actions .lp-btn-mk { color: var(--mk); background: #fff; border-color: #fff; }
.lp-band .lp-btn-ghost { color: #fff; background: #0000; border-color: #ffffff59; }
.lp-band .lp-btn-ghost:hover { background: #ffffff1f; border-color: #fff; }
/* --------------------- serviços (variação de .team-about-card) ----------- */
.lp-services { grid-template-columns: 1fr 1fr; gap: 24px; display: grid; }
.lp-service {
background-color: var(--lp-surface);
border: 1px solid var(--lp-line);
border-radius: var(--lp-radius);
flex-direction: column;
padding: 32px;
display: flex;
position: relative;
}
.lp-service.is-featured {
background-color: #111214;
border-color: #111214;
color: #fff;
}
.lp-service.is-featured .lp-service-name,
.lp-service.is-featured .lp-list li { color: #fff; }
.lp-service.is-featured .lp-service-desc { color: #ffffffa6; }
.lp-service.is-featured .lp-list li:before { background-color: var(--mk); color: #fff; }
.lp-service.is-featured .lp-service-foot { border-top-color: #ffffff1f; }
.lp-service-top { align-items: center; gap: 12px; margin-bottom: 16px; display: flex; }
.lp-tag {
grid-column-gap: 8px;
color: #000;
background-color: #fff;
border: 1px solid var(--lp-line);
border-radius: 12px;
align-items: center;
padding: 4px 12px;
font-size: 13px;
font-weight: 500;
line-height: 20px;
display: inline-flex;
}
.lp-tag.is-mk { color: #fff; background-color: var(--mk); border-color: var(--mk); }
.lp-tag.is-light { color: #fff; background-color: #ffffff1f; border-color: #ffffff29; }
.lp-service-name {
color: var(--mk-ink);
letter-spacing: -.2px;
margin: 0 0 8px;
font-size: 28px;
font-weight: 500;
line-height: 1.25;
}
.lp-service-desc { color: var(--lp-muted); margin: 0 0 24px; font-size: 16px; line-height: 1.6; }
.lp-list { flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; display: flex; }
.lp-list li {
color: #374151;
padding-left: 30px;
font-size: 15px;
line-height: 1.5;
position: relative;
}
/* checkmark do Lucide (lucide.dev, "check"), aplicado via mask para não
inflar o HTML com um