/* Custom styles para MegaVote com Bootstrap 5 */ /* Configurações base */ :root { --bs-font-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --bs-body-font-size: 1.125rem; /* 18px para melhor acessibilidade */ --bs-body-line-height: 1.6; /* Cores customizadas */ --bs-success: #60a33d; /* --bs-success-rgb: 34, 197, 94; */ --bs-success-rgb: 96, 163, 61; /* --megavote-primary: #22c55e; */ --megavote-primary: #60a33d; /* --megavote-primary-dark: #16a34a; */ --megavote-primary-dark: #166434; --megavote-primary-light: #86efac; } /* Modo de alto contraste */ body.high-contrast { --bs-success: #000000; --bs-success-rgb: 0, 0, 0; --bs-primary: #000000; --bs-primary-rgb: 0, 0, 0; --bs-body-color: #000000; --bs-body-bg: #ffffff; --bs-secondary: #333333; --bs-light: #ffffff; --bs-dark: #000000; } body.high-contrast .btn-success { --bs-btn-bg: #000000; --bs-btn-border-color: #000000; --bs-btn-hover-bg: #333333; --bs-btn-hover-border-color: #333333; --bs-btn-active-bg: #333333; --bs-btn-active-border-color: #333333; } body.high-contrast .btn-outline-success { --bs-btn-color: #000000; --bs-btn-border-color: #000000; --bs-btn-hover-bg: #000000; --bs-btn-hover-border-color: #000000; } body.high-contrast .text-success { color: #000000 !important; } body.high-contrast .bg-success { background-color: #000000 !important; } /* Configurações de fonte base */ html { font-size: 18px; /* Base maior para acessibilidade */ } body { font-family: var(--bs-font-sans-serif); line-height: var(--bs-body-line-height); } /* Melhorias de acessibilidade */ .btn { min-height: 44px; /* Tamanho mínimo recomendado WCAG */ font-weight: 500; } .btn-success { --bs-btn-color: #fff; --bs-btn-bg: var(--megavote-primary); --bs-btn-border-color: var(--megavote-primary); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--megavote-primary-dark); --bs-btn-hover-border-color: var(--megavote-primary-dark); --bs-btn-focus-shadow-rgb: 60, 153, 110; --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--megavote-primary-dark); } .btn-success { transition: all 0.2s ease-out; background: linear-gradient(25deg, var(--bs-btn-bg) 0%, var(--bs-blue) 190%); } .btn-success:hover { transition: all 0.2s ease-out; filter: brightness(1.25); } .btn-lg { min-height: 56px; font-size: 1.125rem; padding: 0.75rem 1.5rem; } .form-control { min-height: 48px; font-size: 1.125rem; } .form-control-lg { min-height: 56px; font-size: 1.125rem; } .form-label { font-weight: 600; margin-bottom: 0.75rem; } /* Navegação */ .navbar-brand img { transition: transform 0.2s ease; } .navbar-brand:hover img { transform: scale(1.05); } .nav-link { transition: all 0.2s ease; border-radius: 0.375rem; margin: 0 0.25rem; } .nav-link:hover, .nav-link:focus { background-color: rgba(34, 197, 94, 0.1); color: var(--megavote-primary) !important; } /* Hero Section */ .hero-section { min-height: 80vh; } .min-vh-75 { min-height: 75vh; } /* Cards de serviço */ .service-card { transition: all 0.3s ease; border: 1px solid rgba(0, 0, 0, 0.05); } .service-card:hover { transform: translateY(-8px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important; border-color: var(--megavote-primary); } .service-icon { background: linear-gradient(135deg, var(--megavote-primary), var(--megavote-primary-light)); } /* Números dos passos */ .step-number { background: linear-gradient(135deg, var(--megavote-primary), var(--megavote-primary-dark)); transition: transform 0.2s ease; } .step-number:hover { transform: scale(1.05); } /* Ícones de contato */ .contact-icon { background-color: var(--megavote-primary); } /* Avatares no hero card */ .avatar { border: 2px solid #ffffff; background: linear-gradient(45deg, var(--megavote-primary), #3b82f6); } /* Progress bar animada */ .progress-bar { background: linear-gradient(90deg, var(--megavote-primary), var(--megavote-primary-light)); } /* Botões de redes sociais no footer */ .btn-outline-light { transition: all 0.2s ease; } .btn-outline-light:hover { background-color: var(--megavote-primary); border-color: var(--megavote-primary); transform: translateY(-2px); } /* Formulários */ .form-control:focus { border-color: var(--megavote-primary); box-shadow: 0 0 0 0.25rem rgba(34, 197, 94, 0.25); } .form-check-input:checked { background-color: var(--megavote-primary); border-color: var(--megavote-primary); } .form-check-input:focus { border-color: var(--megavote-primary); box-shadow: 0 0 0 0.25rem rgba(34, 197, 94, 0.25); } /* Estados de erro */ .form-control.is-invalid { border-color: #dc3545; } .form-control.is-invalid:focus { border-color: #dc3545; box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25); } /* Melhorias para foco (acessibilidade) */ *:focus { outline: 2px solid var(--megavote-primary); outline-offset: 2px; } .btn:focus, .form-control:focus, .form-check-input:focus { outline: none; /* Bootstrap já cuida destes */ } /* Animações suaves */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* Responsividade adicional */ @media (max-width: 767.98px) { html { font-size: 16px; /* Ligeiramente menor em mobile */ } .display-4 { font-size: 2.5rem; } .display-5 { font-size: 2rem; } .hero-section { min-height: 60vh; } .min-vh-75 { min-height: auto; } } /* Melhorias para impressão */ @media print { .navbar, .btn, .position-fixed { display: none !important; } body { font-size: 12pt; line-height: 1.4; } .py-5 { padding-top: 1rem !important; padding-bottom: 1rem !important; } } /* Toast customizado */ .toast { --bs-toast-max-width: 400px; } .toast-header { background-color: rgba(34, 197, 94, 0.1); border-bottom: 1px solid rgba(34, 197, 94, 0.2); } /* Badges customizados */ .badge.bg-success { background-color: var(--megavote-primary) !important; } /* Links customizados */ a.text-success { color: var(--megavote-primary) !important; text-decoration: none; transition: all 0.2s ease; } a.text-success:hover { color: var(--megavote-primary-dark) !important; text-decoration: underline; } /* Spinner customizado */ .spinner-border { color: currentColor; } /* Melhorias para o card de login */ .card { border: none; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); } /* Divider customizado */ hr { opacity: 0.3; } /* Alert customizado */ .alert-light { background-color: rgba(34, 197, 94, 0.05); border-color: rgba(34, 197, 94, 0.2); color: #0f5132; } /* Gradientes para elementos especiais */ .bg-gradient-success { background: linear-gradient(135deg, #22c55e, #86efac) !important; } .bg-gradient-primary { background: linear-gradient(135deg, #3b82f6, #93c5fd) !important; } .bg-gradient-info { background: linear-gradient(135deg, #06b6d4, #67e8f9) !important; } /* Melhorias para elementos interativos */ .btn, .card, .form-control { transition: all 0.2s ease-in-out; } /* Estados hover para botões */ .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } /* Melhorias para o navbar em mobile */ @media (max-width: 991.98px) { .navbar-collapse { margin-top: 1rem; padding: 1rem; background-color: rgba(248, 249, 250, 0.95); border-radius: 0.5rem; backdrop-filter: blur(10px); } .navbar-nav .nav-link { padding: 0.75rem 1rem; margin: 0.25rem 0; } } /* Melhorias para acessibilidade de cor */ .text-light-emphasis { color: rgba(255, 255, 255, 0.75) !important; } .text-light-emphasis:hover { color: rgba(255, 255, 255, 1) !important; } /* Estilos para elementos com foco visível */ .btn:focus-visible, .form-control:focus-visible, .nav-link:focus-visible { outline: 2px solid var(--megavote-primary); outline-offset: 2px; } /* Melhorias para o modo escuro (se necessário futuramente) */ @media (prefers-color-scheme: dark) { /* Aqui podem ser adicionados estilos para modo escuro se necessário */ }