/* ═══════════════════════════════════════════════════════════════════════ LORDS — Landing (editorial) Camada de estilo específica da landing. Consome os tokens/receitas de design-system.css. NÃO redefine token. Carregado por último no , depois do styles.css antigo, para vencer o estilo neon legado. ROLLOUT: fatia 1 = HERO + HEADER. As demais seções ainda usam o estilo antigo (styles.css) até serem migradas nas próximas fatias. ═══════════════════════════════════════════════════════════════════════ */ /* ── Matar o neon legado (sem tocar markup/JS) ────────────────────────── Elementos decorativos de brilho: escondidos, não removidos. */ .cursor-blob, .hero .hero-top-beam, .hero .glow-bg-top { display: none !important; } /* ═══════════════════════════════════════════════════════════════════════ HEADER ═══════════════════════════════════════════════════════════════════════ */ .header { background: rgba(20,21,22,.72); -webkit-backdrop-filter: saturate(140%) blur(10px); backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--card-stroke); box-shadow: none; } .header.scrolled { background: rgba(20,21,22,.9); } .header .logo img { height: 32px; } /* Navegação — sans, editorial, sem neon */ .header .nav-links a { font-weight: 500; font-size: .90625rem; /* 14.5px */ color: var(--on-dark-soft); letter-spacing: 0; transition: color .18s ease; text-shadow: none; } .header .nav-links a:hover { color: var(--on-dark); text-decoration: none; } /* Botões do header — reusa as receitas .ds-btn via override escopado */ .header .header-actions .btn { font-weight: 600; font-size: .8125rem; border-radius: var(--r-pill); box-shadow: none; text-shadow: none; } /* "Acesso do Cliente" — secundário (contorno claro) */ .header .header-actions .btn-ghost-cyan { background: transparent; color: var(--on-dark); border: 1px solid rgba(255,255,255,.28); } .header .header-actions .btn-ghost-cyan:hover { border-color: var(--on-dark); background: rgba(255,255,255,.04); color: var(--on-dark); } .header .header-actions .btn-ghost-cyan i { color: var(--ciano); } /* "Fale com nosso time comercial" — primário (fill azul-claro, texto carvão) */ .header .header-actions .btn-primary { background: var(--azul-claro); color: var(--ink); border: 1px solid transparent; } .header .header-actions .btn-primary:hover { background: #dcf7ff; color: var(--ink); } .header .mobile-menu-btn { color: var(--on-dark); } /* ═══════════════════════════════════════════════════════════════════════ HERO ═══════════════════════════════════════════════════════════════════════ */ .hero { position: relative; background: var(--surface-base); min-height: min(88vh, 760px); display: flex; align-items: center; padding: 9rem 0 5rem; overflow: hidden; } /* Emenda hero→Dor (b): dissolve o grid do hero na BASE em vez de cortar seco (máscara #000 100%). Só o hero (não toca no .ds-grid-bg compartilhado): entra do topo, pico no miolo-baixo e some até a base (transparent 100%). */ .hero .ds-grid-bg { -webkit-mask-image: linear-gradient(to bottom, transparent 6%, rgba(0,0,0,.5) 42%, #000 74%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 6%, rgba(0,0,0,.5) 42%, #000 74%, transparent 100%); } /* Traço editorial sutil no topo do hero (ciano contido, sem glow) */ .hero::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(70%, 640px); height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--ciano-rgb),.5), transparent); } .hero .hero-content { position: relative; z-index: 1; } /* Título — CORPO em sans (Inter). Hierarquia estilo GET Click: enunciado sans + palavra-chave como acento em Petrona itálico, MESMA cor (a fonte diferencia). */ .hero .hero-title { font-weight: 300; font-size: clamp(1.875rem, 3.6vw, 2.875rem); line-height: 1.15; letter-spacing: -.02em; color: var(--on-dark); text-shadow: none; max-width: 24ch; margin: 0 auto 1.5rem; } /* Acento Petrona itálico acompanha o peso leve do corpo; herda a cor azul-gelo (#CAF3FF) do .ds-em do design-system — mesma cor do botão primário. */ .hero .hero-title .ds-em { font-family: var(--serif); font-style: italic; font-weight: 500; } /* Subtítulo — sans, suave */ .hero .hero-subtitle { font-weight: 400; font-size: 1.0625rem; line-height: 1.6; color: var(--on-dark-soft); max-width: 60ch; margin: 0 auto; } /* Ações — primário fill azul-claro + secundário contorno */ .hero .hero-actions { display: flex; gap: .875rem; flex-wrap: wrap; } .hero .hero-actions .btn { font-weight: 600; font-size: .875rem; padding: .6875rem 1.5rem; /* compacto (vs btn-lg 1.125rem 2rem) */ width: auto; /* largura do conteúdo — mata o width:100% do btn-lg no mobile */ border-radius: var(--r-pill); box-shadow: none; text-shadow: none; transition: transform .18s ease, background .18s ease, border-color .18s ease; } .hero .hero-actions .btn:active { transform: translateY(1px); } .hero .hero-actions .btn-primary { background: var(--azul-claro); color: var(--ink); border: 1px solid transparent; } .hero .hero-actions .btn-primary:hover { background: #dcf7ff; color: var(--ink); } .hero .hero-actions .btn-secondary { background: transparent; color: var(--on-dark); border: 1px solid rgba(255,255,255,.28); } .hero .hero-actions .btn-secondary:hover { border-color: var(--on-dark); background: rgba(255,255,255,.04); color: var(--on-dark); } /* Micro-prova — mono, discreta */ .hero .micro-proof { font-family: var(--mono); font-size: .75rem; color: var(--on-dark-mute); letter-spacing: .02em; } .hero .micro-proof span { color: var(--on-dark-mute); } /* ── Responsivo ── */ @media (max-width: 768px) { .hero { min-height: auto; padding: 7rem 0 3.5rem; } .hero .hero-title { font-size: clamp(1.75rem, 7vw, 2.5rem); max-width: 22ch; line-height: 1.2; } /* Botões empilhados com respiro entre eles */ .hero .hero-actions { flex-direction: column; align-items: center; gap: 14px; } /* Logo do header proporcional no mobile */ .header .logo img { height: 24px !important; } } /* ═══════════════════════════════════════════════════════════════════════ SEÇÕES (migração editorial) — prova social → footer Bridge sobre o CSS legado: rebranda o ciano, mata o neon, serifa títulos. Escopo: .page-wrapper (landing). Admin/CRM não usam este arquivo. Usa !important porque o CSS inline legado abusa de !important nos hovers. ═══════════════════════════════════════════════════════════════════════ */ /* Rebrand do ciano legado (#20E6E6/#00E5CC) → ciano oficial da marca #00D9FC. Redefine só o token LEGADO no escopo da landing; tokens do DS ficam intactos. */ .page-wrapper { --color-cyan: var(--ciano); --color-cyan-light: rgba(var(--ciano-rgb),.10); } /* ═══════════════════════════════════════════════════════════════════════ SUPERFÍCIES (passe de fundos) — 2 tons intencionais, escopados na landing. NÃO toca nos tokens globais (--color-bg-base/--color-bg-alt do styles.css, compartilhados com o admin). Ritmo: BASE → hero, Dor, Timeline, Serviços, CTA final, footer ELEVADO → Soluções/Agentes/Modelos, Case, FAQ ═══════════════════════════════════════════════════════════════════════ */ .page-wrapper { --surface-base: var(--carvao); /* #141516 — o carvão do hero */ --surface-elevated: #212327; /* Δ~12 sobre o carvão — degrau tonal visível */ /* Sombra neutra ESCOPADA na landing (preto, não o navy do --shadow global do design-system.css, que serve o CRM/admin/login em produção). Mesmo blur/distâncias. */ --shadow: 0 2px 6px rgba(0,0,0,.08), 0 24px 44px -22px rgba(0,0,0,.32); background: var(--surface-base); /* container = base: mata o vazamento do body (tom mais escuro) na emenda entre seções */ } /* Mapeia as classes legadas de fundo pro ritmo de 2 tons — SÓ na landing */ .page-wrapper .bg-base { background: var(--surface-base); } /* Dor, Timeline, Serviços, CTA, footer */ .page-wrapper .bg-alt { background: var(--surface-elevated); } /* Soluções/Agentes/Modelos, Case, FAQ */ /* ═══ RAIZ TIPOGRÁFICA (escopada na landing, carrega por último) ═══ Uma família só: Inter (--sans) em TODOS os títulos e no corpo. Neutraliza de uma vez o Space Grotesk (styles.css h1-h4) e o Outfit (inline .agent-info h3), sem tocar no styles.css/admin. Petrona fica SÓ no acento .ds-em (regra própria); números em JetBrains Mono (--mono) preservados (classe própria). */ .page-wrapper { font-family: var(--sans); } .page-wrapper h1, .page-wrapper h2, .page-wrapper h3, .page-wrapper h4, .page-wrapper .font-display { font-family: var(--sans) !important; } /* .font-display = classe utilitária do styles.css (Space Grotesk) */ /* Peso/ritmo dos títulos (a família já vem da raiz acima). Peso LEVE (300) = mesmo do .hero-title (a leveza é a assinatura). Escala fluida um degrau abaixo do hero (clamp), sem corte seco em 768. */ .page-wrapper h2 { font-weight: 300 !important; font-size: clamp(1.5rem, 2.8vw, 2.25rem); letter-spacing: -.02em; line-height: 1.15; } /* Acento Petrona itálico salta +200 sobre o corpo 300 (= mesmo salto do hero) */ .page-wrapper h2 .ds-em { font-weight: 500; } .page-wrapper .pain-card h3, .page-wrapper .step-card h3, .page-wrapper .benefit-text h3 { font-weight: 400; } /* feature/card: leve como h2/hero; distinção vem do contraste de cor. (.case-card h3 fica 600: é rótulo de seção, não título) */ /* ── Sem neon: radiais mouse-follow dos cards ── */ .page-wrapper .dark-glass-card::before, .page-wrapper .dark-glass-card::after { display: none !important; background: none !important; } /* Superfície editorial dos cards (carvão + gradiente sutil, sem glass) */ .page-wrapper .dark-glass-card, .page-wrapper .step-card, .page-wrapper .faq-item { background: linear-gradient(180deg, var(--card-top), var(--card-bot)) !important; border: 1px solid var(--card-stroke) !important; box-shadow: var(--shadow) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* Hover/estado — só borda sutil + profundidade neutra, sem glow colorido */ .page-wrapper .dark-glass-card:hover, .page-wrapper .pain-card:hover, .page-wrapper .case-card:hover, .page-wrapper .step-card:hover, .page-wrapper .step-card.active, .page-wrapper .faq-item:hover, .page-wrapper .faq-item.open { border-color: rgba(255,255,255,.14) !important; box-shadow: var(--shadow) !important; transform: none !important; } /* Pain cards: borda/glow neutralizados, dentro da paleta (sem rose) */ .page-wrapper .pain-card { border-color: rgba(255,255,255,.12) !important; } .page-wrapper .pain-card:hover { border-color: rgba(255,255,255,.14) !important; box-shadow: var(--shadow) !important; } /* Timeline: pontos, ícones e linha sem glow */ .page-wrapper .step-dot.revealed, .page-wrapper .step-dot.active.revealed, .page-wrapper .step-icon, .page-wrapper .benefit-icon-box { box-shadow: none !important; } .page-wrapper .timeline-line { background: linear-gradient(to bottom, rgba(var(--ciano-rgb),.12), rgba(var(--ciano-rgb),.55)) !important; } /* ── Botões editoriais em toda a landing ── */ .page-wrapper .btn-primary, .page-wrapper .glow-button { background: var(--azul-claro) !important; color: var(--ink) !important; box-shadow: none !important; text-shadow: none !important; } .page-wrapper .btn-primary:hover, .page-wrapper .glow-button:hover { background: #dcf7ff !important; color: var(--ink) !important; } .page-wrapper .btn-outline-cyan, .page-wrapper .btn-secondary { background: transparent !important; color: var(--on-dark) !important; border: 1px solid rgba(255,255,255,.28) !important; box-shadow: none !important; } .page-wrapper .btn-outline-cyan:hover, .page-wrapper .btn-secondary:hover { border-color: var(--on-dark) !important; background: rgba(255,255,255,.04) !important; } /* Sem sublinhado/"risco" no hover dos botões (herança do a:hover legado/DS) */ .page-wrapper .btn:hover, .page-wrapper .btn:focus, .header .btn:hover, .header .btn:focus { text-decoration: none !important; } /* Fonte dos botões forçada p/ Inter (sans) 600 — mata resíduo de fonte do styles.css */ .page-wrapper .btn { font-family: var(--sans) !important; font-weight: 600 !important; } /* CTA band — sem gradiente neon */ .page-wrapper .cta-band { background: var(--carvao) !important; border-top: 1px solid var(--card-stroke) !important; border-bottom: 1px solid var(--card-stroke) !important; } /* Ícones sociais do footer — muted no normal, acento no hover, sem glow */ .page-wrapper .social-icon-link { color: var(--on-dark-mute); } .page-wrapper .social-icon-link:hover { color: var(--ciano); filter: none !important; transform: scale(1.12); } /* ═══════════════════════════════════════════════════════════════════════ SEÇÃO DOR — editorial minimalista (respiro + tipografia, sem enfeite) ═══════════════════════════════════════════════════════════════════════ */ /* Respiro generoso no topo. Fundo ELEVADO (ritmo alternado); os cards em carvão recuam sobre ele em vez de sumir. Controle explícito p/ não cair no .bg-alt legado (#11151A) do styles.css. */ .page-wrapper .pain-section { padding-top: 8rem; background: var(--surface-elevated); } /* Grid 2x2 com respiro entre os cards + mais ar entre título e cards */ .page-wrapper .pain-grid { gap: 2rem; max-width: 1080px; margin-top: 3.5rem; } /* Cards: carvão sólido recuado sobre a seção elevada (var(--carvao) sobre surface-elevated) pra destacar. Padding generoso — o ar vem do padding. */ .page-wrapper .pain-card { padding: 2.75rem; background: var(--carvao) !important; border-radius: var(--r); min-height: 0; } /* Tipografia do card — Inter, sem herdar fonte antiga; respiro confortável */ .page-wrapper .pain-card h3 { font-weight: 500; font-size: 1.125rem; line-height: 1.35; color: var(--on-dark); margin-bottom: .625rem; } .page-wrapper .pain-card p { font-size: .9375rem; line-height: 1.65; color: var(--on-dark-soft); } /* Ícone: neutro translúcido em tile chapado (sem glow, dentro da paleta) */ .page-wrapper .pain-card .pain-icon { width: 44px; height: 44px; border-radius: var(--r-tile); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.75); font-size: 1.25rem; margin-bottom: 1.25rem; box-shadow: none; } /* Frase de fecho — mais presença, mesma assinatura do título (sans + acento). Menos vão morto acima; maior e mais pesada pra não ficar perdida. */ .page-wrapper .pain-closer { font-weight: 400; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.3; color: var(--on-dark); max-width: 30ch; margin: 2.5rem auto 0; } /* ═══════════════════════════════════════════════════════════════════════ BLOCOS 6–10 + FOOTER — migração tipográfica editorial ═══════════════════════════════════════════════════════════════════════ */ /* ── Bloco 6: Timeline "Do diagnóstico à operação em 4 etapas" ── */ /* H2 sem classe de escala → herda a escala de seção do .page-wrapper h2 (clamp fluido) */ /* Números 01–04 dos passos em JetBrains Mono (dado); cor de acento já vem do inline */ .page-wrapper .step-number { font-family: var(--mono); } /* ── Bloco 8: Case (Dancin Brasil) ── */ /* Nome da empresa: sans 600 (família Inter já vem da raiz .font-display) */ .page-wrapper .case-card .font-display { font-weight: 600; } /* Sub-rótulos (Sobre a empresa / O desafio / O resultado): sans 600 branco, iguais */ .page-wrapper .case-card h3 { font-weight: 600; color: var(--on-dark); } /* Eyebrow "Cliente em destaque": acento ciano via var */ .page-wrapper .case-card > p.uppercase { color: var(--ciano); } /* ── Bloco 9: FAQ ── */ /* Item aberto ganha borda em acento sutil (resto segue no card-stroke da migração) */ .page-wrapper .faq-item.open { border-color: rgba(var(--ciano-rgb), .35) !important; } /* ── Bloco 10: CTA final — botão primário no estilo claro do sistema (azul-claro) ── */ .page-wrapper .btn-primary { background: var(--azul-claro); color: var(--ink); border: 1px solid transparent; box-shadow: none; } .page-wrapper .btn-primary:hover { background: var(--azul-claro); color: var(--ink); filter: brightness(1.05); box-shadow: none; } /* ── Footer ── */ .page-wrapper footer#footer { background: var(--surface-base); } /* base via var */ .page-wrapper footer h4 { font-weight: 600; } /* cabeçalhos de coluna: sans, sem bold pesado */