/* sistema_votacao/css/style.css */ /* --- Variáveis CSS: Paleta de Cores e Tipografia (Vermelho/Padrão) --- */ :root { /* Cores Primárias (Vermelho E-Vote) */ --primary-main-color: #EE4036; /* Vermelho padrão do projeto */ --primary-dark-color: #D03128; /* Vermelho mais escuro para hover */ --primary-light-bg: #FDECEA; /* Vermelho muito claro para fundos */ /* Cores de Acento/Destaque */ --accent-color: #28A745; /* Verde vibrante para sucesso */ --accent-dark-color: #218838; /* Verde mais escuro para hover */ /* Cores de Feedback/Alerta */ --danger-color: #DC3545; /* Vermelho para perigo/erros */ --warning-color: #FFC107; /* Amarelo para avisos */ --info-color: #17A2B8; /* Azul para informações */ /* Cores Neutras */ --white-color: #FFFFFF; --light-grey-bg: #F8F9FA; --medium-grey-border: #DEE2E6; --dark-grey-text: #343A40; --medium-grey-text: #6C757D; /* Tipografia */ --font-family: 'calibri', sans-serif; /* Adicione no dos seus PHPs: */ } /* --- Estilos Gerais --- */ body { font-family: var(--font-family); background-color: var(--light-grey-bg); color: var(--dark-grey-text); line-height: 1.6; } /* --- Navbar (Barra de Navegação) --- */ .navbar { background-color: var(--primary-main-color) !important; /* Força a cor primária */ box-shadow: 0 2px 8px rgba(0,0,0,0.1); padding: 0.8rem 1rem; } .navbar-brand, .nav-link { color: var(--white-color) !important; font-weight: 500; transition: color 0.3s ease; } .navbar-brand:hover, .nav-link:hover { color: rgba(255, 255, 255, 0.8) !important; } .navbar-toggler { border-color: rgba(255, 255, 255, 0.5) !important; } .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important; } /* --- Botões (Personalização Bootstrap) --- */ .btn-primary { background-color: var(--primary-main-color) !important; border-color: var(--primary-main-color) !important; color: var(--white-color) !important; font-weight: 500; border-radius: 8px; transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .btn-primary:hover { background-color: var(--primary-dark-color) !important; border-color: var(--primary-dark-color) !important; box-shadow: 0 2px 6px rgba(0,0,0,0.15); } /* --- Cards --- */ .card-header { background-color: var(--primary-main-color); color: var(--white-color); border-radius: 11px 11px 0 0; font-weight: 600; padding: 0.9rem 1.25rem; border-bottom: 1px solid var(--primary-dark-color); } /* O resto do seu CSS continua aqui... */ /* STYLE VEIO DO ARQUIVO DASHBOARD */ body { background-color: #f0f2f5; } .navbar { /* background-color: #007bff; Cor primária do Bootstrap */ background-color: #ee4036; } .navbar .nav-link, .navbar .navbar-brand { color: #ffffff !important; } .navbar .nav-link:hover { color: #e2e6ea !important; } .dashboard-container { padding: 30px 15px; } .card { border: none; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); margin-bottom: 20px; } .card-header { background-color: #ee4036; color: white; border-bottom: 1px solid rgba(0,0,0,.125); border-radius: 8px 8px 0 0; font-weight: bold; } .status-badge { font-size: 0.85em; padding: 0.4em 0.8em; border-radius: 0.25rem; color: white; background-color: gray; } .status-badge.pendente { background-color: #ffc107; color: #333; } /* Amarelo */ .status-badge.ativa { background-color: #28a745; } /* Verde */ .status-badge.finalizada { background-color: #6c757d; } /* Cinza */ .status-badge.cancelada { background-color: #dc3545; } /* Vermelho */ .btn-action { margin-left: 5px; } .no-votations { text-align: center; padding: 50px; background-color: #ffffff; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.05); } .no-votations i { font-size: 3em; color: #ccc; margin-bottom: 20px; } .container2 { background-color: #ffffff; padding: 30px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); margin-top: 30px; margin-bottom: 30px; } .form-label { font-weight: bold; } .option-item { border: 1px solid #dee2e6; border-radius: 5px; padding: 15px; margin-bottom: 15px; background-color: #f8f9fa; } .option-item .btn-danger { float: right; margin-top: -5px; } .preview-image { max-width: 100px; max-height: 100px; object-fit: cover; border-radius: 5px; margin-top: 10px; border: 1px solid #ddd; } /* --- ESTILOS PARA A NOVA SEÇÃO HERÓI COM VÍDEO --- */ .hero-video-section { position: relative; height: 90vh; /* Altura da seção */ display: flex; align-items: center; justify-content: center; text-align: center; color: var(--white-color); overflow: hidden; } #heroVideo { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; transform: translateX(-50%) translateY(-50%); background-size: cover; } .hero-video-section::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); /* Filtro escuro para legibilidade */ z-index: -50; } .hero-video-section .container { background-color: transparent; /* Remove o fundo branco do container padrão */ box-shadow: none; } /* --- ESTILOS PARA A PÁGINA DE PLANOS (planos.php) --- */ .pricing-header { max-width: 700px; } .pricing-card { transition: transform 0.3s ease, box-shadow 0.3s ease; border: 1px solid var(--medium-grey-border); border-radius: 12px; } .pricing-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); } .pricing-card .card-header { background-color: transparent; border-bottom: 1px solid var(--medium-grey-border); color: var(--dark-grey-text); font-weight: 600; } .pricing-card .card-title { font-size: 2.8rem; font-weight: 700; color: var(--dark-grey-text); } .pricing-card .list-unstyled li { padding: 0.5rem 0; color: var(--medium-grey-text); } .pricing-card .list-unstyled li i { color: var(--accent-color); margin-right: 8px; } /* Estilo para o plano popular */ .popular-plan { border-width: 2px; border-color: var(--primary-main-color) !important; position: relative; } .popular-badge { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background-color: var(--primary-main-color); color: var(--white-color); font-size: 0.8rem; padding: 0.3rem 0.8rem; border-radius: 20px; font-weight: 600; } /* --- Seção FAQ --- */ .faq-section .accordion-button:not(.collapsed) { color: var(--primary-main-color); background-color: var(--primary-light-bg); } .faq-section .accordion-button:focus { box-shadow: 0 0 0 0.25rem rgba(238, 64, 54, 0.25); } /* ... (todo o seu CSS anterior) ... */ /* --- ESTILOS PARA A PÁGINA DE VOTAÇÃO (visualizar_votacao.php) --- */ .option-card { border: 2px solid transparent; /* Borda inicial transparente */ border-radius: 12px; margin-bottom: 20px; overflow: hidden; background-color: var(--light-grey-bg); transition: all 0.2s ease-in-out; cursor: pointer; } .option-card:hover { transform: translateY(-5px); box-shadow: 0 8px 16px rgba(0,0,0,0.1); } .option-card.selected { border-color: var(--primary-main-color) !important; box-shadow: 0 0 0 0.25rem rgba(238, 64, 54, 0.4) !important; /* Sombra vermelha */ } .option-card.voted { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; } .option-card img { width: 100%; height: 200px; object-fit: cover; } .status-badge { font-size: 0.85em; padding: 0.4em 0.8em; border-radius: 0.25rem; color: white; } .status-badge.pendente { background-color: #ffc107; color: #333; } .status-badge.ativa { background-color: #28a745; } .status-badge.finalizada { background-color: #6c757d; } .status-badge.cancelada { background-color: #dc3545; } /* ... (todo o seu CSS anterior) ... */ /* --- ESTILOS PARA A PÁGINA DE VOTAÇÃO (visualizar_votacao.php) --- */ .option-card { border: 2px solid transparent; /* Borda inicial transparente */ border-radius: 12px; margin-bottom: 20px; overflow: hidden; background-color: var(--light-grey-bg); transition: all 0.2s ease-in-out; cursor: pointer; } .option-card:hover { transform: translateY(-5px); box-shadow: 0 8px 16px rgba(0,0,0,0.1); } .option-card.selected { border-color: var(--primary-main-color) !important; box-shadow: 0 0 0 0.25rem rgba(238, 64, 54, 0.4) !important; /* Sombra vermelha */ } .option-card.voted { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; } .option-card img { width: 100%; height: 200px; object-fit: cover; } .status-badge { font-size: 0.85em; padding: 0.4em 0.8em; border-radius: 0.25rem; color: white; } .status-badge.pendente { background-color: #ffc107; color: #333; } .status-badge.ativa { background-color: #28a745; } .status-badge.finalizada { background-color: #6c757d; } .status-badge.cancelada { background-color: #dc3545; } /* --- ESTILOS PARA OS CARDS DE RESULTADOS (KPIs) --- */ .kpi-card { background-color: var(--white-color); border: 1px solid var(--medium-grey-border); border-radius: 12px; padding: 1.5rem; display: flex; align-items: center; transition: all 0.3s ease; } .kpi-card:hover { transform: translateY(-5px); box-shadow: 0 8px 16px rgba(0,0,0,0.1); } .kpi-icon { font-size: 2.5rem; padding: 20px; border-radius: 50%; margin-right: 1.5rem; color: var(--white-color); } .kpi-icon.bg-primary { background-color: var(--primary-main-color); } .kpi-icon.bg-success { background-color: var(--accent-color); } .kpi-icon.bg-info { background-color: var(--info-color); } .kpi-content .kpi-label { font-size: 1rem; color: var(--medium-grey-text); } .kpi-content .kpi-value { font-size: 2rem; font-weight: 700; color: var(--dark-grey-text); } /* ... (todo o seu CSS anterior) ... */ /* --- ESTILOS PARA O BANNER DE CONSENTIMENTO DE COOKIES --- */ .cookie-consent-banner { position: fixed; bottom: 0; left: 0; width: 100%; background-color: var(--dark-grey-text); /* Fundo escuro para contraste */ color: var(--white-color); padding: 1rem; z-index: 1050; /* Garante que fique acima de outros elementos */ display: none; /* Começa escondido */ align-items: center; justify-content: space-between; box-shadow: 0 -2px 10px rgba(0,0,0,0.2); } .cookie-consent-banner p { margin: 0; font-size: 0.9rem; } .cookie-consent-banner a { color: var(--primary-main-color); /* Usa a cor primária para o link */ text-decoration: underline; font-weight: bold; } .cookie-consent-banner .btn { margin-left: 1rem; white-space: nowrap; /* Evita que o texto do botão quebre */ }