/** * LP Theme Variants - Inteligência Brasil * Variantes de cor para cada Landing Page * v1.0.0 * * Usage: Add class to or element * Example: */ /* ======================================== THEME: BLUE (Default - Pentest, Investigação) ======================================== */ .theme-blue, :root { --accent: #60A5FA; --accent-hover: #3B82F6; --accent-glow: rgba(96, 165, 250, 0.3); --border: rgba(96, 165, 250, 0.15); } .theme-blue .hero::before, :root .hero::before { background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2360A5FA' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .theme-blue .hero-badge, :root .hero-badge { background: rgba(96, 165, 250, 0.15); } .theme-blue .service-icon, :root .service-icon { background: rgba(96, 165, 250, 0.15); } .theme-blue .btn-outline:hover, :root .btn-outline:hover { background: rgba(96, 165, 250, 0.1); } /* ======================================== THEME: PURPLE (LGPD, Compliance) ======================================== */ .theme-purple { --accent: #8B5CF6; --accent-hover: #7C3AED; --accent-glow: rgba(139, 92, 246, 0.3); --border: rgba(139, 92, 246, 0.15); } .theme-purple .hero { background: radial-gradient(circle at 20% 20%, rgba(139, 92, 246, 0.15), transparent 50%), radial-gradient(circle at 80% 80%, rgba(96, 165, 250, 0.1), transparent 50%), var(--bg-primary); } .theme-purple .hero::before { background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%238B5CF6' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .theme-purple .hero-badge { background: rgba(139, 92, 246, 0.15); } .theme-purple .service-icon { background: rgba(139, 92, 246, 0.15); } .theme-purple .btn-outline:hover { background: rgba(139, 92, 246, 0.1); } .theme-purple .stats-card-badge { background: rgba(139, 92, 246, 0.2); color: #A78BFA; border-color: rgba(139, 92, 246, 0.3); } /* ======================================== THEME: GREEN (Análise Vulnerabilidades) ======================================== */ .theme-green { --accent: #10B981; --accent-hover: #059669; --accent-glow: rgba(16, 185, 129, 0.3); --border: rgba(16, 185, 129, 0.15); } .theme-green .hero { background: radial-gradient(circle at 20% 20%, rgba(16, 185, 129, 0.15), transparent 50%), radial-gradient(circle at 80% 80%, rgba(96, 165, 250, 0.1), transparent 50%), var(--bg-primary); } .theme-green .hero::before { background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2310B981' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .theme-green .hero-badge { background: rgba(16, 185, 129, 0.15); } .theme-green .service-icon { background: rgba(16, 185, 129, 0.15); } .theme-green .btn-outline:hover { background: rgba(16, 185, 129, 0.1); } .theme-green .stats-card-badge { background: rgba(16, 185, 129, 0.2); color: #34D399; border-color: rgba(16, 185, 129, 0.3); } /* ======================================== THEME: CYAN (Blue Team, CSOC) ======================================== */ .theme-cyan { --accent: #06B6D4; --accent-hover: #0891B2; --accent-glow: rgba(6, 182, 212, 0.3); --border: rgba(6, 182, 212, 0.15); } .theme-cyan .hero { background: radial-gradient(circle at 20% 20%, rgba(6, 182, 212, 0.15), transparent 50%), radial-gradient(circle at 80% 80%, rgba(96, 165, 250, 0.1), transparent 50%), var(--bg-primary); } .theme-cyan .hero::before { background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2306B6D4' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .theme-cyan .hero-badge { background: rgba(6, 182, 212, 0.15); } .theme-cyan .service-icon { background: rgba(6, 182, 212, 0.15); } .theme-cyan .btn-outline:hover { background: rgba(6, 182, 212, 0.1); } .theme-cyan .stats-card-badge { background: rgba(6, 182, 212, 0.2); color: #22D3EE; border-color: rgba(6, 182, 212, 0.3); } /* ======================================== THEME: RED (Resposta a Incidentes) ======================================== */ .theme-red { --accent: #EF4444; --accent-hover: #DC2626; --accent-glow: rgba(239, 68, 68, 0.3); --border: rgba(239, 68, 68, 0.15); } .theme-red .hero { background: radial-gradient(circle at 20% 20%, rgba(239, 68, 68, 0.15), transparent 50%), radial-gradient(circle at 80% 80%, rgba(96, 165, 250, 0.1), transparent 50%), var(--bg-primary); } .theme-red .hero::before { background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23EF4444' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .theme-red .hero-badge { background: rgba(239, 68, 68, 0.15); } .theme-red .service-icon { background: rgba(239, 68, 68, 0.15); } .theme-red .btn-outline:hover { background: rgba(239, 68, 68, 0.1); } .theme-red .stats-card-badge { background: rgba(239, 68, 68, 0.2); color: #F87171; border-color: rgba(239, 68, 68, 0.3); } /* ======================================== THEME: AMBER (Cloud Security) ======================================== */ .theme-amber { --accent: #F59E0B; --accent-hover: #D97706; --accent-glow: rgba(245, 158, 11, 0.3); --border: rgba(245, 158, 11, 0.15); } .theme-amber .hero { background: radial-gradient(circle at 20% 20%, rgba(245, 158, 11, 0.15), transparent 50%), radial-gradient(circle at 80% 80%, rgba(96, 165, 250, 0.1), transparent 50%), var(--bg-primary); } .theme-amber .hero::before { background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23F59E0B' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .theme-amber .hero-badge { background: rgba(245, 158, 11, 0.15); } .theme-amber .service-icon { background: rgba(245, 158, 11, 0.15); } .theme-amber .btn-outline:hover { background: rgba(245, 158, 11, 0.1); } .theme-amber .stats-card-badge { background: rgba(245, 158, 11, 0.2); color: #FBBF24; border-color: rgba(245, 158, 11, 0.3); } /* ======================================== THEME: VIOLET (Computação Forense) ======================================== */ .theme-violet { --accent: #A855F7; --accent-hover: #9333EA; --accent-glow: rgba(168, 85, 247, 0.3); --border: rgba(168, 85, 247, 0.15); } .theme-violet .hero { background: radial-gradient(circle at 20% 20%, rgba(168, 85, 247, 0.15), transparent 50%), radial-gradient(circle at 80% 80%, rgba(96, 165, 250, 0.1), transparent 50%), var(--bg-primary); } .theme-violet .hero::before { background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23A855F7' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .theme-violet .hero-badge { background: rgba(168, 85, 247, 0.15); } .theme-violet .service-icon { background: rgba(168, 85, 247, 0.15); } .theme-violet .btn-outline:hover { background: rgba(168, 85, 247, 0.1); } .theme-violet .stats-card-badge { background: rgba(168, 85, 247, 0.2); color: #C084FC; border-color: rgba(168, 85, 247, 0.3); } /* ======================================== THEME: PINK (Application Security) ======================================== */ .theme-pink { --accent: #EC4899; --accent-hover: #DB2777; --accent-glow: rgba(236, 72, 153, 0.3); --border: rgba(236, 72, 153, 0.15); } .theme-pink .hero { background: radial-gradient(circle at 20% 20%, rgba(236, 72, 153, 0.15), transparent 50%), radial-gradient(circle at 80% 80%, rgba(96, 165, 250, 0.1), transparent 50%), var(--bg-primary); } .theme-pink .hero::before { background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23EC4899' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .theme-pink .hero-badge { background: rgba(236, 72, 153, 0.15); } .theme-pink .service-icon { background: rgba(236, 72, 153, 0.15); } .theme-pink .btn-outline:hover { background: rgba(236, 72, 153, 0.1); } .theme-pink .stats-card-badge { background: rgba(236, 72, 153, 0.2); color: #F472B6; border-color: rgba(236, 72, 153, 0.3); } /* ======================================== THEME: ORANGE (Prevenção de Fraudes) ======================================== */ .theme-orange { --accent: #F97316; --accent-hover: #EA580C; --accent-glow: rgba(249, 115, 22, 0.3); --border: rgba(249, 115, 22, 0.15); } .theme-orange .hero { background: radial-gradient(circle at 20% 20%, rgba(249, 115, 22, 0.15), transparent 50%), radial-gradient(circle at 80% 80%, rgba(96, 165, 250, 0.1), transparent 50%), var(--bg-primary); } .theme-orange .hero::before { background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23F97316' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .theme-orange .hero-badge { background: rgba(249, 115, 22, 0.15); } .theme-orange .service-icon { background: rgba(249, 115, 22, 0.15); } .theme-orange .btn-outline:hover { background: rgba(249, 115, 22, 0.1); } /* Note: stats-card-badge uses orange by default, so no override needed */ /* ======================================== THEME: TEAL (CTI Monitoramento) ======================================== */ .theme-teal { --accent: #14B8A6; --accent-hover: #0D9488; --accent-glow: rgba(20, 184, 166, 0.3); --border: rgba(20, 184, 166, 0.15); } .theme-teal .hero { background: radial-gradient(circle at 20% 20%, rgba(20, 184, 166, 0.15), transparent 50%), radial-gradient(circle at 80% 80%, rgba(96, 165, 250, 0.1), transparent 50%), var(--bg-primary); } .theme-teal .hero::before { background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2314B8A6' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .theme-teal .hero-badge { background: rgba(20, 184, 166, 0.15); } .theme-teal .service-icon { background: rgba(20, 184, 166, 0.15); } .theme-teal .btn-outline:hover { background: rgba(20, 184, 166, 0.1); } .theme-teal .stats-card-badge { background: rgba(20, 184, 166, 0.2); color: #2DD4BF; border-color: rgba(20, 184, 166, 0.3); } /* ======================================== THEME: ROSE (Conscientização/Treinamento) ======================================== */ .theme-rose { --accent: #F472B6; --accent-hover: #EC4899; --accent-glow: rgba(244, 114, 182, 0.3); --border: rgba(244, 114, 182, 0.15); } .theme-rose .hero { background: radial-gradient(circle at 20% 20%, rgba(244, 114, 182, 0.15), transparent 50%), radial-gradient(circle at 80% 80%, rgba(96, 165, 250, 0.1), transparent 50%), var(--bg-primary); } .theme-rose .hero::before { background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23F472B6' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .theme-rose .hero-badge { background: rgba(244, 114, 182, 0.15); } .theme-rose .service-icon { background: rgba(244, 114, 182, 0.15); } .theme-rose .btn-outline:hover { background: rgba(244, 114, 182, 0.1); } .theme-rose .stats-card-badge { background: rgba(244, 114, 182, 0.2); color: #F9A8D4; border-color: rgba(244, 114, 182, 0.3); } /* ======================================== THEME: LIGHT CYAN (Auditoria/Compliance) ======================================== */ .theme-lightcyan { --accent: #22D3EE; --accent-hover: #06B6D4; --accent-glow: rgba(34, 211, 238, 0.3); --border: rgba(34, 211, 238, 0.15); } .theme-lightcyan .hero { background: radial-gradient(circle at 20% 20%, rgba(34, 211, 238, 0.15), transparent 50%), radial-gradient(circle at 80% 80%, rgba(96, 165, 250, 0.1), transparent 50%), var(--bg-primary); } .theme-lightcyan .hero::before { background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2322D3EE' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .theme-lightcyan .hero-badge { background: rgba(34, 211, 238, 0.15); } .theme-lightcyan .service-icon { background: rgba(34, 211, 238, 0.15); } .theme-lightcyan .btn-outline:hover { background: rgba(34, 211, 238, 0.1); } .theme-lightcyan .stats-card-badge { background: rgba(34, 211, 238, 0.2); color: #67E8F9; border-color: rgba(34, 211, 238, 0.3); }