/* Craft + ONM — variante v3 (craft.onovomercado.app/v3/) Autocontida de propósito: é teste A/B e a paleta é outra (magenta + creme), então nada aqui importa shared/tokens.css nem os arquivos da v1. O layout de cada seção fica inline no index.html (como saiu do Claude Design); aqui mora o que se repete ou depende de estado. */ :root { /* Cores da v3 — extraídas do design "v3", não da marca azul */ --c-navy-900: #050f2a; /* fundo base */ --c-navy-700: #14244f; /* superfícies elevadas e gradientes */ --c-magenta: #e8114b; /* ação primária e destaques */ --c-cream: #f5e6c8; /* títulos de seção */ --c-fog: #dfeaf8; /* texto de corpo (e fundo da seção clara) */ --c-white: #ffffff; /* Derivados com alpha — a v3 usa hairlines derivadas do fog */ --c-hairline: rgba(223, 234, 248, 0.14); --c-hairline-strong: rgba(223, 234, 248, 0.18); --c-surface: rgba(20, 36, 79, 0.5); --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; --pad-section: clamp(96px, 11vw, 150px); --maxw: 1240px; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); } /* ---------- Base ---------- */ body { margin: 0; background: var(--c-navy-900); color: var(--c-fog); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; } *, *::before, *::after { box-sizing: border-box; } a { color: var(--c-fog); } a:hover { color: var(--c-white); } /* height:auto impede que os atributos width/height intrínsecos (anti-CLS) deformem a foto quando o CSS força width:100%. Onde a imagem precisa preencher a altura do container (cards de mentor, prova social, galeria, marquees), o style inline ou uma regra mais específica vence esta. */ img { max-width: 100%; height: auto; } input { font-family: var(--font-sans); } :focus-visible { outline: 2px solid var(--c-magenta); outline-offset: 2px; } .skip { position: absolute; left: -9999px; z-index: 200; padding: 12px 20px; border-radius: 0 0 12px 0; background: var(--c-magenta); color: var(--c-white); font-weight: 700; text-decoration: none; } .skip:focus { left: 0; top: 0; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---------- Animações ---------- */ @keyframes mq-left { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes mq-right { from { transform: translateX(-50%); } to { transform: translateX(0); } } @keyframes mq-up { from { transform: translateY(0); } to { transform: translateY(-50%); } } @keyframes mq-down { from { transform: translateY(-50%); } to { transform: translateY(0); } } @keyframes glow { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.85; } } @keyframes rv { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } } @keyframes pulse { 0%, 100% { box-shadow: 0 12px 44px rgba(232, 17, 75, 0.4); } 50% { box-shadow: 0 18px 64px rgba(232, 17, 75, 0.7); } } /* Entrada do hero: dispara no load, não no scroll. */ .hi { animation: rv 0.9s var(--ease-out) both; } .pulse { animation: pulse 3.2s ease-in-out infinite; } /* Reveal no scroll via scroll-driven animations — sem JS. Onde não houver suporte o conteúdo aparece estático; nunca fica invisível. */ /* Dois caminhos para o mesmo efeito, e a classe .js-rv decide qual vale. Sem .js-rv — navegador com scroll-driven animation (Chrome, Edge): a animacao roda no compositor, atrelada ao scroll, sem JS nenhum. Com .js-rv — Safari/iOS e qualquer um sem suporte: o script do liga a classe e o IntersectionObserver adiciona .rv-visivel na entrada. A classe so e ligada quando o JS vai de fato animar, entao sem JS nada fica invisivel. E como o CSS nao consulta @supports, da para exercitar o caminho do Safari em qualquer navegador ligando a classe na mao. */ @supports (animation-timeline: view()) { html:not(.js-rv) [data-rv] { animation: rv 0.9s var(--ease-out) both; animation-timeline: view(); animation-range: entry 0% entry 42%; } } .js-rv [data-rv] { opacity: 0; transform: translateY(34px); } .js-rv [data-rv].rv-visivel { animation: rv 0.9s var(--ease-out) both; } /* Marquees rodam sem parar: avisar o compositor evita repaint por frame, que e de onde vem o travamento no celular. */ .mq-anim { will-change: transform; backface-visibility: hidden; } .mq-pause:hover .mq-anim { animation-play-state: paused; } /* Marquee do topo: o design roda 30s no desktop e 1.7x mais devagar no mobile (matchMedia). Media query entrega o mesmo sem JS. */ .topbar-anim { animation: mq-left 30s linear infinite; } @media (max-width: 768px) { .topbar-anim { animation-duration: 51s; } } /* ---------- Botões (todos os CTAs abrem o modal via data-open-form) ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--c-magenta); color: var(--c-white); font-family: var(--font-sans); font-weight: 700; border: none; border-radius: 999px; cursor: pointer; text-decoration: none; transition: transform 0.2s, box-shadow 0.2s; } .btn:hover { color: var(--c-white); transform: translateY(-2px); box-shadow: 0 14px 40px rgba(232, 17, 75, 0.45); } .btn--sm { gap: 8px; font-size: 14px; padding: 11px 22px; } .btn--sm:hover { transform: translateY(-1px); box-shadow: 0 8px 26px rgba(232, 17, 75, 0.45); } .btn--md { font-size: 16px; padding: 17px 34px; } .btn--lg { font-size: 16.5px; padding: 18px 38px; } .btn--xl { font-size: 17px; padding: 19px 40px; } /* Os CTAs que pulsam já carregam sombra animada; o hover não briga com ela. */ .btn.pulse:hover { box-shadow: 0 18px 64px rgba(232, 17, 75, 0.7); } .btn[disabled] { cursor: default; opacity: 0.65; } .btn[disabled]:hover { transform: none; } /* ---------- Cards "para quem é" ---------- */ .pcard { position: relative; overflow: hidden; padding: 28px; border-radius: 16px; background: var(--c-surface); border: 1px solid var(--c-hairline); transition: transform 0.25s, border-color 0.25s; } .pcard:hover { transform: translateY(-4px); border-color: rgba(232, 17, 75, 0.6); } /* Número vazado no canto dos cards (para quem é / bônus) */ .n-outline { position: absolute; line-height: 1; font-weight: 800; color: transparent; pointer-events: none; } /* ---------- Cards de mentor (expandem no hover) ---------- */ .mcard { flex: 1; min-width: 0; position: relative; border-radius: 20px; overflow: hidden; background: var(--c-navy-700); transition: flex 0.55s var(--ease-out); } .mcard:hover, .mcard:focus-within { flex: 2.6; } .mcard .mbio { opacity: 0; max-height: 0; overflow: hidden; transition: opacity 0.45s ease 0.12s, max-height 0.55s var(--ease-out); } .mcard:hover .mbio, .mcard:focus-within .mbio { opacity: 1; max-height: 280px; } /* ---------- Turmas do Bootcamp ---------- */ .turma { text-align: left; padding: 26px; border-radius: 16px; background: rgba(5, 15, 42, 0.55); border: 1.5px solid rgba(223, 234, 248, 0.2); cursor: pointer; font-family: var(--font-sans); color: var(--c-white); transition: border-color 0.2s, background 0.2s; } .turma[aria-pressed="true"] { background: rgba(232, 17, 75, 0.14); border-color: var(--c-magenta); } /* ---------- Galeria do Bootcamp ---------- */ .gcell { position: relative; border-radius: 16px; overflow: hidden; } .gcell img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; } .gcell:hover img { transform: scale(1.05); } /* ---------- Cards de bônus ---------- */ .bcard { position: relative; overflow: hidden; padding: 36px 30px; border-radius: 20px; background: rgba(5, 15, 42, 0.6); border: 1px solid rgba(223, 234, 248, 0.16); transition: transform 0.25s, border-color 0.25s; } .bcard:hover { transform: translateY(-4px); border-color: rgba(232, 17, 75, 0.7); } /* ---------- Timeline ---------- */ .tl { display: flex; position: relative; justify-content: space-between; } .tl-line { position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: rgba(223, 234, 248, 0.22); } .tl-item { position: relative; flex: 1; height: 170px; min-width: 0; } .tl-dot { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 16px; height: 16px; border-radius: 99px; background: var(--c-fog); /* O primeiro anel "fura" a linha; o segundo desenha o contorno. */ box-shadow: 0 0 0 4px var(--c-navy-900), 0 0 0 5.5px var(--c-fog); } .tl-item--hot .tl-dot { background: var(--c-magenta); box-shadow: 0 0 0 4px var(--c-navy-900), 0 0 0 5.5px var(--c-magenta); } .tl-label { position: absolute; left: 50%; transform: translateX(-50%); width: max-content; max-width: 15ch; text-align: center; font-size: 12.5px; font-weight: 600; line-height: 1.45; color: var(--c-fog); } .tl-up .tl-label { bottom: calc(50% + 22px); } .tl-down .tl-label { top: calc(50% + 22px); } /* ---------- FAQ ---------- */ /*
dá acordeão exclusivo nativo; onde não suporta, abre mais de um — degradação aceitável. */ .faq-item { border-top: 1px solid var(--c-hairline-strong); } .faq-item > summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 4px; cursor: pointer; list-style: none; font-size: 17.5px; font-weight: 700; color: var(--c-white); } .faq-item > summary::-webkit-details-marker { display: none; } .faq-chev { flex-shrink: 0; color: var(--c-fog); font-size: 13px; transition: transform 0.2s; } .faq-item[open] .faq-chev { transform: rotate(180deg); } .faq-body { padding: 0 4px 26px; } .faq-body p { margin: 0; max-width: 65ch; font-size: 15.5px; line-height: 1.7; color: var(--c-fog); } /* ---------- Modal de aplicação ---------- */ /* nativo: foco preso, ESC fecha e ::backdrop, tudo sem JS extra. Paleta da v3 (magenta + creme), não a azul da v1. */ .modal { margin: auto; padding: 20px; width: 100%; max-width: 600px; border: none; background: transparent; color: var(--c-fog); } .modal::backdrop { background: rgba(5, 15, 42, 0.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .modal-card { position: relative; padding: clamp(28px, 5vw, 48px); border-radius: 24px; background: radial-gradient(120% 80% at 15% 0%, rgba(232, 17, 75, 0.16), transparent 55%), linear-gradient(180deg, var(--c-navy-700) 0%, var(--c-navy-900) 100%); border: 1px solid rgba(232, 17, 75, 0.45); box-shadow: 0 40px 120px rgba(2, 6, 20, 0.7); } .modal[open] .modal-card { animation: rv 0.5s var(--ease-out) both; } .modal-close { position: absolute; top: 14px; right: 14px; width: 44px; /* alvo de toque confortável */ height: 44px; display: grid; place-items: center; border-radius: 999px; border: 1px solid rgba(223, 234, 248, 0.28); background: rgba(5, 15, 42, 0.5); color: var(--c-fog); font-size: 15px; line-height: 1; cursor: pointer; transition: color 0.2s, border-color 0.2s, transform 0.2s; } .modal-close:hover { color: var(--c-white); border-color: rgba(232, 17, 75, 0.7); transform: rotate(90deg); } /* Erro geral de envio (falha de rede), abaixo dos campos. */ .form-error { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--c-cream); } .form-error:empty { display: none; } /* ---------- Formulário (vive dentro do modal) ---------- */ .field { display: grid; gap: 8px; } .field label { font-size: 14px; font-weight: 700; color: var(--c-fog); } .field input { padding: 16px 18px; border-radius: 12px; background: rgba(5, 15, 42, 0.6); border: 1.5px solid rgba(223, 234, 248, 0.3); color: var(--c-white); font-size: 16px; /* 16px evita o zoom automático do Safari iOS */ } .field input[aria-invalid="true"] { border-color: var(--c-magenta); } .field-error { font-size: 13.5px; font-weight: 600; color: var(--c-cream); } .field-error:empty { display: none; } /* ---------- Placeholder da Digital Trainer ---------- */ /* O design usava sem foto definida. Quando as fotos chegarem, troque cada .slot por um com o mesmo border-radius. */ .slot { width: 100%; height: 100%; border-radius: 16px; background: radial-gradient(120% 90% at 20% 10%, rgba(232, 17, 75, 0.18), transparent 60%), linear-gradient(160deg, var(--c-navy-700), var(--c-navy-900)); } /* ---------- Responsivo ---------- */ @media (max-width: 768px) { .mrow { flex-direction: column; } .mcard { min-height: 400px; } .mcard .mbio { opacity: 1; max-height: none; } .tl { flex-direction: column; } .tl-line { left: 9px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; } .tl-item { height: auto; padding: 13px 0 13px 34px; } .tl-dot { left: 9px; top: 50%; transform: translate(-50%, -50%); } .tl-label { position: static; transform: none; text-align: left; max-width: none; width: auto; } } /* ---------- CTA do modal ---------- */ /* Gradiente do hero, o mesmo que colore as palavras "Novo Mercado". O gradiente completo vai ate #C2D0F7, onde texto branco cai para 1,5:1 e fica ilegivel — por isso ele para em #4A63F6 (4,77:1, passa AA) e o tom gelo aparece no anel interno e no brilho, preservando a assinatura. */ .btn--aplicar { background: linear-gradient(90deg, #0a29f5 0%, #4a63f6 100%); color: #ffffff; font-size: 16.5px; padding: 18px 38px; box-shadow: 0 12px 34px rgba(10, 41, 245, 0.45), inset 0 0 0 1px rgba(194, 208, 247, 0.55); } .btn--aplicar:hover { background: linear-gradient(90deg, #1f3bf7 0%, #6076f8 100%); box-shadow: 0 16px 44px rgba(10, 41, 245, 0.55), inset 0 0 0 1px rgba(194, 208, 247, 0.75); } .btn--aplicar[disabled] { background: linear-gradient(90deg, #0a29f5 0%, #4a63f6 100%); } /* ---------- Experiência mobile ---------- */ /* Tudo aqui dentro só vale até 768px: o desktop permanece byte a byte igual. Os !important existem porque o layout das seções vive em style inline no index.html (herança do Claude Design) — é a única forma de vencê-los sem reescrever o HTML seção a seção. */ @media (max-width: 768px) { /* Piso de espaçamento vertical: 96px por seção era desktop demais para uma coluna de 375px. 64px mantém a respiração sem esticar a página. */ :root { --pad-section: 64px; } /* --- Alvos de toque (mínimo 44x44) --- */ .btn--sm { min-height: 44px; } /* Links legais do rodapé: 18px de altura era inacertável com o polegar. Padding real (o rodapé tem folga de sobra) + fonte de 14px. */ footer a { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 2px; font-size: 14px; } /* --- Tipografia: nada de leitura abaixo de 14px; rótulo em caixa alta com tracking nunca abaixo de 12px --- */ .topbar-anim > span { font-size: 13px !important; } .eyebrow { font-size: 13px !important; } .chip { font-size: 14px !important; } .kicker { font-size: 12px !important; } .badge { font-size: 12px !important; } .mcard .mbio { font-size: 14.5px !important; line-height: 1.6 !important; } /* Empilhados, 4 cards de 400px viravam ~2 dobras só de mentores. 360px preserva o retrato dominante e devolve 160px de rolagem. */ .mcard { min-height: 360px; } .cap { font-size: 13.5px !important; } .tl-label { font-size: 14px; } /* --- Densidade vertical (a copy não muda; o ar entre blocos sim) --- */ .sec-trainer { padding-top: 64px !important; padding-bottom: 64px !important; } .sec-fechamento { padding-top: 84px !important; padding-bottom: 84px !important; } .h2-gap { margin-bottom: 34px !important; } .mt-grande { margin-top: 52px !important; } .mt-turmas { margin-top: 44px !important; } /* Itens do "Recapitulando": 22px de respiro por linha vira 15px. */ li[data-rv] { padding-top: 15px !important; padding-bottom: 15px !important; } /* --- Hero --- */ /* O mosaico é decorativo (aria-hidden). Em pé ele empurrava o conteúdo ~520px para baixo; 320px mantém o movimento como respiro entre o CTA e a prova social, sem virar uma seção inteira de enfeite. */ .hero-mosaic { height: 320px !important; } .hero-chips { margin-top: 24px !important; } .hero-cta { margin-top: 30px !important; } /* CTAs principais em largura total: o botão vira uma faixa de toque óbvia na zona do polegar, e o texto nunca quebra em duas linhas. */ .hero-cta .btn, .btn--xl { width: 100%; } /* --- Galeria do Bootcamp --- */ /* No desktop é um mosaico 4 colunas; em 375px cada célula caía para ~76px de largura. Reflui para 2 colunas: foto de abertura e de fechamento em largura total, as duas do meio lado a lado. */ .galeria { margin-top: 40px !important; grid-template-columns: 1fr 1fr !important; grid-auto-rows: 140px !important; } .galeria > .gcell { grid-column: auto !important; grid-row: auto !important; } .galeria > .gcell:first-child, .galeria > .gcell:last-child { grid-column: 1 / -1 !important; } } /* ---------- Modal: rotulo flutuante ---------- */ /* O campo nasce limpo, so com placeholder. Ao ganhar conteudo, o rotulo sobe para dentro do proprio campo — o visual enxuto se mantem e o campo nunca fica anonimo depois de preenchido. So CSS, sem JS. O seletor e :not(:placeholder-shown), nao :focus: com o campo vazio o placeholder continua visivel no foco, e os dois se sobreporiam. */ .field { position: relative; } .field input { transition: padding 0.18s ease, border-color 0.18s ease; } .field input:not(:placeholder-shown) { padding-top: 24px; padding-bottom: 8px; } .field .rotulo { position: absolute; left: 19px; top: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-fog); opacity: 0; transform: translateY(4px); transition: opacity 0.18s ease, transform 0.18s ease; pointer-events: none; } .field input:not(:placeholder-shown) + .rotulo { opacity: 0.75; transform: none; } /* Botao fechar: 44x44 e o minimo para o polegar, e ele e a unica saida visivel do modal. */ .modal-close { width: 44px; height: 44px; display: grid; place-items: center; font-size: 16px; } /* Mensagem de erro em 13px cansa no celular. */ .field-error, .form-error { font-size: 14px; line-height: 1.45; }