/* ============================================================ tema-cliente-sancloud-dark.css — Identidade Sancloud DARK ============================================================ Variante escura/vibrante da identidade Sancloud, criada pro redesign v2.0 "Energy" (resposta ao feedback do público: "muito claro, sem energia, queremos como Hostgator/Hostinger"). Pilares visuais: - Fundo navy quase preto com pontos de luz azuis profundos - Ciano elétrico (mais vibrante que o sky padrão) + roxo accent - Glows neon nos elementos interativos - Glassmorphism nos cards (vidro fosco escuro) - Gradients animados e respirantes Variáveis cruciais (mesmas do tema-cliente-sancloud.css, mas com valores diferentes — design system reage automaticamente): - --cor-primaria, --cor-acento (+ variantes) - --cor-primaria-rgb, --cor-acento-rgb, --cor-acento-clara-rgb - --fonte-principal, --url-logo, --nome-marca ATENÇÃO: este arquivo SOBRESCREVE também as variáveis de COR NEUTRA (texto, fundo, borda) porque no dark mode elas precisam inverter. Em tema-cliente normal não fazemos isso. Versão: v1.0.0 (2026-05-25 — parte do redesign v2.0 "Energy") ============================================================ */ :root { /* ============================================================ PALETA DA MARCA — vibrant tech ============================================================ */ /* Cor primária — navy escuro profundo (era #002147 no light) */ --cor-primaria: #0F1729; --cor-primaria-escura: #070B17; /* quase preto */ --cor-primaria-clara: #1E2D4A; /* navy médio */ --cor-primaria-rgb: 15, 23, 41; /* Cor de acento — CIANO ELÉTRICO (Cloud puro, escolha do Daniel). Era #0EA5E9 no light → agora #00D4FF (saturação maior, glow forte) */ --cor-acento: #00D4FF; --cor-acento-escura: #00A4C9; --cor-acento-clara: #5EEFFF; --cor-acento-rgb: 0, 212, 255; --cor-acento-clara-rgb: 94, 239, 255; /* Cor secundária — CIANO MAIS CLARO (paleta Cloud puro escolhida). Em vez de roxo, mantemos a família azul/ciano pra coerência com a marca. Usado em variações de gradient e destaques secundários. */ --cor-acento-2: #5EEFFF; --cor-acento-2-escura: #38BDF8; --cor-acento-2-clara: #A0F5FF; --cor-acento-2-rgb: 94, 239, 255; /* ============================================================ CORES NEUTRAS INVERTIDAS — DARK MODE ============================================================ Sobrescreve as do tema-base.css. Em modo escuro, "branco" deixa de ser fundo e vira surface elevation; "fundo-claro" vira surface média; etc. Pensar em camadas (Material Design dark surface elevation): - Layer 0 (background da página): #070B17 (escuro absoluto) - Layer 1 (cards normais): #0F1729 - Layer 2 (cards em destaque): #182238 - Layer 3 (modais, popovers): #1E2D4A ============================================================ */ /* Inverte as cores neutras pra contexto escuro */ --branco: #0F1729; /* "branco" = surface elevation 1 */ --fundo-claro: #070B17; /* mais escuro = layer 0 (página) */ --fundo-suave: #182238; /* layer 2 (cards destaque) */ --fundo: var(--fundo-claro); /* Bordas ficam mais visíveis em dark — branco com opacidade */ --borda: rgba(255, 255, 255, 0.08); --borda-escura: rgba(255, 255, 255, 0.14); /* ============================================================ TEXTOS — INVERTIDOS PRO DARK ============================================================ */ --texto-titulo: #F8FAFC; /* "preto" vira branco quase puro */ --texto-corpo: #CBD5E1; /* cinza claro confortável */ --texto-suave: #94A3B8; /* cinza médio (legendas) */ --texto-claro: #64748B; /* cinza escuro (placeholders) */ /* ============================================================ SOMBRAS NEON — pra contexto dark, sombras escuras desaparecem. No lugar, usamos GLOWS coloridos como "sombra". ============================================================ */ --sombra-sm: 0 1px 3px rgba(0, 0, 0, 0.5); --sombra-md: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04); --sombra-lg: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 40px rgba(var(--cor-acento-rgb), 0.08); --sombra-xl: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 60px rgba(var(--cor-acento-rgb), 0.12); --sombra-2xl: 0 30px 70px rgba(0, 0, 0, 0.7), 0 0 100px rgba(var(--cor-acento-rgb), 0.2); /* Glows neon — usar em elementos interativos premium */ --glow-acento: 0 0 30px rgba(var(--cor-acento-rgb), 0.6), 0 0 60px rgba(var(--cor-acento-rgb), 0.3); --glow-acento-forte: 0 0 40px rgba(var(--cor-acento-rgb), 0.8), 0 0 80px rgba(var(--cor-acento-rgb), 0.5), 0 0 120px rgba(var(--cor-acento-rgb), 0.25); /* glow-misto agora é só ciano (paleta cloud puro) */ --glow-misto: var(--glow-acento); --glow-primario: var(--glow-acento); /* compat com tema light */ /* ============================================================ GRADIENTES DARK ============================================================ */ /* Hero: aurora ciano sobre navy escuro (paleta Cloud puro). Usa só tons de ciano/azul — coerente com identidade "nuvem". */ --gradient-hero: radial-gradient(ellipse 80% 60% at 20% 10%, rgba(var(--cor-acento-rgb), 0.28) 0%, transparent 50%), radial-gradient(ellipse 70% 50% at 80% 90%, rgba(var(--cor-acento-2-rgb), 0.18) 0%, transparent 55%), radial-gradient(ellipse 50% 40% at 50% 50%, rgba(14, 165, 233, 0.12) 0%, transparent 60%), linear-gradient(180deg, #070B17 0%, #0F1729 100%); /* Aurora pra seções escuras secundárias */ --gradient-aurora: radial-gradient(circle at 20% 20%, rgba(var(--cor-acento-rgb), 0.22) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(var(--cor-acento-2-rgb), 0.15) 0%, transparent 50%); /* CTA: gradient ciano elétrico → azul céu → ciano puro (assinatura visual v2.0 Cloud puro) */ --gradient-cta: linear-gradient(135deg, #00D4FF 0%, #38BDF8 50%, #0EA5E9 100%); /* Da marca (botões coloridos, badges) */ --gradient-marca: linear-gradient(135deg, var(--cor-acento) 0%, var(--cor-acento-2) 100%); /* Padrão de grid em branco semi-transparente pro dark */ --pattern-grid: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M0 .5H40M.5 0V40' stroke='%23ffffff' stroke-opacity='0.04' fill='none'/%3E%3C/svg%3E"); /* ============================================================ GLASSMORPHISM — vidro fosco escuro pra cards premium ============================================================ Use em cards com .glass ou .card-glass: background: var(--glass-bg); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-borda); ============================================================ */ --glass-bg: rgba(15, 23, 41, 0.5); --glass-bg-forte: rgba(15, 23, 41, 0.7); --glass-blur: blur(20px) saturate(180%); --glass-borda: rgba(255, 255, 255, 0.1); --glass-borda-hover: rgba(0, 212, 255, 0.4); /* ============================================================ TIPOGRAFIA ============================================================ */ --fonte-principal: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --fonte-titulo: var(--fonte-principal); /* ============================================================ ASSETS DA MARCA ============================================================ */ --url-logo: url('/img/logo.png'); --nome-marca: 'Sancloud'; /* ============================================================ MODO ATIVO (flag pra CSS condicional) ============================================================ */ --modo: 'dark'; color-scheme: dark; }