/* ============================================================================ JD CÂMARAS FRIAS — DESIGN TOKENS Sistema de variáveis CSS para landing pages de captação de leads. Conceito: "Engenharia do Frio" — precisão técnica, escala industrial, tipografia pesada de chão de fábrica com detalhes sutis de frost/temperatura. ============================================================================ */ :root { /* ==================================================================== CORES DE MARCA — Extraídas do site jdcamarasfrias.com.br REGRA: nenhuma cor nova fora destes matizes é permitida. ==================================================================== */ /* Azul primário — cor de marca, ícones, linhas, elementos grandes */ --jd-azul: #4181BC; /* Marinho — títulos, texto de destaque, fundos escuros de seção */ --jd-marinho: #3B497F; /* Ciano — destaque, hover, detalhes sobre fundo escuro */ --jd-ciano: #37B4CE; /* Gradiente ciano do logo — EXCLUSIVO para logo e 1 detalhe gráfico por tela */ --jd-ciano-logo-de: #00B0F8; --jd-ciano-logo-para:#00E0F0; /* Royal — botão de ação principal no cabeçalho */ --jd-royal: #1700BC; /* Amarelo — CTA destaque. SEMPRE com texto #101010, NUNCA texto branco */ --jd-amarelo: #F1BD43; /* Verde — WhatsApp e confirmação. Texto branco OK (4.6:1) */ --jd-verde: #008749; /* Preto — texto principal sobre claro */ --jd-preto: #101010; /* Grafite — fundos escuros */ --jd-grafite: #1D1D1D; /* Noite — fundo escuro de hero, mesmo tom do site */ --jd-noite: #12111F; /* Cinza texto — texto de apoio (4.7:1 sobre branco) */ --jd-cinza-texto: #737373; /* Cinza aço — bordas, ícones inativos, texto sobre escuro */ --jd-cinza-aco: #9CADC2; /* Gelo — fundo de seções alternadas */ --jd-gelo: #EBEEF5; /* Cinza claro — fundo de cards */ --jd-cinza-claro: #F5F5F5; /* Borda — bordas e divisores */ --jd-borda: #D8DDE3; /* Branco — fundo e texto sobre escuro */ --jd-branco: #FFFFFF; /* ==================================================================== CORES DERIVADAS — tons para estados interativos e variações sutis Cada derivado tem comentário da cor de origem. ==================================================================== */ /* De --jd-azul (#4181BC) */ --jd-azul-hover: #3671A8; /* azul 12% mais escuro, hover de elementos azuis */ --jd-azul-10: rgba(65, 129, 188, 0.10); /* fundo suave azul */ --jd-azul-20: rgba(65, 129, 188, 0.20); /* fundo médio azul */ /* De --jd-marinho (#3B497F) */ --jd-marinho-claro: #4A5A94; /* marinho mais claro, hover de títulos */ --jd-marinho-escuro: #2D3863; /* marinho mais escuro, fundos de seção */ --jd-marinho-95: rgba(59, 73, 127, 0.95); /* overlay marinho */ /* De --jd-ciano (#37B4CE) */ --jd-ciano-hover: #2DA3BB; /* ciano hover */ --jd-ciano-15: rgba(55, 180, 206, 0.15); /* brilho suave ciano */ --jd-ciano-30: rgba(55, 180, 206, 0.30); /* brilho médio ciano */ /* De --jd-royal (#1700BC) */ --jd-royal-hover: #1200A0; /* royal mais escuro, hover de CTA header */ --jd-royal-claro: #2A15D0; /* royal claro, foco */ /* De --jd-amarelo (#F1BD43) */ --jd-amarelo-hover: #E5AE2E; /* amarelo hover, 10% mais escuro */ --jd-amarelo-claro: #F5CB66; /* amarelo claro, fundo de destaque */ --jd-amarelo-15: rgba(241, 189, 67, 0.15); /* glow amarelo suave */ /* De --jd-verde (#008749) */ --jd-verde-hover: #007540; /* verde hover, mais escuro */ --jd-verde-claro: #00A05A; /* verde claro, fundo suave */ /* De --jd-grafite (#1D1D1D) */ --jd-grafite-claro: #2A2A2A; /* grafite claro, cards sobre fundo escuro */ /* De --jd-noite (#12111F) */ --jd-noite-claro: #1A192A; /* noite claro, seção escura alternada */ --jd-noite-90: rgba(18, 17, 31, 0.90); /* overlay noite */ /* De --jd-gelo (#EBEEF5) */ --jd-gelo-hover: #E0E4EE; /* gelo hover, cards hover */ /* De --jd-borda (#D8DDE3) */ --jd-borda-forte: #C5CCD4; /* borda mais visível em estados ativos */ /* ==================================================================== TIPOGRAFIA Famílias: Archivo (display/títulos) + Inter (corpo) 2 famílias, 3 pesos: Archivo 800, Inter 400 e 600 ==================================================================== */ --jd-font-display: 'Archivo', 'Arial Black', sans-serif; --jd-font-body: 'Inter', 'Segoe UI', system-ui, sans-serif; /* Pesos */ --jd-fw-regular: 400; --jd-fw-semibold: 600; --jd-fw-black: 800; /* Escala tipográfica fluida — clamp(mín, preferido, máx) Mobile-first: 360 → 768 → 1280 */ --jd-text-xs: clamp(0.75rem, 0.72rem + 0.1vw, 0.75rem); /* 12px mínimo */ --jd-text-sm: clamp(0.75rem, 0.7rem + 0.15vw, 0.875rem); /* 12 → 14 */ --jd-text-base: clamp(0.875rem, 0.83rem + 0.2vw, 1rem); /* 14 → 16 */ --jd-text-md: clamp(1rem, 0.93rem + 0.3vw, 1.25rem); /* 16 → 20 */ --jd-text-lg: clamp(1.25rem, 1.1rem + 0.5vw, 1.75rem); /* 20 → 28 */ --jd-text-xl: clamp(1.5rem, 1.2rem + 1vw, 2.5rem); /* 24 → 40 */ --jd-text-2xl: clamp(2rem, 1.5rem + 1.8vw, 3.5rem); /* 32 → 56 */ --jd-text-3xl: clamp(2.5rem, 1.8rem + 2.5vw, 4.5rem); /* 40 → 72 */ /* Line heights */ --jd-lh-tight: 1.05; --jd-lh-heading: 1.15; --jd-lh-body: 1.6; --jd-lh-loose: 1.8; /* Letter spacing */ --jd-ls-tight: -0.03em; --jd-ls-normal: -0.01em; --jd-ls-wide: 0.04em; --jd-ls-ultra: 0.12em; /* ==================================================================== ESPAÇAMENTO — Base 8px ==================================================================== */ --jd-space-1: 4px; --jd-space-2: 8px; --jd-space-3: 12px; --jd-space-4: 16px; --jd-space-5: 24px; --jd-space-6: 32px; --jd-space-7: 40px; --jd-space-8: 48px; --jd-space-9: 64px; --jd-space-10: 80px; --jd-space-11: 96px; --jd-space-12: 120px; /* Espaçamento de seção (vertical) */ --jd-section-py: clamp(48px, 6vw, 96px); --jd-section-px: clamp(16px, 4vw, 64px); /* Container */ --jd-container-max: 1200px; --jd-container-narrow: 880px; /* ==================================================================== BORDAS E RAIOS ==================================================================== */ --jd-radius: 6px; /* raio único do sistema */ --jd-radius-sm: 4px; /* derivado, pequenos elementos */ --jd-radius-pill: 999px; /* chips e badges */ --jd-border-width: 1px; --jd-border: var(--jd-border-width) solid var(--jd-borda); --jd-border-escuro: var(--jd-border-width) solid rgba(255,255,255,0.12); /* ==================================================================== SOMBRAS — Máximo 2 níveis ==================================================================== */ --jd-sombra-1: 0 1px 3px rgba(16, 16, 16, 0.08), 0 4px 12px rgba(16, 16, 16, 0.06); --jd-sombra-2: 0 2px 8px rgba(16, 16, 16, 0.10), 0 12px 36px rgba(16, 16, 16, 0.12); /* ==================================================================== Z-INDEX ==================================================================== */ --jd-z-base: 1; --jd-z-card: 10; --jd-z-sticky: 100; --jd-z-header: 200; --jd-z-overlay: 300; --jd-z-modal: 400; --jd-z-toast: 500; --jd-z-whatsapp: 600; /* ==================================================================== ANIMAÇÃO E TRANSIÇÃO ==================================================================== */ --jd-duration-fast: 150ms; --jd-duration-base: 250ms; --jd-duration-slow: 400ms; --jd-duration-enter: 500ms; --jd-ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94); --jd-ease-in-out: cubic-bezier(0.42, 0, 0.58, 1); --jd-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --jd-ease-smooth: cubic-bezier(0.22, 0.61, 0.36, 1); /* ==================================================================== GRADIENTES UTILITÁRIOS ==================================================================== */ /* Gradiente do logo — uso exclusivo */ --jd-grad-logo: linear-gradient(135deg, var(--jd-ciano-logo-de), var(--jd-ciano-logo-para)); /* Gradiente fundo escuro (seções) */ --jd-grad-noite: linear-gradient(180deg, var(--jd-noite) 0%, var(--jd-grafite) 100%); /* Gradiente marinho (hero) */ --jd-grad-marinho: linear-gradient(160deg, var(--jd-marinho-escuro) 0%, var(--jd-noite) 100%); /* Fade-out para leitura sobre imagem */ --jd-grad-overlay: linear-gradient(180deg, rgba(18,17,31,0) 0%, rgba(18,17,31,0.85) 100%); /* ==================================================================== ENGENHARIA CRIOGÊNICA & EFEITOS INDUSTRIAIS (Diferenciais JD) ==================================================================== */ /* Atmosfera Criogênica & Frost */ --jd-frost-glow: 0 0 25px rgba(0, 224, 240, 0.25); --jd-frost-glow-strong: 0 0 40px rgba(0, 224, 240, 0.45); --jd-frost-border: rgba(55, 180, 206, 0.35); --jd-frost-border-hover: rgba(0, 224, 240, 0.85); --jd-frost-glass: rgba(18, 17, 31, 0.78); --jd-frost-glass-clean: rgba(255, 255, 255, 0.82); --jd-frost-blur: blur(16px); /* Aço Industrial & Detalhes Metálicos */ --jd-steel-edge: inset 0 1px 0 rgba(255, 255, 255, 0.20), inset 0 -1px 0 rgba(0, 0, 0, 0.35); --jd-steel-bevel: inset 1px 1px 0 rgba(255, 255, 255, 0.15), inset -1px -1px 0 rgba(0, 0, 0, 0.40); --jd-steel-grad: linear-gradient(135deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.02) 100%); --jd-steel-rivet: radial-gradient(circle at 35% 35%, #CCD6E2 0%, #3B497F 60%, #12111F 100%); /* Blueprint CAD & Grid Técnico */ --jd-cad-grid: radial-gradient(rgba(55, 180, 206, 0.20) 1px, transparent 1px); --jd-cad-blueprint: linear-gradient(to right, rgba(55, 180, 206, 0.08) 1px, transparent 1px), linear-gradient(to bottom, rgba(55, 180, 206, 0.08) 1px, transparent 1px); --jd-cad-ruler: repeating-linear-gradient(90deg, rgba(55, 180, 206, 0.3) 0px, rgba(55, 180, 206, 0.3) 1px, transparent 1px, transparent 10px); /* Telemetria Digital LED (Display de Termostato Industrial) */ --jd-led-cyan: #00E0F0; --jd-led-cyan-glow: 0 0 10px rgba(0, 224, 240, 0.9), 0 0 22px rgba(0, 224, 240, 0.5); --jd-led-green: #00E676; --jd-led-green-glow: 0 0 10px rgba(0, 230, 118, 0.9), 0 0 20px rgba(0, 230, 118, 0.45); --jd-led-amber: #FFB300; --jd-led-amber-glow: 0 0 10px rgba(255, 179, 0, 0.85); /* Profundidade 3D & Spotlight */ --jd-sombra-3d: 0 14px 40px -12px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.07); --jd-sombra-spotlight: 0 24px 60px -20px rgba(0, 176, 248, 0.30), 0 0 0 1px rgba(0, 224, 240, 0.5); } /* ==================================================================== MOTION PREFERENCES — Respeita preferência do usuário ==================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --jd-duration-fast: 0ms; --jd-duration-base: 0ms; --jd-duration-slow: 0ms; --jd-duration-enter: 0ms; } }