/* ============================================================================= WMS Fácil — tema.css Linguagem visual do projeto (skill estetica-apple): fonte do sistema, neutro + um accent, superfícies com raio 12, hairlines, dark mode. Único ponto de customização visual — não espalhar overrides por página. ============================================================================= */ /* ----------------------------------------------------------------------------- Tema claro/escuro Três estados, controlados pelo atributo data-tema no : - "auto" (ou ausente) — segue o sistema operacional - "claro" — força claro mesmo com o SO em escuro - "escuro" — força escuro mesmo com o SO em claro O servidor lê o cookie "tema" e já escreve o atributo no primeiro byte, para a página nascer na cor certa (sem flash branco). Ver tema.js. Os VALORES das duas paletas ficam declarados uma única vez abaixo; os blocos de troca apenas reapontam as variáveis ativas. Mudou uma cor, muda num lugar. ----------------------------------------------------------------------------- */ :root { /* Paleta clara */ --claro-fundo: #F2F2F7; --claro-superficie: #FFFFFF; --claro-texto: #000000; --claro-texto-secundario: rgba(60, 60, 67, 0.6); --claro-separador: rgba(60, 60, 67, 0.29); --claro-accent: #007AFF; --claro-sucesso: #34C759; --claro-erro: #FF3B30; --claro-alerta: #FF9500; /* Paleta escura */ --escuro-fundo: #000000; --escuro-superficie: #1C1C1E; --escuro-texto: #FFFFFF; --escuro-texto-secundario: rgba(235, 235, 245, 0.6); --escuro-separador: rgba(84, 84, 88, 0.65); --escuro-accent: #0A84FF; --escuro-sucesso: #30D158; --escuro-erro: #FF453A; --escuro-alerta: #FF9F0A; /* Ativas — claro é o padrão */ --fundo: var(--claro-fundo); --superficie: var(--claro-superficie); --texto: var(--claro-texto); --texto-secundario: var(--claro-texto-secundario); --separador: var(--claro-separador); --accent: var(--claro-accent); --sucesso: var(--claro-sucesso); --erro: var(--claro-erro); --alerta: var(--claro-alerta); /* Ícone do menu hambúrguer, aplicado como mask para herdar a cor do texto */ --icone-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3 6h18v2H3zM3 11h18v2H3zM3 16h18v2H3z'/%3E%3C/svg%3E"); } /* Automático: segue o sistema — exceto quando o usuário fixou o claro. */ @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --fundo: var(--escuro-fundo); --superficie: var(--escuro-superficie); --texto: var(--escuro-texto); --texto-secundario: var(--escuro-texto-secundario); --separador: var(--escuro-separador); --accent: var(--escuro-accent); --sucesso: var(--escuro-sucesso); --erro: var(--escuro-erro); --alerta: var(--escuro-alerta); } } /* Escolha explícita do usuário — vence a preferência do sistema. */ :root[data-tema="escuro"] { --fundo: var(--escuro-fundo); --superficie: var(--escuro-superficie); --texto: var(--escuro-texto); --texto-secundario: var(--escuro-texto-secundario); --separador: var(--escuro-separador); --accent: var(--escuro-accent); --sucesso: var(--escuro-sucesso); --erro: var(--escuro-erro); --alerta: var(--escuro-alerta); } /* Seletor de tema (partial _SeletorTema) */ .seletor-tema { display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px; background: rgba(120, 120, 128, 0.14); } .seletor-tema button { min-width: 34px; min-height: 34px; display: inline-grid; place-items: center; border: none; background: none; border-radius: 999px; color: var(--texto-secundario); font-size: 0.8125rem; font-weight: 700; cursor: pointer; line-height: 1; padding: 0 8px; } .seletor-tema button:hover { color: var(--texto); } .seletor-tema button[aria-pressed="true"] { background: var(--superficie); color: var(--accent); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); } .seletor-tema button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* Nas telas de login/conta o seletor fica no canto superior direito. */ .tela-login { position: relative; } .tela-login > .seletor-tema { position: absolute; top: 12px; right: 12px; z-index: 1; } /* Barra superior autenticada: em telas estreitas o nome da empresa encolhe em vez de empurrar o seletor e o "Sair" para fora. */ @media (max-width: 560px) { .barra-empresa { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .seletor-tema button { min-width: 30px; padding: 0 6px; } } /* Base */ html, body { height: 100%; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif; background: var(--fundo); color: var(--texto); font-size: 1.0625rem; /* Body 17 */ -webkit-font-smoothing: antialiased; } h1, .titulo-grande { font-size: 2.125rem; /* Large Title 34 */ font-weight: 700; letter-spacing: -0.02em; } h2 { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; } h3 { font-size: 1.375rem; font-weight: 600; } .texto-secundario { color: var(--texto-secundario); } /* Barra superior translúcida */ .barra-topo { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--superficie) 75%, transparent); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid var(--separador); } .barra-conteudo { display: flex; align-items: center; gap: 12px; padding: 10px 16px; max-width: 1200px; margin: 0 auto; } .barra-titulo { font-weight: 700; } .barra-empresa { color: var(--texto-secundario); font-size: 0.9375rem; flex: 1; text-align: center; } .barra-sair { color: var(--accent); text-decoration: none; font-weight: 600; } .conteudo { max-width: 1200px; margin: 0 auto; padding: 16px; } /* Cards / superfícies */ .cartao { background: var(--superficie); border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); } /* Botões */ .botao-primario { display: block; width: 100%; min-height: 50px; border: none; border-radius: 12px; background: var(--accent); color: #fff; font-size: 1.0625rem; font-weight: 600; transition: transform 0.15s ease-out, opacity 0.15s ease-out; } .botao-primario:active { transform: scale(0.97); opacity: 0.85; } .botao-primario:disabled { opacity: 0.5; } .botao-secundario { display: inline-block; border: none; background: rgba(120, 120, 128, 0.12); color: var(--accent); border-radius: 12px; min-height: 44px; padding: 10px 16px; font-weight: 600; } /* Formulários */ .campo { width: 100%; min-height: 50px; border: none; border-radius: 10px; background: rgba(120, 120, 128, 0.12); color: var(--texto); padding: 12px 14px; font-size: 1.0625rem; } .campo:focus { outline: 2px solid var(--accent); outline-offset: 0; } .campo::placeholder { color: var(--texto-secundario); } .rotulo { display: block; font-size: 0.9375rem; color: var(--texto-secundario); margin: 14px 0 6px 4px; } /* Mensagens */ .mensagem-erro { background: color-mix(in srgb, var(--erro) 12%, var(--superficie)); color: var(--erro); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; font-size: 0.9375rem; } /* Tela de login (centralizada, mobile first) */ .tela-login { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; } .tela-login .cartao { width: 100%; max-width: 400px; padding: 32px 24px; } .login-titulo { text-align: center; margin-bottom: 4px; } .login-subtitulo { text-align: center; color: var(--texto-secundario); margin-bottom: 24px; font-size: 0.9375rem; } /* Lista agrupada (estilo iOS) — usada na seleção de empresa */ .lista-grupo { background: var(--superficie); border-radius: 12px; overflow: hidden; padding: 0; margin: 0; list-style: none; } .lista-grupo li + li { border-top: 1px solid var(--separador); } .lista-grupo .item { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 52px; padding: 12px 16px; background: none; border: none; color: var(--texto); font-size: 1.0625rem; text-align: left; } .lista-grupo .item:active { background: rgba(120, 120, 128, 0.12); } .lista-grupo .item .detalhe { color: var(--texto-secundario); font-size: 0.9375rem; } /* Acessibilidade e movimento */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* ============================================================================= Grid padrão (skill grid-filtros-ordenacao) ============================================================================= */ .grid-envoltorio { position: relative; } .grid-carregando { opacity: 0.5; pointer-events: none; } .grid-rolagem { overflow-x: auto; background: var(--superficie); border-radius: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); } .grid-tabela { width: 100%; border-collapse: collapse; font-size: 0.9375rem; } .grid-tabela th { text-align: left; font-weight: 600; color: var(--texto-secundario); padding: 12px 14px; border-bottom: 1px solid var(--separador); white-space: nowrap; position: sticky; top: 0; background: var(--superficie); } .grid-tabela td { padding: 12px 14px; border-bottom: 1px solid var(--separador); white-space: nowrap; } .grid-tabela tbody tr:last-child td { border-bottom: none; } .grid-tabela tbody tr:active { background: rgba(120, 120, 128, 0.08); } .grid-vazio { text-align: center; color: var(--texto-secundario); padding: 32px !important; } .grid-funil { border: none; background: none; color: var(--texto-secundario); border-radius: 6px; padding: 2px 6px; min-height: 28px; cursor: pointer; } .grid-funil.ativo { color: var(--sucesso); font-weight: 700; } .grid-rodape { display: flex; align-items: center; justify-content: space-between; padding: 12px 4px; font-size: 0.9375rem; } .grid-paginacao { display: flex; align-items: center; gap: 10px; } .grid-paginacao .botao-secundario { min-width: 44px; } /* Popover do filtro */ .grid-popover { position: absolute; z-index: 1000; width: 300px; max-height: 70vh; overflow-y: auto; padding: 16px; } .grid-popover-sheet { position: fixed; left: 0; right: 0; bottom: 0; width: auto; max-height: 80dvh; border-radius: 16px 16px 0 0; box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.2); } .grid-popover-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .grid-popover-fechar { border: none; background: rgba(120, 120, 128, 0.12); color: var(--erro); border-radius: 50%; width: 30px; height: 30px; } .grid-popover-ordenar { display: flex; gap: 8px; } .grid-popover-ordenar .botao-secundario { flex: 1; } .grid-popover-lista { margin-top: 10px; max-height: 200px; overflow-y: auto; border: 1px solid var(--separador); border-radius: 10px; } .grid-popover-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; margin: 0; cursor: pointer; font-size: 0.9375rem; } .grid-popover-item + .grid-popover-item { border-top: 1px solid var(--separador); } .grid-popover-item input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--sucesso); } .grid-popover-contagem { padding: 8px 4px; font-size: 0.8125rem; } .grid-popover-acoes { display: flex; gap: 8px; } .grid-popover-acoes .botao-primario { flex: 1; background: var(--sucesso); } /* Totais do grid (conjunto filtrado) */ .grid-tabela tfoot td.grid-total { font-weight: 700; border-top: 2px solid var(--separador); background: color-mix(in srgb, var(--accent) 6%, var(--superficie)); white-space: nowrap; } /* Botões de exportação do grid */ .grid-exportar { margin-left: 12px; } .grid-exportar button { border: none; background: none; color: var(--accent); font-weight: 600; cursor: pointer; padding: 4px 2px; min-height: 32px; } /* ============================================================================= Uso do plano (tela Meu plano e avisos de limite nas telas de cadastro) ============================================================================= */ .uso-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; } .uso-item { padding: 16px; } .uso-cabecalho { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .uso-cabecalho span { color: var(--texto-secundario); font-size: 0.875rem; } .uso-cabecalho strong { font-size: 1.125rem; white-space: nowrap; } .uso-barra { height: 6px; border-radius: 999px; background: rgba(120, 120, 128, 0.18); overflow: hidden; margin: 12px 0 8px; } .uso-barra span { display: block; height: 100%; border-radius: 999px; background: var(--sucesso); transition: width 0.3s ease; } .uso-item.proximo .uso-barra span { background: var(--alerta); } .uso-item.no-limite .uso-barra span { background: var(--erro); } .uso-item.proximo { border: 1px solid color-mix(in srgb, var(--alerta) 45%, transparent); } .uso-item.no-limite { border: 1px solid color-mix(in srgb, var(--erro) 45%, transparent); } .uso-nota { margin: 0; font-size: 0.875rem; line-height: 1.45; } .uso-atencao { color: var(--alerta); font-weight: 600; } .uso-alerta { color: var(--erro); font-weight: 600; } .uso-creditos { padding: 16px; border-left: 3px solid var(--accent); } .uso-creditos .uso-cabecalho strong { font-size: 1.5rem; color: var(--accent); } /* Bloco de créditos avulsos no cartão do plano (página pública) */ .plano-extra { border-top: 1px solid var(--separador); padding-top: 14px; margin: 0 0 20px; } .plano-extra strong { display: block; color: var(--accent); font-size: 0.9375rem; } .plano-extra span { display: block; margin-top: 2px; font-weight: 700; } .plano-extra small { display: block; margin-top: 6px; color: var(--texto-secundario); font-size: 0.8125rem; line-height: 1.4; } /* Faixa de aviso de limite no topo das telas de cadastro */ .faixa-limite { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 10px; margin-bottom: 16px; font-size: 0.9375rem; line-height: 1.45; } .faixa-limite.atencao { background: color-mix(in srgb, var(--alerta) 12%, var(--superficie)); border: 1px solid color-mix(in srgb, var(--alerta) 40%, transparent); } .faixa-limite.bloqueado { background: color-mix(in srgb, var(--erro) 12%, var(--superficie)); border: 1px solid color-mix(in srgb, var(--erro) 40%, transparent); } .faixa-limite a { color: var(--accent); font-weight: 600; } /* Contador discreto ao lado do titulo de uma listagem */ .contador-limite { font-size: 0.8125rem; font-weight: 600; color: var(--texto-secundario); background: rgba(120, 120, 128, 0.12); border-radius: 999px; padding: 4px 10px; white-space: nowrap; } .contador-limite.proximo { color: var(--alerta); background: color-mix(in srgb, var(--alerta) 14%, transparent); } .contador-limite.no-limite { color: var(--erro); background: color-mix(in srgb, var(--erro) 14%, transparent); } /* ============================================================================= Área pública / pré-venda ============================================================================= */ .public-nav { padding: 10px 0; } .public-nav-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; } .public-brand { color: var(--texto); font-weight: 800; text-decoration: none; letter-spacing: -0.02em; font-size: 1.0625rem; padding: 0; margin: 0; } .public-brand:hover { color: var(--texto); } /* Botão hambúrguer: ícone em currentColor para funcionar em claro e escuro */ .public-nav .navbar-toggler { margin-left: auto; border: 1px solid var(--separador); border-radius: 10px; padding: 6px 10px; color: var(--texto); min-height: 44px; min-width: 44px; } .public-nav .navbar-toggler:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); outline: none; } .public-nav .navbar-toggler-icon { width: 22px; height: 22px; /* Fallback: ícone escuro fixo em navegadores sem suporte a mask */ background: var(--icone-menu) center / contain no-repeat; } @supports ((-webkit-mask: url("")) or (mask: url(""))) { .public-nav .navbar-toggler-icon { background: currentColor; -webkit-mask: var(--icone-menu) center / contain no-repeat; mask: var(--icone-menu) center / contain no-repeat; } } .public-nav .navbar-collapse { flex-basis: 100%; } .public-nav-links { gap: 4px; margin: 0; padding: 0; } .public-page a { color: var(--accent); text-decoration: none; font-weight: 600; } .public-nav .nav-link { color: var(--texto-secundario); font-size: 0.9375rem; font-weight: 600; padding: 10px 12px; border-radius: 8px; min-height: 44px; display: flex; align-items: center; } .public-nav .nav-link:hover, .public-nav .nav-link:focus { color: var(--texto); background: rgba(120, 120, 128, 0.1); } .public-nav .nav-link.active { color: var(--accent); } .public-nav-cta { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 10px 18px; border-radius: 999px; background: var(--accent); color: #fff !important; font-weight: 700; text-decoration: none; white-space: nowrap; } .public-nav-cta:hover { filter: brightness(0.94); } /* A partir de lg: tudo em uma linha, links centralizados, CTA à direita */ @media (min-width: 992px) { .public-nav { padding: 18px 0; } .public-nav .navbar-collapse { flex-basis: auto; flex: 1; gap: 18px; } .public-nav-links { flex: 1; justify-content: center; } } /* Abaixo de lg: menu empilhado ao abrir o hambúrguer */ @media (max-width: 991.98px) { .public-nav .navbar-collapse { padding-top: 8px; } .public-nav .nav-item { border-bottom: 1px solid var(--separador); } .public-nav .nav-link { padding: 14px 4px; border-radius: 0; } .public-nav-cta { width: 100%; margin: 14px 0 6px; } } .public-hero { min-height: 92dvh; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, var(--fundo)), var(--fundo) 60%); } .public-hero-grid, .public-section, .public-band, .public-cta, .public-page { max-width: 1200px; margin: 0 auto; padding: 72px 16px; } .public-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr); align-items: center; gap: 48px; padding-top: 40px; } .public-eyebrow { color: var(--accent); font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0; margin-bottom: 12px; } .public-hero h1 { max-width: 760px; font-size: clamp(2.2rem, 5vw, 3.9rem); line-height: 1.02; font-weight: 800; letter-spacing: -0.025em; margin-bottom: 20px; } .public-page h1 { max-width: 760px; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.08; font-weight: 800; letter-spacing: -0.025em; margin-bottom: 20px; } .public-lead, .public-page-head p, .public-text, .public-page p { color: var(--texto-secundario); font-size: 1.125rem; line-height: 1.55; max-width: 720px; } .public-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .public-actions.center { justify-content: center; } .public-button { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; padding: 12px 18px; font-weight: 700; text-decoration: none; } .public-button.primary { background: var(--accent); color: #fff; } .public-button.secondary { background: rgba(120, 120, 128, 0.12); color: var(--accent); } .public-proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 36px; } .public-proof div, .public-feature-grid article, .public-column-grid article, .pricing-grid article, .metric-board, .public-device { background: var(--superficie); border-radius: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); } .public-proof div { padding: 14px; } .public-proof dt { font-weight: 800; } .public-proof dd { margin: 4px 0 0; color: var(--texto-secundario); font-size: 0.875rem; } .public-device { padding: 18px; max-width: 430px; margin-left: auto; border: 1px solid var(--separador); } .device-top, .task-card, .task-list div, .metric-board div { border-bottom: 1px solid var(--separador); padding: 14px 2px; } .device-top { display: flex; justify-content: space-between; color: var(--texto-secundario); font-size: 0.8125rem; } .device-top strong { color: var(--texto); } .scan-panel { position: relative; min-height: 190px; margin: 18px 0; border-radius: 12px; display: grid; place-items: center; text-align: center; background: linear-gradient(90deg, transparent 48%, color-mix(in srgb, var(--accent) 45%, transparent) 49%, transparent 51%), rgba(120, 120, 128, 0.12); overflow: hidden; } .scan-panel p { margin: 0 0 6px; color: var(--texto-secundario); } .scan-panel strong { font-size: 1.375rem; } .scan-line { position: absolute; left: 10%; right: 10%; top: 50%; height: 2px; background: var(--sucesso); } .task-card.active { border-radius: 12px; padding: 14px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--separador)); margin-bottom: 8px; } .task-card span, .task-list span, .metric-board span { display: block; color: var(--texto-secundario); font-size: 0.8125rem; } .task-card strong, .task-list strong, .metric-board strong { display: block; margin-top: 4px; } .task-card small { color: var(--texto-secundario); } .task-list div:last-child, .metric-board div:last-child { border-bottom: none; } .public-section-head { max-width: 760px; margin-bottom: 28px; } .public-feature-grid, .public-column-grid, .pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .public-feature-grid article, .public-column-grid article, .pricing-grid article { padding: 22px; } .public-feature-grid p, .public-column-grid p, .pricing-grid p, .pricing-grid li { color: var(--texto-secundario); line-height: 1.5; } .feature-icon { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 32px; border-radius: 999px; background: rgba(120, 120, 128, 0.12); color: var(--accent); font-size: 0.75rem; font-weight: 800; margin-bottom: 14px; } .public-band { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 32px; align-items: start; } .public-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .public-steps div { display: flex; gap: 12px; align-items: center; min-height: 72px; padding: 14px; background: var(--superficie); border-radius: 12px; } .public-steps strong { width: 34px; height: 34px; display: inline-grid; place-items: center; border-radius: 50%; background: var(--accent); color: #fff; } .public-section.split { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr); gap: 36px; align-items: center; } .metric-board { display: grid; grid-template-columns: repeat(2, 1fr); padding: 12px 20px; } .metric-board div:nth-child(odd) { border-right: 1px solid var(--separador); } .metric-board div:nth-child(3) { border-bottom: none; } .metric-board strong { font-size: 1.75rem; letter-spacing: -0.02em; } .public-cta { text-align: center; padding-top: 56px; padding-bottom: 88px; } .public-cta p { margin-left: auto; margin-right: auto; } .public-page.narrow, .public-page.legal { max-width: 860px; } .public-page h2 { margin-top: 34px; } .pricing-grid article.featured { border: 2px solid var(--accent); } .plan-label { color: var(--accent); font-size: 0.8125rem; font-weight: 800; text-transform: uppercase; } .pricing-grid ul { padding-left: 18px; margin: 18px 0 24px; } .plano-preco { display: flex; align-items: baseline; gap: 4px; font-size: 2.25rem; font-weight: 800; letter-spacing: -0.03em; margin: 10px 0 6px; } .plano-preco small { font-size: 0.9375rem; font-weight: 600; color: var(--texto-secundario); letter-spacing: 0; } .pricing-grid article { display: flex; flex-direction: column; } .pricing-grid article > .public-button { margin-top: auto; } /* Selo de estágio (disponível hoje / em desenvolvimento) */ .selo { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 4px 10px; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.01em; white-space: nowrap; } .selo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .selo.ativo { background: color-mix(in srgb, var(--sucesso) 14%, transparent); color: var(--sucesso); } .selo.breve { background: rgba(120, 120, 128, 0.14); color: var(--texto-secundario); } /* Blocos de módulo da página Recursos */ .modulo { border-top: 1px solid var(--separador); padding: 44px 0; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 40px; align-items: start; } .modulo-cabecalho h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -0.02em; margin: 12px 0 10px; } .modulo-cabecalho p { font-size: 1rem; } .modulo-numero { color: var(--texto-secundario); font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.04em; } .lista-recursos { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .lista-recursos li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; padding: 11px 14px; background: var(--superficie); border-radius: 10px; line-height: 1.5; } .lista-recursos li::before { content: "✓"; color: var(--sucesso); font-weight: 800; line-height: 1.5; } .lista-recursos li.pendente::before { content: "○"; color: var(--texto-secundario); } .lista-recursos strong { display: block; } .lista-recursos span { color: var(--texto-secundario); font-size: 0.9375rem; } /* Comparativo antes/depois */ .comparativo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 28px; } .comparativo article { padding: 22px; border-radius: 12px; background: var(--superficie); } .comparativo article.destaque { border: 2px solid color-mix(in srgb, var(--accent) 45%, var(--separador)); } .comparativo h3 { font-size: 1.0625rem; margin-bottom: 14px; } .comparativo ul { margin: 0; padding-left: 18px; } .comparativo li { color: var(--texto-secundario); line-height: 1.6; margin-bottom: 8px; } /* Faixa de números */ .faixa-numeros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; max-width: 1200px; margin: 0 auto; padding: 0 16px 24px; } .faixa-numeros div { padding: 20px; background: var(--superficie); border-radius: 12px; } .faixa-numeros strong { display: block; font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; } .faixa-numeros span { display: block; margin-top: 6px; color: var(--texto-secundario); font-size: 0.9375rem; line-height: 1.4; } /* Destaque de IA */ .bloco-ia { background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 10%, var(--fundo)), var(--fundo) 70%); border-top: 1px solid var(--separador); border-bottom: 1px solid var(--separador); } .ia-etapas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; } .ia-etapas article { padding: 22px; border-radius: 12px; background: var(--superficie); border: 1px solid var(--separador); } .ia-etapas h3 { font-size: 1.0625rem; margin: 10px 0 8px; } .ia-etapas p { color: var(--texto-secundario); line-height: 1.5; font-size: 0.9375rem; } /* Perguntas frequentes */ .faq { display: grid; gap: 8px; max-width: 860px; } .faq details { background: var(--superficie); border-radius: 12px; padding: 4px 18px; } .faq summary { cursor: pointer; font-weight: 700; padding: 16px 0; min-height: 44px; display: flex; align-items: center; list-style: none; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; margin-left: auto; color: var(--accent); font-weight: 800; font-size: 1.25rem; } .faq details[open] summary::after { content: "−"; } .faq p { margin: 0 0 18px; color: var(--texto-secundario); line-height: 1.6; } /* Blocos de texto da página Sobre */ .texto-longo p { margin-bottom: 18px; } .texto-longo h2 { font-size: clamp(1.4rem, 2.2vw, 1.85rem); letter-spacing: -0.02em; margin: 40px 0 14px; } .texto-longo h3 { font-size: 1.1875rem; letter-spacing: -0.01em; margin: 28px 0 8px; } .texto-longo ul { padding-left: 20px; margin-bottom: 18px; } .texto-longo li { color: var(--texto-secundario); line-height: 1.65; margin-bottom: 10px; font-size: 1.0625rem; } .destaque-citacao { border-left: 3px solid var(--accent); padding: 6px 0 6px 20px; margin: 28px 0; } .destaque-citacao p { font-size: 1.25rem; line-height: 1.45; color: var(--texto); font-weight: 600; max-width: none; } /* ============================================================================= Demonstração — réplica da tela real dentro de moldura de navegador ============================================================================= */ .moldura { max-width: 1100px; margin: 0 auto; border-radius: 14px; overflow: hidden; background: var(--fundo); border: 1px solid var(--separador); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.16); } .moldura-barra { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--superficie); border-bottom: 1px solid var(--separador); } .moldura-bolinhas { display: flex; gap: 6px; } .moldura-bolinhas i { width: 11px; height: 11px; border-radius: 50%; background: rgba(120, 120, 128, 0.32); } .moldura-url { flex: 1; text-align: center; color: var(--texto-secundario); font-size: 0.8125rem; background: rgba(120, 120, 128, 0.1); border-radius: 6px; padding: 5px 12px; max-width: 340px; margin: 0 auto; } .moldura-tela { padding: 20px 22px 26px; max-height: 620px; overflow: hidden; position: relative; } .moldura-tela::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 70px; background: linear-gradient(transparent, var(--fundo)); pointer-events: none; } .moldura-legenda { text-align: center; color: var(--texto-secundario); font-size: 0.875rem; margin-top: 14px; } /* Anotações explicativas ao lado da tela */ .anotacoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 44px; } .anotacoes article { padding: 20px; background: var(--superficie); border-radius: 12px; border-left: 3px solid var(--accent); } .anotacoes h3 { font-size: 1rem; margin-bottom: 8px; } .anotacoes p { color: var(--texto-secundario); line-height: 1.55; font-size: 0.9375rem; } /* Aviso de dados fictícios */ .aviso-demo { display: flex; align-items: flex-start; gap: 10px; max-width: 1100px; margin: 0 auto 24px; padding: 14px 16px; border-radius: 10px; background: rgba(120, 120, 128, 0.1); color: var(--texto-secundario); font-size: 0.9375rem; line-height: 1.5; } .aviso-demo strong { color: var(--texto); } @media (max-width: 860px) { .moldura-tela { padding: 14px; max-height: 520px; } .anotacoes { grid-template-columns: 1fr; } .modulo, .comparativo, .ia-etapas { grid-template-columns: 1fr; } .modulo { gap: 22px; padding: 32px 0; } .faixa-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); } .public-hero-grid, .public-band, .public-section.split { grid-template-columns: 1fr; } .public-device { margin: 0; max-width: none; } .public-proof, .public-feature-grid, .public-column-grid, .pricing-grid, .public-steps { grid-template-columns: 1fr; } }