/* Fontes AUTO-HOSPEDADAS em /assets/fonts (subset latin, woff2). Antes havia um import do Google Fonts aqui dentro — uma cadeia render- -blocking (documento -> este CSS -> CSS externo -> woff2 em outra origem) que o PageSpeed mediu em ~750 ms no 4G. Arquivos locais saem na mesma conexão do site e são descobertos assim que este CSS chega. Plus Jakarta Sans usa font-display:optional para eliminar CLS (a troca de fonte era o maior deslocamento de layout da página — ~0.185 no mobile). Sora mantém font-display:swap (fonte de display, preloadada no ). */ /* Plus Jakarta Sans 400 — latin (auto-hospedada; antes: @import do Google Fonts, cadeia render-blocking de ~750 ms) font-display: optional elimina o CLS causado pela troca de fonte: em conexões lentas o navegador usa a fonte de reserva (Segoe UI / Arial) e NÃO troca depois, evitando o deslocamento de layout que o PageSpeed media como ~0.185 de CLS. Com os preloads no , a fonte chega em <100ms na maioria das conexões e continua sendo usada normalmente. Nas visitas seguintes o cache garante exibição instantânea. */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; font-display: optional; src: url('/assets/fonts/plus-jakarta-sans-400.woff2') format('woff2'); } /* Plus Jakarta Sans 500 — latin */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500; font-display: optional; src: url('/assets/fonts/plus-jakarta-sans-500.woff2') format('woff2'); } /* Plus Jakarta Sans 600 — latin */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: optional; src: url('/assets/fonts/plus-jakarta-sans-600.woff2') format('woff2'); } /* Plus Jakarta Sans 700 — latin */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: optional; src: url('/assets/fonts/plus-jakarta-sans-700.woff2') format('woff2'); } /* Plus Jakarta Sans 800 — latin */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 800; font-display: optional; src: url('/assets/fonts/plus-jakarta-sans-800.woff2') format('woff2'); } /* Sora 600 — latin */ @font-face { font-family: 'Sora'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/sora-600.woff2') format('woff2'); } /* Sora 700 — latin */ @font-face { font-family: 'Sora'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/sora-700.woff2') format('woff2'); } /* Sora 800 — latin */ @font-face { font-family: 'Sora'; font-style: normal; font-weight: 800; font-display: swap; src: url('/assets/fonts/sora-800.woff2') format('woff2'); } /* ══════════════════════════════════════════════════════════ CORREÇÕES DE ACESSIBILIDADE — contraste WCAG ══════════════════════════════════════════════════════════ */ /* Classe para screen readers - esconde visualmente mas acessível */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Selo "🔥 DESTAQUE" - melhorava contraste para WCAG AA */ .selo-destaque-card { background: #c2410c !important; /* laranja mais escuro para contraste */ color: #ffffff !important; text-shadow: 0 1px 2px rgba(0,0,0,0.2); } /* Badge "💸 R$ XX no Pix" - melhorava contraste */ .pix-badge { color: #15803d !important; /* verde mais escuro */ font-weight: 700; } /* ══════════════════════════════════════════════════════════ TIPOGRAFIA FLUIDA — clamp() para escala automática Mobile-First (FIX 6) ══════════════════════════════════════════════════════════ */ :root { --fs-xs: clamp(0.70rem, 1.5vw, 0.78rem); --fs-sm: clamp(0.78rem, 2vw, 0.88rem); --fs-base: clamp(0.88rem, 2.5vw, 0.95rem); --fs-md: clamp(1rem, 3vw, 1.15rem); --fs-lg: clamp(1.15rem, 4vw, 1.4rem); --fs-xl: clamp(1.35rem, 5vw, 1.75rem); --fs-2xl: clamp(1.6rem, 6vw, 2.2rem); } :root { /* Paleta padrão do sistema — UMA SÓ para todo mundo, master (GranTech) e lojas clientes: Preto + Laranja. O que diferencia a master é o ÍCONE e o NOME GranTech (assets grantech-*.png), não a cor. */ --preto: #1a1a1a; --preto-esc: #0f0f0f; --preto-claro: #2a2a2a; --laranja: #f97316; --laranja-esc: #ea580c; --laranja-claro: #fed7aa; /* Herança da era azul do sistema. O theme.js NEUTRALIZA estas variáveis em todas as páginas (aponta --azul/--ciano para a cor secundária da loja), então nenhuma tela fica azul por engano — elas só existem porque partes antigas do CSS ainda as referenciam. */ --azul: #263ee0; --azul-esc: #141c78; --azul-claro: #eaecff; --ciano: #06b6d4; --ciano-esc: #0891b2; /* Sombra do anel de foco dos campos. O theme.js ajusta por loja a partir da cor secundária (laranja no padrão, a cor escolhida nas personalizadas). */ --foco-sombra: rgba(249, 115, 22, 0.16); --verde: #16a34a; --vermelho: #dc2626; --cinza-100: #f5f7fc; --cinza-200: #e6e9f2; --cinza-500: #6b7280; --cinza-700: #374151; --texto: #131a2e; --radius: 16px; --sombra: 0 8px 28px rgba(20, 40, 150, 0.09); --sombra-forte: 0 16px 40px rgba(20, 40, 150, 0.16); --fonte-display: "Sora", "Segoe UI", sans-serif; font-family: "Plus Jakarta Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { overflow-x: hidden; scroll-behavior: smooth; } body { background: var(--cinza-100); color: var(--texto); min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } img { max-width: 100%; } h1, h2, h3 { font-family: var(--fonte-display); letter-spacing: -0.01em; } /* ---------- Topbar geral ---------- */ .topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: linear-gradient(120deg, var(--preto-esc), var(--preto) 60%, var(--preto-claro)); color: #fff; padding: 14px 24px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); position: sticky !important; top: 0 !important; z-index: 1000 !important; backdrop-filter: blur(6px); } .topbar .brand { display: flex; align-items: center; gap: 11px; font-weight: 800; font-size: 1.18rem; letter-spacing: 0.2px; font-family: var(--fonte-display); flex-shrink: 0; } .topbar .brand .logo { width: 42px; height: 42px; background: transparent; color: var(--azul); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; overflow: visible; flex-shrink: 0; } .topbar .brand .logo img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.35)); } .topbar .brand .marca-texto { display: inline-flex; align-items: baseline; gap: 0; } .topbar .brand .marca-texto .tech { color: var(--laranja); } /* Marca GRANTECH (loja master): o "TECH" sai em laranja onde o nome completo aparecer — menu do painel, vitrine, login, PDV. htmlNomeLoja (theme.js) só gera esta classe na master, então lojas clientes nunca ficam laranja. */ /* Laranja mais claro no fundo escuro da topbar/hero — #f97316 falhava WCAG AA (PageSpeed Acessibilidade 91). #fdba74 passa ~8:1 em #1a1a1a. */ .tech { color: #fdba74; } .topbar .brand .marca-sufixo { font-weight: 600; opacity: .92; margin-left: 2px; } .topbar nav { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .topbar nav a, .topbar nav button { color: #fff; background: rgba(255,255,255,0.12); border: none; padding: 8px 15px; border-radius: 999px; font-size: 0.9rem; font-weight: 600; transition: background .18s, transform .18s; } .topbar nav a:hover, .topbar nav button:hover { background: rgba(255,255,255,0.25); transform: translateY(-1px); } .topbar nav a.active { background: #fff; color: var(--azul-esc); font-weight: 700; } /* Atalho "🔐 Painel" das páginas públicas (Loja, Blog, Tutoriais, Meus Pedidos): porta de entrada do painel da loja, presente desde o início do projeto. Visual de "área restrita" — contorno sem preenchimento — para não competir com os links de compra do cliente final. O href ganha ?loja=slug via theme.js (ajustarLinksPainel) quando a vitrine está em contexto de loja cliente/demo. */ .topbar nav a.nav-painel { background: transparent; border: 1px solid rgba(255,255,255,0.45); } .topbar nav a.nav-painel:hover { background: rgba(255,255,255,0.18); } /* Mobile: topbar vira coluna, botões abaixo da logo. A busca (lupa) fica dentro do nav, então a barra tem só 2 linhas — bem mais fina. */ @media (max-width: 768px) { .topbar { flex-direction: column !important; align-items: stretch !important; padding: 10px 14px !important; gap: 6px !important; } .topbar .brand { justify-content: center !important; font-size: 1.05rem !important; order: 1; } .topbar .brand .logo { width: 34px !important; height: 34px !important; } .topbar nav { order: 2; display: flex !important; justify-content: center !important; flex-wrap: wrap !important; gap: 4px !important; width: 100% !important; } .topbar nav a, .topbar nav button { font-size: 0.82rem !important; padding: 6px 10px !important; } } .badge { background: var(--laranja); color: #fff; border-radius: 999px; font-size: 0.7rem; padding: 1px 7px; margin-left: 4px; } .wrap { max-width: 1280px; margin: 0 auto; padding: 22px; } .wrap.narrow { max-width: 980px; } .card { background: #fff; border-radius: var(--radius); box-shadow: var(--sombra); padding: 20px; max-width: 100%; border: 1px solid rgba(20, 40, 150, 0.04); } /* Evita que tabelas largas estourem a tela em celulares: a rolagem horizontal fica contida dentro do card, não na página inteira. */ .card:has(table) { overflow-x: auto; -webkit-overflow-scrolling: touch; } .card:has(table) table { min-width: 560px; } .grid { display: grid; gap: 16px; } .grid.cols-2 { grid-template-columns: 1fr 1fr; } .grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .grid.cols-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; } } h1, h2, h3 { margin: 0 0 8px 0; } h1 { font-size: var(--fs-xl); } h2 { font-size: var(--fs-lg); } h3 { font-size: var(--fs-md); } .muted { color: var(--cinza-500); } .small { font-size: var(--fs-sm); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: none; border-radius: 11px; padding: clamp(10px, 2.5vw, 12px) clamp(14px, 3vw, 20px); font-weight: 700; font-size: clamp(0.85rem, 2.5vw, 0.95rem); min-height: 44px; /* área de toque mínima recomendada */ transition: transform .15s, box-shadow .15s, background .15s; } .btn:active { transform: scale(0.98); } .btn-primary { background: var(--preto); color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,0.25); } .btn-primary:hover { background: var(--preto-esc); box-shadow: 0 6px 18px rgba(0,0,0,0.35); } .btn-success { background: var(--verde); color: #fff; box-shadow: 0 4px 14px rgba(22,163,74,0.25); } .btn-success:hover { filter: brightness(0.95); } .btn-danger { background: var(--vermelho); color: #fff; } .btn-outline { background: #fff; border: 1.5px solid var(--cinza-200); color: var(--texto); } .btn-outline:hover { border-color: var(--azul); color: var(--azul); } .btn-laranja { background: var(--laranja); color: #fff; box-shadow: 0 4px 14px rgba(249, 115, 22, 0.3); } .btn-laranja:hover { background: var(--laranja-esc); } .btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; } .btn-sm { padding: 7px 11px; font-size: 0.8rem; border-radius: 8px; } /* Campos de digitação ocupam a linha inteira. Caixas de marcação ficam de fora da regra de propósito — veja o bloco logo abaixo. */ input:not([type="checkbox"]):not([type="radio"]), select, textarea { width: 100%; padding: clamp(9px, 2vw, 11px) clamp(10px, 2vw, 13px); border: 1.5px solid var(--cinza-200); border-radius: 10px; font-size: clamp(0.88rem, 2.5vw, 0.95rem); font-family: inherit; background: #fff; color: var(--texto); min-height: 44px; /* área de toque ampla em celulares */ transition: border-color .15s, box-shadow .15s; } /* ── Caixas de marcação (checkbox / radio) ────────────────────────────────── Um checkbox NÃO é um campo de texto: esticá-lo para width:100% e 44px de altura fazia a caixa engolir a linha inteira e empurrar o rótulo para fora do cartão — era o que cortava os nomes dos recursos na tabela de planos ("Bo:ide", "Ch:ckout"). Aqui ele volta a ter tamanho próprio e fixo. A área de toque confortável no celular fica por conta do