/* ================================================================= MeLeva — página pública ================================================================= ESTRUTURA AQUI, CONTEÚDO NO BANCO. Este arquivo é a aparência. O texto vem de settings/landingContent (campos nomeados, editáveis pelo painel) e as imagens são arquivos em /images/site/, também trocáveis pelo painel. Antes, tudo isto — CSS, marcação e texto — vivia dentro de um único campo de 24 kB no Firestore, editado por um WYSIWYG que reescrevia a marcação a cada gravação. Uma correção de vírgula podia derrubar o layout inteiro. As variáveis abaixo eram declaradas no cabeçalho (outro blob no banco). Ficam aqui para a página se sustentar sozinha: se o cabeçalho falhar ao carregar, o corpo continua com as cores certas. ================================================================= */ :root{ --amarelo:#FFCC00; --amarelo-esc:#E6B800; --preto:#0B0B0D; --grafite:#15161A; --linha:rgba(255,204,0,.18); } /* ----------------------------------------------------------------- CAMADA DE IMAGEM Toda imagem da página passa por aqui. Regras que valem para todas: - proporção reservada ANTES do carregamento. Sem isso a página salta quando a imagem chega e quem estava lendo perde a linha. - preenchimento sem distorcer: a arte cobre a área e o excesso é cortado, em vez de esticar rostos. - moldura escura, que evita a borda branca quando a arte tem fundo claro. Seção sem imagem cadastrada não renderiza nada — nem moldura vazia, nem espaço reservado. É isso que permite publicar antes de a arte ficar pronta. ----------------------------------------------------------------- */ .ml-img{position:relative;border-radius:18px;overflow:hidden;line-height:0; background:var(--grafite);border:1px solid rgba(255,255,255,.08); box-shadow:0 18px 50px rgba(0,0,0,.45)} .ml-img img{width:100%;height:100%;display:block;object-fit:cover} .ml-img-larga{aspect-ratio:16/9} .ml-img-alta{aspect-ratio:3/4} /* Faixa de imagem no topo, largura total e sem moldura. A PROPORCAO ACOMPANHA A ARTE, nao o contrario. Ela ja esteve em 16:7 e depois em 4:3 no celular; nos dois casos a foto era 3:2 e o excesso saia pelas laterais, levando junto a moto e o carro da esquerda. Com 3:2 aqui, o `cover` nao tem nada para cortar — a imagem aparece inteira em qualquer largura de tela. */ .ml-faixa{display:block;background:var(--preto);line-height:0} .ml-faixa .ml-img{border-radius:0;border:0;box-shadow:none;aspect-ratio:3/2} /* A FAIXA DO TOPO MANTEM A PROPORCAO DA ARTE EM QUALQUER TELA. Havia aqui um 4/3 para o celular, escrito quando ainda nao existia imagem — a ideia era que faixa larga fica baixa demais no telefone. Com foto de verdade isso destroi a composicao: a arte e 16:7, e o recorte 4:3 come 42% da largura, levando junto a moto e o carro da esquerda. Faixa baixa e melhor que faixa mutilada. */ /* Imagem que acompanha uma seção, abaixo do texto. */ .ml-sec .ml-img{margin-top:44px} /* ----------------------------------------------------------------- SELOS DAS LOJAS Somem por inteiro enquanto `lojasVisiveis` for falso. Anunciar download de um aplicativo que ainda não está publicado é promessa quebrada no primeiro toque — e a página perde a credibilidade justamente com quem clicou. ----------------------------------------------------------------- */ .ml-lojas{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px} .ml-lojas a{display:inline-flex;align-items:center;gap:9px;padding:11px 18px; border:1px solid var(--linha);border-radius:12px;color:#fff;text-decoration:none; font-weight:600;font-size:14px;background:rgba(255,255,255,.03);transition:.18s} .ml-lojas a:hover{border-color:var(--amarelo);background:rgba(255,204,0,.08)} .ml-lojas svg{width:20px;height:20px;color:var(--amarelo);flex:0 0 auto} /* --------------------------------------------------------------- Icones: SVG proprio, grade 24x24, traco 1.8, cantos arredondados. A versao anterior usava emoji do sistema — cada aparelho desenhava de um jeito, nenhum respeitava o amarelo da marca, e ao lado das pecas da campanha parecia improviso. --------------------------------------------------------------- */ .ml-svg{width:34px;height:34px;color:var(--amarelo);flex:0 0 auto} .ml-svg-p{width:26px;height:26px} .ml-sec{padding:82px 0;position:relative} .ml-sec+.ml-sec{border-top:1px solid rgba(255,255,255,.06)} .ml-cab{max-width:660px;margin:0 0 46px} .ml-cab h2{font-size:clamp(28px,4.6vw,42px);font-weight:900;line-height:1.08; margin:0 0 14px;letter-spacing:-.025em} .ml-cab p{color:#a9aab0;font-size:16.5px;margin:0;line-height:1.65} .ml-am{color:var(--amarelo)} .ml-risco{display:block;width:56px;height:4px;border-radius:4px; background:linear-gradient(90deg,var(--amarelo),transparent);margin-bottom:18px} /* ------------------------------------------------------------- topo */ .ml-hero{position:relative;padding:90px 0 84px;overflow:hidden} .ml-hero::before{content:"";position:absolute;inset:0; background:radial-gradient(880px 420px at 76% -10%,rgba(255,204,0,.20),transparent 60%), radial-gradient(600px 300px at 8% 110%,rgba(255,204,0,.07),transparent 62%); pointer-events:none} /* riscos diagonais, como nas pecas da campanha */ .ml-hero::after{content:"";position:absolute;top:8%;left:-4%;width:150px;height:5px; background:var(--amarelo);border-radius:5px;transform:rotate(-38deg);opacity:.5; box-shadow:26px 40px 0 -1px var(--amarelo),52px 80px 0 -2px rgba(255,204,0,.55)} .ml-hero-grid{position:relative;display:grid;grid-template-columns:1.12fr .88fr; gap:56px;align-items:center} .ml-selo{display:inline-flex;align-items:center;gap:9px;background:rgba(255,204,0,.11); border:1px solid var(--linha);color:var(--amarelo);font-weight:700;font-size:12.5px; letter-spacing:.07em;text-transform:uppercase;padding:8px 16px;border-radius:30px; margin-bottom:24px} .ml-selo svg{width:15px;height:15px} .ml-hero h1{font-size:clamp(38px,6.8vw,68px);font-weight:900;line-height:1; margin:0 0 22px;letter-spacing:-.035em} .ml-hero h1 em{font-style:normal;color:var(--amarelo); text-shadow:0 0 44px rgba(255,204,0,.34)} .ml-lead{font-size:18px;color:#c5c6ca;line-height:1.62;margin:0 0 32px;max-width:520px} .ml-acoes{display:flex;gap:13px;flex-wrap:wrap;margin-bottom:30px} .ml-acoes .ml-btn{padding:16px 30px;font-size:15px} .ml-confia{display:flex;gap:14px;flex-wrap:wrap} .ml-confia span{display:inline-flex;align-items:center;gap:8px;color:#9a9ba1; font-size:13.5px;font-weight:600;background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);padding:8px 14px;border-radius:24px} .ml-confia svg{width:15px;height:15px;color:var(--amarelo)} /* celular */ .ml-fone{justify-self:center;width:282px;background:#000;border:10px solid #212228; border-radius:38px;padding:18px 16px 24px;position:relative; box-shadow:0 28px 70px rgba(0,0,0,.7),0 0 0 1px rgba(255,204,0,.16), 0 0 90px rgba(255,204,0,.10)} .ml-fone-topo{width:78px;height:5px;background:#3a3b42;border-radius:5px;margin:0 auto 18px} .ml-fone h4{margin:0 0 3px;font-size:14.5px;font-weight:800} .ml-peq{color:#84858c;font-size:11.5px;margin:0 0 14px} .ml-campo{background:#141519;border:1px solid #26272d;border-radius:12px; padding:11px 13px;margin-bottom:9px;font-size:11px;color:#84858c; display:flex;align-items:center;gap:10px} .ml-campo b{display:block;color:#fff;font-size:12.5px;font-weight:700;margin-bottom:1px} .ml-ponto{width:9px;height:9px;border-radius:50%;flex:0 0 auto} .ml-ponto.o{background:#fff} .ml-ponto.d{background:var(--amarelo)} .ml-oferta{background:linear-gradient(180deg,rgba(255,204,0,.16),rgba(255,204,0,.06)); border:1.5px solid var(--amarelo);border-radius:14px;padding:14px; text-align:center;margin:13px 0} .ml-oferta small{display:block;color:#b6b7bd;font-size:10px;text-transform:uppercase; letter-spacing:.1em;margin-bottom:6px} .ml-oferta strong{font-size:31px;font-weight:900;color:var(--amarelo);line-height:1; text-shadow:0 0 26px rgba(255,204,0,.4)} .ml-cat{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:13px 0} .ml-cat div{background:#141519;border:1px solid #26272d;border-radius:10px; padding:9px 2px 7px;text-align:center;font-size:9px;color:#b6b7bd;font-weight:700} .ml-cat div.on{border-color:var(--amarelo);background:rgba(255,204,0,.1);color:var(--amarelo)} .ml-cat svg{width:19px;height:19px;margin:0 auto 3px;display:block} .ml-fone .ml-cta{background:var(--amarelo);color:#0B0B0D;text-align:center; font-weight:900;padding:13px;border-radius:12px;font-size:13px;margin-top:5px; box-shadow:0 8px 24px rgba(255,204,0,.28)} /* -------------------------------------------------- como funciona */ .ml-passos{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:p} .ml-passo{background:linear-gradient(165deg,#1a1b20,#121317); border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:30px 24px 26px; position:relative;transition:border-color .2s ease,transform .2s ease} .ml-passo:hover{border-color:var(--linha);transform:translateY(-3px)} .ml-passo::before{counter-increment:p;content:"0" counter(p);position:absolute; top:-13px;left:24px;background:var(--amarelo);color:#0B0B0D;border-radius:8px; padding:4px 10px;font-weight:900;font-size:13px;letter-spacing:.02em; box-shadow:0 6px 18px rgba(255,204,0,.3)} .ml-passo h3{margin:12px 0 8px;font-size:17px;font-weight:800} .ml-passo p{margin:0;color:#a3a4aa;font-size:14.5px;line-height:1.58} /* ------------------------------------------------------- servicos */ .ml-servs{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} .ml-serv{background:linear-gradient(165deg,#1a1b20,#121317); border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:30px 24px; transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease} .ml-serv:hover{border-color:var(--amarelo);transform:translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.45)} .ml-serv-ico{width:60px;height:60px;border-radius:16px; background:rgba(255,204,0,.1);border:1px solid var(--linha); display:grid;place-items:center;margin-bottom:18px} .ml-serv h3{margin:0 0 8px;font-size:18px;font-weight:800;color:var(--amarelo)} .ml-serv p{margin:0 0 16px;color:#a3a4aa;font-size:14.5px;line-height:1.55} .ml-preco{font-size:12.5px;color:#7c7d84;font-weight:700;letter-spacing:.02em; border-top:1px solid rgba(255,255,255,.08);padding-top:13px} .ml-preco b{color:#fff;font-size:15px} /* ------------------------------------------------------ motorista */ .ml-mot{background:linear-gradient(150deg,#17181d 0%,#0B0B0D 62%);position:relative; overflow:hidden} .ml-mot::before{content:"";position:absolute;top:-15%;right:-8%;width:460px;height:460px; background:radial-gradient(circle,rgba(255,204,0,.14),transparent 66%);pointer-events:none} .ml-mot-grid{position:relative;display:grid;grid-template-columns:.92fr 1.08fr; gap:58px;align-items:center} .ml-taxa{background:linear-gradient(170deg,#0f0f12,#000);border:2px solid var(--amarelo); border-radius:24px;padding:38px 32px;text-align:center; box-shadow:0 0 60px rgba(255,204,0,.17),inset 0 1px 0 rgba(255,255,255,.06)} .ml-num{font-size:clamp(72px,14vw,116px);font-weight:900;color:var(--amarelo); line-height:.88;letter-spacing:-.05em;text-shadow:0 0 56px rgba(255,204,0,.42)} .ml-rot{font-size:15px;font-weight:800;letter-spacing:.11em;text-transform:uppercase; margin-top:10px;color:#e8e8ea} .ml-conta{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center; margin-top:26px;padding-top:24px;border-top:1px solid rgba(255,255,255,.13)} .ml-conta small{display:block;color:#84858c;font-size:10.5px;text-transform:uppercase; letter-spacing:.07em;margin-bottom:6px;line-height:1.3} .ml-conta b{font-size:22px;font-weight:900} .ml-seta{color:var(--amarelo);font-size:24px;font-weight:900} .ml-benef{list-style:none;padding:0;margin:0 0 32px} .ml-benef li{padding:15px 0;border-bottom:1px solid rgba(255,255,255,.07); display:flex;gap:15px;align-items:flex-start} .ml-benef li:last-child{border-bottom:none} .ml-bico{flex:0 0 auto;width:30px;height:30px;background:rgba(255,204,0,.13); border:1px solid var(--linha);border-radius:9px;display:grid;place-items:center; color:var(--amarelo)} .ml-bico svg{width:16px;height:16px} .ml-benef b{display:block;font-size:16px;margin-bottom:3px} .ml-benef span{color:#a3a4aa;font-size:14.5px;line-height:1.5} /* ------------------------------------------------------ seguranca */ .ml-seg{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .ml-segc{background:linear-gradient(165deg,#1a1b20,#121317); border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:26px 22px} .ml-segc .ml-svg{margin-bottom:14px} .ml-segc h4{margin:0 0 6px;font-size:15px;font-weight:800} .ml-segc p{margin:0;color:#a3a4aa;font-size:13.5px;line-height:1.55} /* -------------------------------------------------------- chamada */ .ml-final{background:linear-gradient(135deg,#FFCC00,#FFD84D 55%,#E6B800); color:#0B0B0D;text-align:center;padding:72px 0;position:relative;overflow:hidden} .ml-final::before{content:"";position:absolute;inset:0; background:radial-gradient(600px 260px at 50% -30%,rgba(255,255,255,.5),transparent 62%)} .ml-final>*{position:relative} .ml-final h2{font-size:clamp(30px,5.4vw,48px);font-weight:900;margin:0 0 14px; letter-spacing:-.028em;color:#0B0B0D} .ml-final p{font-size:17.5px;margin:0 0 30px;font-weight:600;color:rgba(11,11,13,.76)} .ml-final .ml-btn{background:#0B0B0D;color:var(--amarelo) !important; padding:17px 38px;font-size:16px;display:inline-flex;align-items:center;gap:11px} .ml-final .ml-btn svg{width:20px;height:20px} .ml-final .ml-btn:hover{box-shadow:0 12px 32px rgba(0,0,0,.4)} .ml-assina{margin-top:28px;font-size:15.5px;font-weight:800;font-style:italic; color:rgba(11,11,13,.72)} @media(max-width:980px){ .ml-hero-grid,.ml-mot-grid{grid-template-columns:1fr;gap:44px} .ml-passos,.ml-servs,.ml-seg{grid-template-columns:repeat(2,1fr)} .ml-fone{order:-1} .ml-hero::after{display:none} } @media(max-width:560px){ .ml-passos,.ml-servs,.ml-seg{grid-template-columns:1fr} .ml-sec{padding:58px 0} .ml-conta{grid-template-columns:1fr;gap:12px} .ml-seta{transform:rotate(90deg)} } /* ----------------------------------------------------------------- RECURSOS Grade de tres em tela larga, duas em tablet, uma no celular. Cada cartao e um recurso que EXISTE — a secao foi criada porque metade do que o aplicativo faz nao estava em lugar nenhum do site. ----------------------------------------------------------------- */ .ml-recursos{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .ml-recurso{background:var(--grafite);border:1px solid rgba(255,255,255,.07); border-radius:14px;padding:22px 20px} .ml-recurso h3{font-size:16px;font-weight:700;margin:0 0 8px;color:var(--amarelo)} .ml-recurso p{margin:0;color:#a9aab0;font-size:14.5px;line-height:1.6} @media (max-width:980px){.ml-recursos{grid-template-columns:repeat(2,1fr)}} @media (max-width:620px){.ml-recursos{grid-template-columns:1fr}} /* ================================================================= CARTAO DE VEICULO — arte a esquerda, texto a direita ================================================================= Antes eram seis cartoes verticais em quatro colunas, com a arte em cima. Em coluna estreita o veiculo ficava pequeno demais para se reconhecer, que e justamente o trabalho dele: a pessoa bate o olho e sabe se aquilo e a 4x4 ou o sedan. Deitado, a arte ganha o dobro de largura e o texto para de brigar com ela por espaco vertical. Duas colunas de cartao largo em vez de quatro estreitas. ================================================================= */ .ml-servs{display:grid;grid-template-columns:repeat(2,1fr);gap:18px} .ml-serv{display:grid;grid-template-columns:118px 1fr;gap:18px;align-items:center; padding:22px 24px} /* O filete entre a arte e o texto. Um degrade que nasce e morre transparente — linha cheia de ponta a ponta pesa e corta o cartao em dois; assim ela separa sem dividir. */ .ml-serv-arte{position:relative;display:flex;align-items:center;justify-content:center; height:88px} .ml-serv-arte::after{content:"";position:absolute;right:-9px;top:6%;bottom:6%;width:1px; background:linear-gradient(180deg,transparent,rgba(255,204,0,.28),transparent)} .ml-serv-arte img{max-height:100%;max-width:100%;width:auto;height:auto; object-fit:contain;display:block; filter:drop-shadow(0 10px 16px rgba(0,0,0,.55)); transition:transform .25s ease} .ml-serv:hover .ml-serv-arte img{transform:translateX(3px) scale(1.05)} .ml-serv-txt{min-width:0} .ml-serv-txt h3{margin:0 0 6px;font-size:17px;font-weight:800;color:var(--amarelo)} .ml-serv-txt p{margin:0 0 12px;color:#a3a4aa;font-size:14px;line-height:1.5} /* O preco nao precisa mais de linha em cima: o filete ja separa a arte do texto, e duas divisorias no mesmo cartao viram grade. */ .ml-serv-txt .ml-preco{border-top:none;padding-top:0;display:block} .ml-serv-txt .ml-preco small{text-transform:uppercase;letter-spacing:.06em;font-size:10.5px} /* A PRIMEIRA CATEGORIA GANHA DESTAQUE. A Caminhonete 4x4 e o unico diferencial que nenhum concorrente da regiao tem. Uma borda amarela discreta guia o olho para ela sem precisar escrever "destaque" em lugar nenhum. */ .ml-servs .ml-serv:first-child{border-color:rgba(255,204,0,.42)} .ml-servs .ml-serv:first-child::before{content:"";position:absolute;left:0;top:16%; bottom:16%;width:3px;border-radius:0 3px 3px 0;background:var(--amarelo)} .ml-serv{position:relative;overflow:hidden} @media (max-width:980px){ .ml-servs{grid-template-columns:1fr} } @media (max-width:520px){ .ml-serv{grid-template-columns:92px 1fr;gap:14px;padding:18px 18px} .ml-serv-arte{height:72px} .ml-serv-arte::after{right:-7px} } /* `ml-acoes` era usada na pagina original e nunca teve regra: os botoes ficavam colados um no outro. */ .ml-acoes{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 0} /* ----------------------------------------------------------------- FAIXAS ULTRA-LARGAS As pecas de campanha tem por volta de 3,5:1. A proporcao fica no \`aspect-ratio\` de cada faixa, definido pelo atributo width/height da propria imagem — assim a arte manda, nao o CSS. Foi o contrario disso que cortou a faixa do topo duas vezes. No celular a faixa fica com uns 110 px de altura. Baixa, mas inteira: recortar uma peca que tem texto desenhado corta o texto junto. ----------------------------------------------------------------- */ .ml-faixa-larga .ml-img{aspect-ratio:auto;border-radius:0;border:0;box-shadow:none} .ml-faixa-larga .ml-img img{width:100%;height:auto;object-fit:unset} /* A faixa do motorista tem um botao desenhado; a faixa inteira e o link. */ .ml-faixa-link{display:block;text-decoration:none;transition:filter .2s ease} .ml-faixa-link:hover{filter:brightness(1.06)} /* ================================================================= FECHO — convite de expansao ================================================================= O cartao e ESCURO dentro de uma seccao amarela, entao cada texto dele precisa da propria cor declarada. Sem isso o

herda o preto que a seccao amarela define e some no fundo escuro — foi o que aconteceu na primeira versao. ================================================================= */ .ml-final .ml-acoes{justify-content:center;margin:0 0 46px} .ml-expansao{display:block;text-align:center;max-width:660px;margin:0 auto; padding:40px 42px;border-radius:26px; background:linear-gradient(165deg,#141519,#0B0B0D); border:1px solid rgba(0,0,0,.22); box-shadow:0 26px 70px rgba(0,0,0,.32)} .ml-expansao-rot{display:block;font-size:11px;font-weight:800;letter-spacing:.16em; text-transform:uppercase;color:var(--amarelo);margin-bottom:14px} .ml-expansao h3{margin:0 0 14px;font-size:clamp(21px,3.1vw,27px);font-weight:900; line-height:1.15;letter-spacing:-.02em;color:#fff} .ml-expansao p{margin:0 0 26px;font-size:15.5px;line-height:1.65;font-weight:400; color:rgba(255,255,255,.72)} /* O botao do cartao e amarelo sobre o escuro — o inverso do botao da seccao, que e escuro sobre o amarelo. Assim os dois se distinguem em vez de disputarem o mesmo clique. */ .ml-btn-amarelo{background:var(--amarelo);color:#0B0B0D !important; border:0;padding:15px 32px;font-weight:800} .ml-btn-amarelo:hover{background:#fff;box-shadow:0 14px 34px rgba(0,0,0,.34)} @media (max-width:620px){ .ml-expansao{padding:30px 22px;border-radius:20px} } /* Aviso no lugar de um botao sem destino, na seccao escura do motorista. */ .ml-emBreve{display:inline-block;padding:15px 30px;border-radius:99px; font-weight:700;font-size:15px; border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.62); background:rgba(255,255,255,.03)} /* ================================================================= FECHO AMARELO — acabamento ================================================================= */ /* RESPIRO. Eram 72 px; o texto quase encostava nas divisoes escuras de cima e de baixo, e e essa colagem que da aspecto de rascunho. */ .ml-final{padding:110px 0 96px} .ml-final h2{font-size:clamp(32px,5.8vw,54px);line-height:1.02; letter-spacing:-.035em;margin:0 0 18px} /* Linha longa demais cansa: o olho perde o comeco da linha seguinte. 62 caracteres e a faixa confortavel, e e o que este limite produz. */ .ml-final p{max-width:640px;margin:0 auto 34px;font-size:18px;line-height:1.6; font-weight:500;color:rgba(11,11,13,.72)} /* ----------------------------------------------------------------- SELO DAS LOJAS Solido, nao tracejado. O tracejado lia como rascunho — ironico, ja que ele existe para dizer "ainda nao". Assim comunica que esta chegando sem parecer inacabado, e sem fingir que e clicavel. ----------------------------------------------------------------- */ .ml-selo-lojas{display:inline-flex;align-items:center;gap:11px; padding:15px 30px;border-radius:99px; background:rgba(11,11,13,.9);color:rgba(255,255,255,.92); font-weight:700;font-size:15px;letter-spacing:.01em; box-shadow:0 10px 26px rgba(11,11,13,.22), inset 0 1px 0 rgba(255,255,255,.1)} .ml-selo-lojas svg{width:17px;height:17px;color:var(--amarelo);flex:0 0 auto} /* ----------------------------------------------------------------- CARTAO DE EXPANSAO Sombra difusa em vez de dura, e a borda iluminada por dentro: um fio branco a 8% no topo e um risco escuro embaixo. E assim que a luz pega numa superficie real, e e o que separa um cartao que flutua de um retangulo colado no fundo. ----------------------------------------------------------------- */ .ml-expansao{max-width:680px;padding:46px 48px;border-radius:28px; background:linear-gradient(168deg,#17181d 0%,#0B0B0D 78%); border:0; box-shadow:0 2px 4px rgba(11,11,13,.10), 0 12px 28px rgba(11,11,13,.16), 0 40px 80px rgba(11,11,13,.26), inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.5); transition:transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease} .ml-expansao:hover{transform:translateY(-2px); box-shadow:0 2px 4px rgba(11,11,13,.10), 0 16px 34px rgba(11,11,13,.18), 0 52px 96px rgba(11,11,13,.3), inset 0 1px 0 rgba(255,255,255,.1), inset 0 -1px 0 rgba(0,0,0,.5)} .ml-expansao-rot{font-size:11px;letter-spacing:.2em;margin-bottom:16px} .ml-expansao h3{font-size:clamp(23px,3.3vw,30px);line-height:1.12; letter-spacing:-.022em;margin:0 0 16px;color:#fff} .ml-expansao p{max-width:none;margin:0 0 30px;font-size:16px;line-height:1.7; font-weight:400;color:rgba(255,255,255,.68)} .ml-expansao .ml-btn-amarelo{gap:9px} .ml-expansao .ml-btn-amarelo svg{width:17px;height:17px} /* ----------------------------------------------------------------- FECHO DO BLOCO Pesos diferentes para a assinatura e a regiao. Dois paragrafos iguais soltos no fim nao dizem qual e o principal. ----------------------------------------------------------------- */ /* .ml-final p tem especificidade 0,1,1 e vence uma classe sozinha (0,1,0). Sem o pai no seletor, o tamanho de 18px do paragrafo de apoio sobrescrevia estes dois e as tres frases ficavam do mesmo tamanho — que e exatamente a falta de hierarquia que este bloco veio resolver. */ .ml-final .ml-assinatura{max-width:none;margin:46px auto 0;font-size:17px; font-weight:700;letter-spacing:-.01em;color:rgba(11,11,13,.8)} .ml-final .ml-regiao{max-width:none;margin:14px auto 0;font-size:11.5px; font-weight:800;letter-spacing:.2em;text-transform:uppercase; color:rgba(11,11,13,.46)} @media (max-width:620px){ .ml-final{padding:78px 0 68px} .ml-expansao{padding:34px 24px;border-radius:22px} .ml-selo-lojas{padding:14px 22px;font-size:14px} } /* ================================================================= FECHO — redesenho O QUE ESTAVA ERRADO Tudo empilhado no eixo central: titulo, paragrafo, selo, cartao preto, assinatura, regiao. Seis blocos centralizados um debaixo do outro sobre um amarelo chapado. Sem eixo de leitura, sem profundidade, e o cartao preto boiando no meio sem se relacionar com nada em volta. O QUE MUDA Grade de duas colunas com pesos diferentes (1,05 / 0,95): a esquerda e institucional e alinhada a esquerda — so isso ja quebra o efeito de "tudo no meio" —, e a direita recebe o convite, que passa a ser um painel ancorado na grade em vez de um caixote solto. O fundo ganha camadas: dois borroes de amarelo em tons diferentes, uma trama diagonal fraca e um mapa desenhado dentro do painel. Amarelo chapado nao tem profundidade; amarelo em camadas tem. ESTE BLOCO VEM DEPOIS das regras antigas de .ml-final no arquivo, e e por isso que ele vence os empates de especificidade sem precisar de !important. ================================================================= */ .ml-final{padding:104px 0 92px;text-align:left; background:linear-gradient(152deg,#FFDD4A 0%,#FFCC00 42%,#F5BE00 100%)} /* O brilho radial antigo foi substituido pelos borroes, que sao dois e ficam nos cantos. Somados, os dois efeitos lavavam o centro. */ .ml-final::before{display:none} /* --- camada grafica --- */ .ml-final-fundo{position:absolute;inset:0;pointer-events:none;overflow:hidden} .ml-borrao{position:absolute;border-radius:50%;filter:blur(70px)} .ml-borrao-a{width:620px;height:620px;top:-280px;left:-120px; background:radial-gradient(circle,rgba(255,255,255,.55),transparent 68%)} .ml-borrao-b{width:560px;height:560px;bottom:-300px;right:-100px; background:radial-gradient(circle,rgba(214,158,0,.5),transparent 66%)} /* Trama diagonal: textura, nao estampa. A 4% ela e lida como acabamento; acima disso vira listra e disputa com o texto. */ .ml-trama{position:absolute;inset:0; background:repeating-linear-gradient(58deg, rgba(11,11,13,.04) 0 1px, transparent 1px 13px)} .ml-final .ml-final-grid{position:relative;display:grid; grid-template-columns:1.05fr .95fr;gap:66px;align-items:center} /* --- coluna institucional --- */ .ml-final-txt{text-align:left;min-width:0} .ml-final-rot{display:inline-flex;align-items:center;gap:7px; padding:7px 15px 7px 12px;margin:0 0 22px;border-radius:99px; background:rgba(11,11,13,.09);border:1px solid rgba(11,11,13,.14); font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase; color:rgba(11,11,13,.68)} .ml-final-rot svg{width:14px;height:14px;flex:0 0 auto} .ml-final h2{font-size:clamp(34px,4.6vw,56px);font-weight:900;line-height:1.02; letter-spacing:-.038em;margin:0 0 20px;color:#0B0B0D} /* 0,2,0 — vence .ml-final p (0,1,1), que centraliza e limita a 640px. */ .ml-final .ml-final-lead{max-width:480px;margin:0 0 34px;font-size:17.5px; line-height:1.62;font-weight:500;color:rgba(11,11,13,.7)} /* ----------------------------------------------------------------- SELO DAS LOJAS Um bloco so, com os dois simbolos separados do texto por um fio. Vira sozinho quando houver link de loja no painel; ate la e uma
, porque clique que nao leva a lugar nenhum faz a pessoa achar que o site quebrou. ----------------------------------------------------------------- */ .ml-lojas-selo{display:inline-flex;align-items:center;gap:16px; padding:14px 26px 14px 20px;border-radius:18px;text-decoration:none; background:linear-gradient(165deg,#1a1b20,#0B0B0D); box-shadow:0 2px 4px rgba(11,11,13,.14),0 14px 34px rgba(11,11,13,.26), inset 0 1px 0 rgba(255,255,255,.09); transition:transform .24s cubic-bezier(.2,.7,.3,1), box-shadow .24s ease} a.ml-lojas-selo:hover{transform:translateY(-2px); box-shadow:0 2px 4px rgba(11,11,13,.14),0 20px 44px rgba(11,11,13,.32), inset 0 1px 0 rgba(255,255,255,.12)} .ml-lojas-icones{display:flex;align-items:center;gap:10px; padding-right:16px;border-right:1px solid rgba(255,255,255,.12)} .ml-ic-play{width:21px;height:21px;flex:0 0 auto} .ml-ic-apple{width:19px;height:19px;flex:0 0 auto} .ml-lojas-txt{display:flex;flex-direction:column;line-height:1.25;text-align:left} .ml-lojas-txt small{font-size:10.5px;font-weight:700;letter-spacing:.13em; text-transform:uppercase;color:rgba(255,255,255,.45)} .ml-lojas-txt strong{font-size:15.5px;font-weight:800;color:#fff} /* --- fecho da coluna --- */ .ml-final .ml-assinatura{max-width:none;margin:38px 0 0;font-size:16.5px; font-weight:700;letter-spacing:-.008em;color:rgba(11,11,13,.66);text-align:left} .ml-final .ml-regiao{max-width:none;margin:10px 0 0;font-size:11.5px; font-weight:800;letter-spacing:.18em;text-transform:uppercase; color:rgba(11,11,13,.44);text-align:left} /* ----------------------------------------------------------------- PAINEL DA EXPANSAO Nao e mais um cartao centralizado no meio da seccao: ocupa a coluna da direita e se apoia na grade. O mapa desenhado atras do texto poe o assunto do painel dentro do proprio painel. A sombra e em tres camadas — contato, corpo e ambiente. Uma sombra unica e dura cola o retangulo no fundo; tres camadas fazem ele flutuar. ----------------------------------------------------------------- */ .ml-cidade{position:relative;overflow:hidden;border-radius:26px; padding:44px 42px;min-width:0; background:linear-gradient(158deg,#1b1c22 0%,#0B0B0D 72%); box-shadow:0 2px 4px rgba(11,11,13,.12),0 18px 40px rgba(11,11,13,.2), 0 48px 90px rgba(11,11,13,.26), inset 0 1px 0 rgba(255,255,255,.08)} .ml-cidade-mapa{position:absolute;inset:0;width:100%;height:100%; pointer-events:none; /* some no rodape do painel para nao competir com o botao */ -webkit-mask-image:linear-gradient(200deg,#000 12%,transparent 76%); mask-image:linear-gradient(200deg,#000 12%,transparent 76%)} .ml-cidade-txt{position:relative} .ml-cidade .ml-expansao-rot{display:block;font-size:11px;font-weight:800; letter-spacing:.2em;text-transform:uppercase;color:var(--amarelo); margin:0 0 14px} .ml-cidade h3{margin:0 0 14px;font-size:clamp(22px,2.6vw,28px);font-weight:900; line-height:1.14;letter-spacing:-.024em;color:#fff} .ml-cidade p{max-width:none;margin:0 0 28px;font-size:15.5px;line-height:1.68; font-weight:400;color:rgba(255,255,255,.66);text-align:left} .ml-final .ml-btn-amarelo{display:inline-flex;align-items:center;gap:9px; padding:14px 26px;border-radius:14px;text-decoration:none; background:var(--amarelo);color:#0B0B0D !important; font-weight:800;font-size:15px;border:0; transition:transform .2s ease, box-shadow .2s ease, background .2s ease} .ml-final .ml-btn-amarelo svg{width:16px;height:16px;flex:0 0 auto; transition:transform .2s ease} .ml-final .ml-btn-amarelo:hover{background:#fff;transform:translateY(-1px); box-shadow:0 12px 28px rgba(0,0,0,.34)} .ml-final .ml-btn-amarelo:hover svg{transform:translateX(3px)} .ml-final-arte{position:relative;margin-top:64px} /* Uma coluna antes de as duas ficarem estreitas demais para o titulo grande da esquerda e o paragrafo da direita conviverem. */ @media (max-width:980px){ .ml-final .ml-final-grid{grid-template-columns:1fr;gap:44px} .ml-final .ml-final-lead{max-width:none} } @media (max-width:620px){ .ml-final{padding:74px 0 66px} .ml-final h2{letter-spacing:-.03em} .ml-cidade{padding:32px 24px;border-radius:20px} .ml-lojas-selo{padding:13px 20px 13px 16px;gap:13px} .ml-lojas-icones{padding-right:13px} } /* ================================================================= FAIXAS DO MEIO — alinhadas a grade, nao a borda da tela As duas pecas do meio ("VA DE MELEVA!" e a do motorista) sangravam ate a borda da janela enquanto todo o resto da pagina para em 1120px. Elas passam a usar exatamente a mesma caixa do .ml-container — mesma largura maxima, mesmo respiro lateral de 20px —, entao a borda da arte cai na mesma linha vertical onde comecam os titulos e os cartoes acima e abaixo dela. A faixa DO TOPO continua sangrando de proposito: la o objetivo e ocupar a tela inteira antes de a pagina comecar. Por isso a regra e .ml-faixa-larga, e nao .ml-faixa. Deixar de sangrar transforma a faixa de "banda" em "bloco". Bloco com canto vivo boiando num fundo quase preto parece imagem que nao carregou direito, entao ela recebe o mesmo raio de 18px e o mesmo fio de contorno que os outros blocos de imagem da pagina ja usam. Sem isso o alinhamento fica certo e o acabamento fica errado. ================================================================= */ .ml-faixa-larga{max-width:1120px;margin:0 auto;padding:0 20px; background:transparent} .ml-faixa-larga .ml-img{border-radius:18px;overflow:hidden; border:1px solid rgba(255,255,255,.08)} /* ================================================================= BASE E BARRA DO TOPO — vindas do cabeçalho do Firestore Estas regras moravam num campo de HTML em settings/headerTemplate, que o navegador buscava e injetava com innerHTML depois de a página carregar. Só que não era só o menu que estava lá dentro: `body`, `.ml-container`, `.ml-btn` e as variáveis de cor também. A grade e os botões da página inteira dependiam de uma requisição de rede. Quando ela falhava, a página aparecia sem grade, sem cor e sem botão — e não havia como perceber isso lendo o CSS, porque o CSS que faltava não estava em lugar nenhum do projeto. Agora estão aqui, num arquivo servido junto com a página. As variáveis de cor (`:root`) já tinham sido duplicadas no topo deste arquivo justamente como rede de segurança para essa falha. Continuam lá; estas são as que faltavam. ================================================================= */ *{box-sizing:border-box} body{margin:0;background:var(--preto);color:#fff; font-family:'Urbanist','Nunito',system-ui,-apple-system,'Segoe UI',sans-serif; -webkit-font-smoothing:antialiased} img{max-width:100%;height:auto;display:block} a{text-decoration:none} .ml-container{max-width:1120px;margin:0 auto;padding:0 20px} /* ================================================================= BARRA DO TOPO — acabamento TRÊS DEFEITOS CORRIGIDOS AQUI 1. O NOME DA MARCA SAÍA VERMELHO. O `style.css` do pacote GoRide declara `a { color: rgb(226,55,68) }`, e `.ml-marca` é um que nunca declarou cor própria — herdava o vermelho do pacote. Vinha assim desde o cabeçalho antigo. Sempre que um elemento desta página for , ele precisa dizer a própria cor; herdar aqui é herdar do pacote, não do projeto. 2. O LOGOTIPO VIRAVA BORRÃO. Arte de 1024 px servida a 46 px, sem largura declarada. Agora vai a 52 px com width/height no HTML, o que também impede a barra de saltar enquanto ela carrega. 3. SOBRAVAM 583 px DE VAZIO NO MEIO. Com apenas dois links, jogar a navegação toda para a direita deixa um buraco preto no centro da barra — é o que dá o aspecto de inacabado. A disposição passa a ser em três colunas, com a navegação centrada. ================================================================= */ /* A barra fixa. Com o fundo a 94% e o desfoque atras, o conteudo passa por baixo dela sem sumir e sem competir com o menu. */ .ml-topo{position:sticky;top:0;z-index:50;background:rgba(11,11,13,.94); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); border-bottom:1px solid var(--linha)} /* O BOTAO AMARELO DE TODO O SITE. Nao e so do cabecalho: e a classe que os herois, as seccoes e o fecho usam. Caiu junto quando o bloco antigo da barra foi substituido, e passou despercebido porque `.ml-acoes .ml-btn` existe noutro ponto do arquivo. */ .ml-btn{display:inline-block;background:var(--amarelo);color:#0B0B0D !important; font-weight:800;padding:11px 20px;border-radius:30px;font-size:14px; transition:transform .12s ease,box-shadow .12s ease} .ml-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(255,204,0,.34)} /* O de contorno, para a acao secundaria ao lado da principal. */ .ml-btn-linha{background:transparent;color:var(--amarelo) !important; border:2px solid var(--amarelo)} .ml-btn-linha:hover{background:var(--amarelo);color:#0B0B0D !important} .ml-topo-in{display:grid;grid-template-columns:1fr auto 1fr; align-items:center;gap:20px;padding-top:11px;padding-bottom:11px} /* --- a marca --- */ .ml-marca{display:flex;align-items:center;gap:12px;color:#fff;justify-self:start} .ml-marca img{height:52px;width:52px;object-fit:contain;flex:0 0 auto} .ml-marca-txt{display:flex;flex-direction:column;gap:2px;line-height:1.1} /* A cor declarada explicitamente. Ver o defeito 1 no topo do bloco. */ .ml-marca-txt b{font-weight:800;font-size:16px;letter-spacing:-.012em;color:#fff} .ml-marca-txt small{font-weight:700;font-size:10px;letter-spacing:.15em; text-transform:uppercase;color:var(--amarelo);opacity:.9} /* --- a navegação, ao centro --- */ .ml-topo nav{display:flex;align-items:center;gap:30px;justify-self:center} .ml-topo nav a{position:relative;color:#d7d7db;font-weight:600;font-size:14.5px; letter-spacing:.005em;padding:6px 0;transition:color .18s ease} .ml-topo nav a:hover{color:#fff} /* O sublinhado cresce do centro no hover em vez de aparecer inteiro. É a diferença entre um estado ligado/desligado e um movimento. */ .ml-topo nav a::after{content:"";position:absolute;left:50%;right:50%;bottom:0; height:2px;border-radius:2px;background:var(--amarelo); transition:left .2s ease,right .2s ease} .ml-topo nav a:hover::after{left:0;right:0} .ml-topo nav a.on{color:#fff} .ml-topo nav a.on::after{left:0;right:0} /* --- a ação --- */ .ml-topo-fim{display:flex;align-items:center;gap:12px;justify-self:end} .ml-topo-cta{padding:11px 22px;font-size:14px;letter-spacing:-.005em} .ml-menu-btn{display:none;flex-direction:column;justify-content:center;gap:5px; width:42px;height:40px;padding:0 9px;cursor:pointer; background:transparent;border:1px solid var(--linha);border-radius:11px} .ml-menu-btn span{display:block;height:2px;width:100%;border-radius:2px; background:var(--amarelo);transition:opacity .2s ease} .ml-menu-btn[aria-expanded="true"] span:nth-child(2){opacity:.25} /* ----------------------------------------------------------------- O CELULAR A navegação vira gaveta; a ação NÃO entra na gaveta. Botão de conversão escondido atrás de um sanduíche é botão que ninguém toca. ----------------------------------------------------------------- */ @media(max-width:860px){ .ml-topo-in{grid-template-columns:auto auto;justify-content:space-between;gap:12px} .ml-menu-btn{display:flex} .ml-marca img{height:42px;width:42px} .ml-marca-txt b{font-size:14.5px} .ml-marca-txt small{font-size:9px;letter-spacing:.12em} .ml-topo nav{position:absolute;left:0;right:0;top:100%; display:none;flex-direction:column;align-items:stretch;gap:0; padding:6px 20px 14px;justify-self:stretch; background:rgba(11,11,13,.985);border-bottom:1px solid var(--linha); box-shadow:0 22px 44px rgba(0,0,0,.5)} .ml-topo nav.aberto{display:flex} .ml-topo nav a{padding:15px 2px;font-size:15.5px; border-bottom:1px solid rgba(255,255,255,.07)} .ml-topo nav a::after{display:none} .ml-topo nav a.on{padding-left:11px;border-left:3px solid var(--amarelo)} .ml-topo-cta{padding:10px 16px;font-size:13.5px} } /* Abaixo de 420 px o lema não cabe junto da ação sem apertar as duas. Some ele: o nome da marca sozinho já identifica. */ @media(max-width:420px){ .ml-marca-txt small{display:none} .ml-marca img{height:38px;width:38px} } /* ================================================================= CABEÇALHO DAS PÁGINAS INTERNAS A home abre com `.ml-hero`, que é uma grade de duas colunas com a maquete do telefone ao lado. Aqui isso não serve: /motoristas e /passageiros já chegam com o assunto definido — quem clicou em "Motoristas" não precisa ser convencido de que o site é de mobilidade, precisa da informação. Então é uma coluna só, centrada, com o título grande e um par de botões. O `

` é da página, não da marca: cada página tem o seu, e é isso que o Google usa para diferenciar as três. ================================================================= */ .ml-topopag{padding:74px 0 62px;position:relative;overflow:hidden; text-align:center; background:radial-gradient(760px 320px at 50% -12%,rgba(255,204,0,.11),transparent 68%), var(--preto); border-bottom:1px solid var(--linha)} .ml-topopag-rot{display:inline-block;margin-bottom:18px; padding:7px 15px;border-radius:99px; border:1px solid var(--linha);background:rgba(255,204,0,.06); font-size:11.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase; color:var(--amarelo)} .ml-topopag h1{margin:0 auto 18px;max-width:15ch; font-size:clamp(32px,5.2vw,54px);font-weight:900;line-height:1.04; letter-spacing:-.035em;color:#fff} .ml-topopag p{margin:0 auto 32px;max-width:620px; font-size:17.5px;line-height:1.62;font-weight:400;color:rgba(255,255,255,.7)} .ml-topopag .ml-acoes{justify-content:center;margin:0} .ml-topopag .ml-confia{justify-content:center;margin-top:28px} /* O fecho das páginas internas é sóbrio de propósito: o amarelo do fecho da home é o ponto alto do site, e repeti-lo em toda página gastaria o efeito. */ .ml-fechopag{text-align:center; background:linear-gradient(180deg,transparent,rgba(255,204,0,.045))} .ml-fechopag .ml-cab{margin-bottom:30px} .ml-fechopag .ml-acoes{justify-content:center} @media(max-width:620px){ .ml-topopag{padding:52px 0 46px} .ml-topopag h1{max-width:none} } /* ================================================================= ABERTURA DAS PÁGINAS INTERNAS — refeita O QUE ESTAVA ERRADO Pílula centralizada, título centralizado, parágrafo centralizado, dois botões centralizados e, embaixo, a arte solta numa faixa própria. Cinco blocos no mesmo eixo, um depois do outro. É o layout padrão de slide, e foi por isso que pareceu feito no PowerPoint. E a arte tinha sido encomendada com os dois terços da esquerda limpos justamente para receber o texto por cima. Pôr o texto acima dela desperdiçou a única coisa que a peça foi feita para fazer. COMO FICA A arte vira o fundo da abertura e o texto se apoia no vazio dela, alinhado à esquerda. Um véu escuro em degradê horizontal garante o contraste: sem ele, o texto dependeria da arte, e trocar a imagem pelo painel poderia deixar a página ilegível sem ninguém perceber. O véu é assimétrico de propósito — opaco à esquerda, transparente à direita — para não apagar o motorista nem o carro. ================================================================= */ .ml-heropag{position:relative;display:flex;align-items:center; min-height:clamp(430px,44vw,560px);overflow:hidden; background:var(--preto);border-bottom:1px solid var(--linha)} .ml-heropag-arte{position:absolute;inset:0;line-height:0} .ml-heropag-arte img{width:100%;height:100%;object-fit:cover; /* 76% mantém o assunto (que fica à direita da arte) dentro do corte em telas largas, sem espremer o vazio onde o texto se apoia. */ object-position:76% center} .ml-heropag-arte::after{content:"";position:absolute;inset:0; background: linear-gradient(90deg,#0B0B0D 0%,rgba(11,11,13,.96) 30%, rgba(11,11,13,.80) 52%,rgba(11,11,13,.10) 80%,transparent 100%), /* segundo véu, vertical e fraco: assenta o topo sob a barra fixa e fecha a base contra a seção seguinte */ linear-gradient(180deg,rgba(11,11,13,.55),transparent 32%,transparent 74%,rgba(11,11,13,.5))} /* Sem arte cadastrada a abertura não pode virar um retângulo preto vazio: o brilho radial assume o lugar da imagem. */ .ml-heropag:not(:has(.ml-heropag-arte)){ background:radial-gradient(820px 340px at 22% 0%,rgba(255,204,0,.13),transparent 66%),var(--preto); min-height:auto} .ml-heropag .ml-container{position:relative;width:100%} .ml-heropag-txt{max-width:560px;text-align:left;padding:64px 0} .ml-heropag .ml-topopag-rot{margin-bottom:20px} .ml-heropag h1{margin:0 0 18px;max-width:none; font-size:clamp(34px,4.8vw,56px);font-weight:900;line-height:1.02; letter-spacing:-.038em;color:#fff; /* a sombra não é enfeite: é o que segura o contraste quando alguém trocar a arte no painel por uma mais clara */ text-shadow:0 2px 24px rgba(0,0,0,.55)} .ml-heropag p{margin:0 0 32px;max-width:490px; font-size:17.5px;line-height:1.62;font-weight:400;color:rgba(255,255,255,.76); text-shadow:0 1px 14px rgba(0,0,0,.5)} .ml-heropag .ml-acoes{justify-content:flex-start;margin:0} .ml-heropag .ml-confia{justify-content:flex-start;margin-top:30px} /* ----------------------------------------------------------------- NO CELULAR A SOBREPOSIÇÃO SAI Numa tela de 375 px o corte da arte traz o assunto para o meio, e o texto cairia em cima do rosto. Aqui a arte vira uma faixa no topo e o texto desce para o preto — empilhado, mas empilhado de propósito, que é o padrão de qualquer site sério no telefone. ----------------------------------------------------------------- */ @media(max-width:860px){ .ml-heropag{display:block;min-height:0} .ml-heropag-arte{position:relative;inset:auto;aspect-ratio:16/10} .ml-heropag-arte img{object-position:72% center} .ml-heropag-arte::after{ background:linear-gradient(180deg,rgba(11,11,13,.4),transparent 34%, rgba(11,11,13,.35) 76%,var(--preto) 100%)} .ml-heropag-txt{padding:30px 0 48px;max-width:none} .ml-heropag h1,.ml-heropag p{text-shadow:none} .ml-heropag p{max-width:none} } /* ================================================================= FECHO DAS PÁGINAS INTERNAS — refeito Era outro bloco centralizado: título, parágrafo, botão, um debaixo do outro. Vira um painel com a fala à esquerda e a ação à direita, que é como a decisão realmente se apresenta — o texto convence, o botão fica onde a mão vai. ================================================================= */ .ml-fechopag{padding:78px 0 84px;text-align:left; background:linear-gradient(180deg,transparent,rgba(255,204,0,.04))} .ml-fechopag-painel{position:relative;overflow:hidden; display:grid;grid-template-columns:1fr auto;align-items:center;gap:44px; padding:44px 48px;border-radius:24px; background:linear-gradient(150deg,#17181d 0%,#0B0B0D 76%); border:1px solid rgba(255,204,0,.16); box-shadow:0 2px 4px rgba(0,0,0,.24),0 20px 46px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.06)} /* Brilho no canto, para o painel não ser um retângulo chapado. */ .ml-fechopag-painel::before{content:"";position:absolute; width:420px;height:420px;top:-240px;right:-120px;border-radius:50%; background:radial-gradient(circle,rgba(255,204,0,.16),transparent 66%); pointer-events:none} .ml-fechopag-txt{position:relative;min-width:0} .ml-fechopag h2{margin:0 0 12px;font-size:clamp(24px,3vw,32px);font-weight:900; line-height:1.1;letter-spacing:-.028em;color:#fff} .ml-fechopag p{margin:0;max-width:520px;font-size:16px;line-height:1.65; font-weight:400;color:rgba(255,255,255,.66)} .ml-fechopag .ml-acoes{position:relative;margin:0;justify-content:flex-end; flex:0 0 auto} @media(max-width:860px){ .ml-fechopag{padding:58px 0 64px} .ml-fechopag-painel{grid-template-columns:1fr;gap:28px;padding:32px 26px} .ml-fechopag .ml-acoes{justify-content:flex-start} .ml-fechopag p{max-width:none} } /* ================================================================= RODAPÉ Três faixas: o bloco preto com as colunas, a barra de confiança um degrau mais clara, e a linha legal centrada. QUATRO DEFEITOS CORRIGIDOS AQUI, TODOS VISTOS EM FOTO DA PÁGINA: 1. A ilustração da estrada estava em `position:absolute` dentro de uma coluna de altura variável, e passava por cima do parágrafo — um alfinete cobria uma palavra. Saiu inteira. 2. O logotipo estava centrado e o parágrafo à esquerda, na mesma coluna. Dois eixos disputando. Agora os dois começam na mesma linha vertical. 3. "Para motoristas" quebrava em duas linhas enquanto os outros títulos ficavam em uma, o que punha os riscos amarelos em alturas diferentes. Corpo menor, entreletra menor e `nowrap`. 4. As divisórias verticais acompanhavam a altura de cada coluna, e por isso tinham comprimentos diferentes. Agora a grade estica todas as células, e as linhas ficam do mesmo tamanho. ================================================================= */ .ml-rodape{background:#0A0A0C} .ml-rodape-faixa{height:6px;background:var(--amarelo)} .ml-rodape-topo{padding:54px 0 50px} /* `stretch` é o que iguala as divisórias: sem ele cada célula tem a altura do próprio conteúdo e a borda esquerda acompanha. */ .ml-rodape-grade{display:grid; grid-template-columns:1.25fr 1fr 1fr 1.1fr;gap:0;align-items:stretch} .ml-rodape-grade>*{padding:0 34px; border-left:1px solid rgba(255,255,255,.08)} .ml-rodape-grade>*:first-child{padding-left:0;border-left:0} .ml-rodape-grade>*:last-child{padding-right:0} /* --- marca --- */ .ml-rodape-marca img{width:168px;height:auto;display:block} .ml-rodape-marca p{margin:20px 0 0;max-width:280px; font-size:14.5px;line-height:1.62;color:rgba(255,255,255,.6)} /* --- títulos de coluna --- */ .ml-rodape-col h5, .ml-rodape-lado h5{display:flex;align-items:center;gap:8px; margin:0 0 24px;padding-bottom:11px;position:relative; font-size:13px;font-weight:800;letter-spacing:.035em; text-transform:uppercase;color:var(--amarelo); white-space:nowrap} .ml-rodape-col h5 svg{width:18px;height:18px;flex:0 0 auto} .ml-rodape-col h5::after, .ml-rodape-lado h5::after{content:"";position:absolute;left:0;bottom:0; width:30px;height:2px;border-radius:2px;background:var(--amarelo)} /* A etiqueta "em breve" fica no próprio título, e não numa caixa solta embaixo dos selos: assim ela qualifica o bloco antes de a pessoa ler os selos e achar que pode clicar. */ .ml-rodape-lado h5 em{font-style:normal;font-size:10px;font-weight:800; letter-spacing:.1em;padding:3px 8px;border-radius:99px; background:rgba(255,204,0,.14);color:var(--amarelo)} .ml-rodape-lado .ml-rodape-h5-2{margin-top:30px} /* --- itens --- */ .ml-rodape-col ul{margin:0;padding:0;list-style:none; display:flex;flex-direction:column;gap:14px} .ml-rodape-col a{display:flex;align-items:center;gap:10px; font-size:14.5px;font-weight:500;line-height:1.25; color:rgba(255,255,255,.8);transition:color .16s ease} .ml-rodape-col a svg{width:17px;height:17px;flex:0 0 auto; color:rgba(255,255,255,.4);transition:color .16s ease} .ml-rodape-col a:hover, .ml-rodape-col a:hover svg{color:var(--amarelo)} /* --- redes --- */ .ml-redes{display:flex;flex-wrap:wrap;gap:12px} .ml-redes a{display:flex;align-items:center;justify-content:center; width:44px;height:44px;border-radius:50%; border:1.5px solid rgba(255,204,0,.5);color:var(--amarelo); transition:background .18s ease,color .18s ease,transform .18s ease} .ml-redes a:hover{background:var(--amarelo);color:#0B0B0D;transform:translateY(-2px)} .ml-redes svg{width:20px;height:20px} /* --- selos das lojas --- */ /* Sempre desenhados. Sem link, ficam apagados e sem cursor de clique — parece decisão. A caixa tracejada de antes parecia defeito. */ .ml-selos{display:flex;flex-direction:column;gap:10px;max-width:214px} .ml-selo{display:flex;align-items:center;gap:12px; padding:10px 18px;border-radius:11px; background:#000;border:1px solid rgba(255,255,255,.2); transition:border-color .18s ease,transform .18s ease} a.ml-selo:hover{border-color:var(--amarelo);transform:translateY(-1px)} .ml-selo svg{width:24px;height:24px;flex:0 0 auto} .ml-selo span{display:flex;flex-direction:column;line-height:1.18} .ml-selo small{font-size:9.5px;font-weight:600;letter-spacing:.05em; text-transform:uppercase;color:rgba(255,255,255,.58)} .ml-selo strong{font-size:15px;font-weight:700;color:#fff} .ml-selos-off{opacity:.42;filter:saturate(.35)} .ml-selos-off .ml-selo{cursor:default} /* --- barra de confiança --- */ .ml-rodape-confia{background:#15161A;border-top:1px solid rgba(255,255,255,.06)} .ml-rodape-confia .ml-container{display:grid; grid-template-columns:repeat(3,1fr);gap:0; padding-top:24px;padding-bottom:24px} .ml-confia-item{display:flex;align-items:center;gap:14px;padding:0 30px; border-left:1px solid rgba(255,255,255,.08)} .ml-confia-item:first-child{padding-left:0;border-left:0} .ml-confia-item:last-child{padding-right:0} .ml-confia-item svg{width:32px;height:32px;flex:0 0 auto;color:var(--amarelo)} .ml-confia-item div{display:flex;flex-direction:column;gap:3px;min-width:0} .ml-confia-item b{font-size:14px;font-weight:800;color:#fff} .ml-confia-item span{font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.52)} /* --- linha legal --- */ .ml-rodape-legal{background:#08080A;border-top:1px solid rgba(255,255,255,.06)} .ml-rodape-legal .ml-container{display:flex;flex-wrap:wrap; align-items:center;justify-content:center;gap:4px; padding-top:18px;padding-bottom:18px; font-size:13px;color:rgba(255,255,255,.42)} .ml-rodape-legal a{color:rgba(255,255,255,.62);transition:color .16s ease} .ml-rodape-legal a:hover{color:var(--amarelo)} .ml-rodape-legal i{font-style:normal;padding:0 9px;color:rgba(255,255,255,.18)} /* ----------------------------------------------------------------- TELAS MENORES ----------------------------------------------------------------- */ @media(max-width:1000px){ .ml-rodape-grade{grid-template-columns:1fr 1fr;row-gap:40px} .ml-rodape-grade>*{padding:0;border-left:0} .ml-rodape-grade>*:nth-child(even){padding-left:30px; border-left:1px solid rgba(255,255,255,.08)} .ml-rodape-marca{grid-column:1 / -1} .ml-rodape-confia .ml-container{grid-template-columns:1fr;gap:18px} .ml-confia-item{padding:0;border-left:0} } @media(max-width:620px){ .ml-rodape-topo{padding:38px 0 36px} .ml-rodape-grade{grid-template-columns:1fr;row-gap:32px} .ml-rodape-grade>*:nth-child(even){padding-left:0;border-left:0} .ml-rodape-marca img{width:144px} .ml-rodape-marca p{max-width:none} .ml-selos{max-width:none} .ml-rodape-legal i{padding:0 6px} } /* ================================================================= COLUNA DAS REDES E DAS LOJAS — corrigida contra a referência Comparando lado a lado, tudo aqui estava pequeno demais: título 13 px fino -> 19 px, peso 800 risco 30x2 -> 58x4 círculo 44 px -> 56 px, anel de 2 px selo ~44 px alto -> 66 px, largura da coluna "Google Play" 15 px em caixa alta -> 20 px, caixa de título E os selos estavam com `opacity:.42` mais `saturate(.35)`. A ideia era dizer "ainda não"; o efeito foi parecerem quebrados. Agora ficam com a cor cheia e só não são clicáveis — quem diz "ainda não" é a etiqueta, que é para isso que ela existe. Entre as redes e as lojas entra uma régua. São dois assuntos diferentes na mesma coluna, e sem ela viram uma pilha só. ================================================================= */ /* A coluna precisa caber quatro círculos de 56 com vão de 12: 4x56 + 3x12 = 260 px. */ .ml-rodape-grade{grid-template-columns:1.2fr .95fr .95fr 1.4fr} .ml-rodape-lado h5{display:block;white-space:normal; margin:0 0 20px;padding-bottom:14px; font-size:19px;font-weight:800;letter-spacing:.005em;line-height:1.15; text-transform:uppercase;color:var(--amarelo)} .ml-rodape-lado h5::after{width:58px;height:4px;border-radius:3px} .ml-rodape-lado h5 span{display:inline} /* A etiqueta desce para a linha de baixo do título: espremida ao lado dele, ela empurrava o texto e deixava o bloco torto. */ .ml-rodape-lado h5 em{display:inline-block;vertical-align:middle; margin-left:10px;font-style:normal; font-size:10.5px;font-weight:800;letter-spacing:.11em; padding:4px 10px;border-radius:99px; background:rgba(255,204,0,.16);color:var(--amarelo)} /* --- redes --- */ .ml-redes{display:flex;flex-wrap:wrap;gap:12px} .ml-redes a{width:56px;height:56px;border-radius:50%; border:2px solid var(--amarelo);color:var(--amarelo); display:flex;align-items:center;justify-content:center; transition:background .18s ease,color .18s ease,transform .18s ease} .ml-redes a:hover{background:var(--amarelo);color:#0B0B0D;transform:translateY(-2px)} .ml-redes svg{width:25px;height:25px} /* A régua que separa os dois assuntos da coluna. */ .ml-rodape-lado .ml-rodape-h5-2{margin-top:0;padding-top:32px; border-top:1px solid rgba(255,255,255,.12)} .ml-rodape-lado .ml-rodape-h5-2::after{bottom:0} /* --- selos das lojas --- */ .ml-selos{display:flex;flex-direction:column;gap:12px;max-width:none} .ml-selo{display:flex;align-items:center;gap:14px; padding:12px 20px;min-height:66px;border-radius:10px; background:#000;border:1px solid rgba(255,255,255,.34); transition:border-color .18s ease,transform .18s ease} a.ml-selo:hover{border-color:var(--amarelo);transform:translateY(-1px)} .ml-selo svg{width:34px;height:34px;flex:0 0 auto} .ml-selo span{display:flex;flex-direction:column;line-height:1.15;min-width:0} .ml-selo small{font-size:11px;font-weight:600;letter-spacing:.045em; text-transform:uppercase;color:rgba(255,255,255,.78)} /* `text-transform:none` explícito: alguma regra do pacote deixava o nome da loja em caixa alta, e "GOOGLE PLAY" não é como a marca se escreve. */ .ml-selo strong{font-size:20px;font-weight:600;color:#fff; text-transform:none;letter-spacing:-.01em;white-space:nowrap} /* Sem link, os selos perdem só o clique. A cor fica: apagar a cor foi o que os fez parecer defeito em vez de aviso. */ .ml-selos-off{filter:none;opacity:1} .ml-selos-off .ml-selo{cursor:default;border-color:rgba(255,255,255,.2)} .ml-selos-off .ml-selo strong{color:rgba(255,255,255,.82)} @media(max-width:1000px){ .ml-rodape-grade{grid-template-columns:1fr 1fr} } @media(max-width:620px){ .ml-rodape-lado h5{font-size:17px} .ml-redes a{width:52px;height:52px} .ml-selo{min-height:62px} .ml-selo strong{font-size:18px} } /* ================================================================= TÍTULOS DAS COLUNAS — um tamanho só Ficaram dois: 13 px nas colunas de links e 19 px na coluna das redes, porque corrigi uma e esqueci as outras. Dois tamanhos de título no mesmo bloco é o tipo de coisa que ninguém sabe nomear mas todo mundo percebe. O risco amarelo também: eram 30x2 de um lado e 58x4 do outro. ================================================================= */ .ml-rodape-col h5{font-size:19px;font-weight:800;letter-spacing:.005em; line-height:1.15;gap:9px;margin:0 0 20px;padding-bottom:14px} .ml-rodape-col h5 svg{width:21px;height:21px} .ml-rodape-col h5::after{width:58px;height:4px;border-radius:3px} /* Com o título maior, os itens sobem meio ponto para o bloco não ficar com a cabeça grande e o corpo miúdo. */ .ml-rodape-col a{font-size:15px} .ml-rodape-col a svg{width:18px;height:18px} .ml-rodape-col ul{gap:15px} @media(max-width:620px){ .ml-rodape-col h5{font-size:17px} } /* ================================================================= LARGURA DAS COLUNAS — calculada, não estimada Medido na página: as colunas de links tinham 160 px de conteúdo e o maior rótulo ("Seja um motorista") precisa de 152. Oito pixels de folga. "Comissão e ganhos" estourou e quebrou em duas linhas, e uma lista com um item de duas linhas perde o ritmo que as outras três estabelecem. Proporções novas, para 1 fr valer ~179 px de conteúdo: marca 1.34 · links 1 · links 1 · lojas 1.86 O respiro entre colunas cai de 34 para 30: são 20 px devolvidos ao texto sem que ninguém perceba a diferença no vão. ================================================================= */ .ml-rodape-grade{grid-template-columns:1.34fr 1fr 1fr 1.86fr} .ml-rodape-grade>*{padding:0 30px} .ml-rodape-grade>*:first-child{padding-left:0} .ml-rodape-grade>*:last-child{padding-right:0} /* Rótulo de link não quebra: se um dia um texto novo não couber, é melhor que ele apareça cortado no teste do que quebre a lista inteira sem ninguém notar. */ .ml-rodape-col a span{white-space:nowrap} @media(max-width:1000px){ .ml-rodape-grade{grid-template-columns:1fr 1fr} .ml-rodape-grade>*{padding:0} .ml-rodape-grade>*:nth-child(even){padding-left:30px} .ml-rodape-col a span{white-space:normal} } /* ================================================================= ÍCONES OFICIAIS Os traçados que eu tinha desenhado à mão dentro do Blade saíram. Agora são os arquivos de /images/icones/, os logotipos verdadeiros de cada marca — logotipo redesenhado a olho nunca fica igual. COMO O HOVER FUNCIONA COM Com o SVG embutido, o hover trocava `fill`. Com não dá: o conteúdo do arquivo é opaco para o CSS da página. `brightness(0)` resolve — leva qualquer cor a preto, que é exatamente o que se quer quando o círculo fica amarelo por baixo. O caminho alternativo seria embutir os sete SVG na página. Não vale: são arquivos do CorelDRAW com