/* =========================================================================== tema-claro-escuro.css — modo claro/escuro das páginas públicas renderizadas no servidor (SEO): /servicos, /servicos/ e as institucionais (/contato, /politica-de-privacidade, /termos-de-uso, /trocas-e-devolucoes). COMO FUNCIONA 1. O (e o ) recebem a classe `dark` quando o visitante escolhe o modo escuro. A escolha vive em localStorage["tema"] e é aplicada por um script inline no — ANTES da primeira pintura, para a página não nascer branca e "piscar" para o preto (o mesmo cuidado da bio Ultra). Por isso os seletores são `html.dark` E `body.dark`: o script do roda quando o ainda não existe e só consegue marcar o . 2. Toda cor passa a sair das variáveis abaixo. O claro usa os MESMOS valores que estas páginas já publicavam (--cinza-100, --cinza-200, --sombra…), então quem nunca clicar no botão continua vendo exatamente o site de antes. O escuro troca os valores sem tocar em nenhum conteúdo. 3. O botão 🌙/☀️ (#btnTema) e o resto da interação ficam em /js/tema-claro-escuro.js. O QUE NÃO MUDA DE PROPÓSITO • O header (.topbar) e o rodapé (footer/.footer-app) são PRETOS nos dois modos (--header): a marca GRAN branco + TECH laranja precisa do fundo preto para funcionar também no claro. • O verde do WhatsApp (.btn-zap/.btn-zap-grande) e o laranja das faixas de destaque continuam sendo cores de MARCA: o tema não as repinta por cima. Só o verde de texto sobre eles é ajustado para continuar legível. =========================================================================== */ /* --------------------------------------------------------------------------- 1. Variáveis do tema --------------------------------------------------------------------------- */ :root { /* Superfícies e texto */ --bg: #f5f7fc; /* fundo da página (o --cinza-100 de sempre) */ --bg2: #ffffff; /* faixas claras dentro da página */ --text: #111111; /* texto corrido */ --muted: #6b7280; /* legendas e textos de apoio (--cinza-500) */ --card: #ffffff; /* cartões, blocos e caixas */ --cardBorder: #e6e9f2; /* borda dos cartões (--cinza-200) */ --superficie: #f3f4f6; /* caixas internas (o antigo --azul-claro) */ --titulo: #0f0f0f; /* títulos dentro dos cartões */ --header: #000000; /* topbar e rodapé: preto nos DOIS modos */ /* Marca */ --accent: #FF6A00; /* laranja GranTech */ --accent-texto: #c2410c; /* o mesmo laranja, escuro o bastante para TEXTO sobre branco (o #FF6A00 puro dá 3,0:1 e reprova em AA nos títulos pequenos) */ --glow: 0 8px 28px rgba(20, 40, 150, 0.09); /* = a --sombra que estas páginas já usavam no modo claro */ /* Hero (usado pela institucional no escuro) */ --heroFrom: #000000; --heroTo: #fff7ed; } html.dark, body.dark { --bg: #000000; /* fundo preto puro, como na Home */ --bg2: #0a0a0a; --text: #ffffff; --muted: #a1a1aa; --card: #111111; --cardBorder: rgba(255, 106, 0, 0.35); /* a borda vira o próprio brilho */ --superficie: #161616; --titulo: #ffffff; --header: #000000; /* o header continua preto: é a marca */ --accent: #FF6A00; --accent-texto: #ff8a3d; /* no preto o laranja claro é que lê bem */ --glow: 0 0 18px rgba(255, 106, 0, 0.25), 0 0 32px rgba(255, 106, 0, 0.12); --heroFrom: #000000; --heroTo: #2a1500; } /* --------------------------------------------------------------------------- 2. Base — fundo e texto com transição suave entre os modos --------------------------------------------------------------------------- */ body { background: var(--bg); color: var(--text); transition: background .3s, color .3s; } /* Header e rodapé: preto nos dois modos (a marca GranTech depende disso). O rodapé perde o gradiente da cor primária da loja: no claro ele era preto-azulado e no escuro ficaria com a cor da marca no meio da página. */ body .topbar, body .footer-app, body footer { background: var(--header) !important; transition: background .3s, color .3s; } /* --------------------------------------------------------------------------- 3. Botão do tema (#btnTema) — ao lado da busca, no header --------------------------------------------------------------------------- */ #btnTema, .btn-tema { border: 1px solid rgba(255, 255, 255, .25); background: transparent; color: #fff; border-radius: 999px; padding: 6px 10px; /* 14px (e não 11px) porque o glifo do emoji já nasce pequeno dentro da própria caixa: a 11px o 🌙/☀️ ficava quase invisível no meio da pílula. O resto do estilo (borda, fundo, raio, padding) segue como pedido. */ font-size: 14px; line-height: 1; cursor: pointer; flex-shrink: 0; /* O texto do botão é só o emoji: pedir a fonte de emoji primeiro garante o glifo COLORIDO do sistema (Android, iPhone, Windows) em vez do símbolo monocromático que a fonte de texto costuma ter para ☀. */ font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", "EmojiOne Color", sans-serif; } #btnTema { min-width: 34px; text-align: center; } /* No modo escuro o "TECH" ganha o brilho laranja da marca (o header já é o mesmo preto nos dois modos, então a diferença de leitura fica só aqui). */ html.dark .topbar .marca-texto .tech, body.dark .topbar .marca-texto .tech, html.dark footer .marca-texto .tech, body.dark footer .marca-texto .tech, html.dark footer strong .tech, body.dark footer strong .tech { text-shadow: 0 0 12px rgba(255, 106, 0, .6); } #btnTema:hover, .btn-tema:hover { background: rgba(255, 255, 255, .18); } #btnTema:focus-visible, .btn-tema:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* --------------------------------------------------------------------------- 4. Cartões e superfícies O seletor começa por `body` de propósito: o CSS destas páginas é escrito inline no