/* ==========================================================
GIOP - VERÃO SEGURO
style.css
Tema Tático
==========================================================*/
/* ===========================
VARIÁVEIS
=========================== */
:root{
--bg:#121212;
--card:#1D1D1D;
--header:#202020;
--button:#303030;
--button-hover:#3C3C3C;
--button-main:#46573D;
--text:#F2F2F2;
--text-secondary:#BBBBBB;
--border:#3A3A3A;
--success:#4F6A42;
--danger:#B22222;
--radius:10px;
--transition:.25s;
--shadow:0 3px 12px rgba(0,0,0,.35);
--font:Segoe UI,Roboto,Arial,sans-serif;
}
/* ===========================
RESET
=========================== */
*{
margin:0;
padding:0;
box-sizing:border-box;
}
html{
scroll-behavior:smooth;
}
body{
background:var(--bg);
color:var(--text);
font-family:var(--font);
min-height:100vh;
overflow-x:hidden;
}
/* ===========================
SCROLLBAR
=========================== */
::-webkit-scrollbar{
width:10px;
}
::-webkit-scrollbar-track{
background:#1A1A1A;
}
::-webkit-scrollbar-thumb{
background:#505050;
border-radius:20px;
}
::-webkit-scrollbar-thumb:hover{
background:#6B6B6B;
}
/* ===========================
HEADER
=========================== */
.header{
position:sticky;
top:0;
z-index:999;
display:flex;
align-items:center;
gap:18px;
background:var(--header);
border-bottom:1px solid var(--border);
padding:14px 18px;
box-shadow:var(--shadow);
}
.logo{
width:58px;
height:58px;
object-fit:contain;
}
.header h1{
font-size:24px;
font-weight:700;
letter-spacing:2px;
}
.header h2{
margin-top:3px;
color:var(--text-secondary);
font-size:13px;
letter-spacing:1px;
font-weight:400;
}
/* ===========================
CONTEÚDO
=========================== */
main{
width:min(100%,900px);
margin:auto;
padding:18px;
padding-bottom:110px;
}
/* ===========================
ACORDEÕES
=========================== */
.accordion{
margin-bottom:18px;
background:var(--card);
border:1px solid var(--border);
border-radius:var(--radius);
overflow:hidden;
box-shadow:var(--shadow);
}
.accordion-header{
width:100%;
border:none;
outline:none;
background:var(--card);
color:var(--text);
cursor:pointer;
display:flex;
justify-content:space-between;
align-items:center;
padding:18px;
font-size:17px;
font-weight:600;
transition:var(--transition);
}
.accordion-header:hover{
background:#282828;
}
.accordion-header::after{
content:"▼";
transition:.25s;
font-size:13px;
}
.accordion.active .accordion-header::after{
transform:rotate(180deg);
}
.accordion-content{
max-height:0;
overflow:hidden;
transition:max-height .35s ease;
background:#1B1B1B;
padding:0 18px;
}
.accordion.active .accordion-content{
padding:18px;
max-height:4000px;
}
/* ===========================
TÍTULOS
=========================== */
.section-title{
margin-bottom:18px;
color:var(--text-secondary);
font-size:15px;
font-weight:600;
}
/* ===========================
CARTÕES
=========================== */
.card{
background:#242424;
border:1px solid var(--border);
border-radius:var(--radius);
padding:18px;
margin-bottom:16px;
box-shadow:var(--shadow);
}
.card h3{
margin-bottom:15px;
font-size:16px;
color:var(--text);
}
.card p{
color:var(--text-secondary);
line-height:1.6;
}
/* ===========================
SEPARADORES
=========================== */
hr{
border:none;
border-top:1px solid var(--border);
margin:22px 0;
}
/* ===========================
UTILITÁRIOS
=========================== */
.hidden{
display:none !important;
}
.center{
text-align:center;
}
.right{
text-align:right;
}
.mt10{
margin-top:10px;
}
.mt20{
margin-top:20px;
}
.mb10{
margin-bottom:10px;
}
.mb20{
margin-bottom:20px;
}
/*bloco2*/
/* ==========================================================
FORMULÁRIOS
========================================================== */
.form-group{
display:flex;
flex-direction:column;
margin-bottom:18px;
}
.form-group label{
margin-bottom:8px;
color:var(--text-secondary);
font-size:14px;
font-weight:600;
letter-spacing:.3px;
}
/* ==========================================================
INPUTS / SELECTS / TEXTAREAS
========================================================== */
input,
select,
textarea{
width:100%;
min-height:50px;
padding:12px 14px;
border:1px solid var(--border);
border-radius:var(--radius);
background:#2A2A2A;
color:var(--text);
font-size:16px;
outline:none;
transition:all .20s ease;
font-family:inherit;
}
textarea{
min-height:130px;
resize:vertical;
line-height:1.5;
}
input:focus,
select:focus,
textarea:focus{
border-color:var(--success);
box-shadow:0 0 0 3px rgba(79,106,66,.25);
}
input::placeholder,
textarea::placeholder{
color:#8E8E8E;
}
/* readonly */
input[readonly],
textarea[readonly]{
background:#232323;
color:#CFCFCF;
}
/* disabled */
input:disabled,
select:disabled,
textarea:disabled{
opacity:.6;
cursor:not-allowed;
}
/* ==========================================================
SELECT
========================================================== */
select{
cursor:pointer;
}
select option{
background:#2A2A2A;
color:#F2F2F2;
}
/* ==========================================================
CHECKBOXES
========================================================== */
.checkbox-group{
display:flex;
align-items:center;
gap:12px;
margin:14px 0;
}
.checkbox-group input[type="checkbox"]{
width:22px;
height:22px;
min-height:auto;
accent-color:var(--success);
cursor:pointer;
}
.checkbox-group label{
margin:0;
cursor:pointer;
color:var(--text);
}
/* ==========================================================
BOTÕES
========================================================== */
button{
min-height:50px;
border:none;
border-radius:var(--radius);
background:var(--button);
color:var(--text);
font-size:15px;
font-weight:600;
cursor:pointer;
transition:all .20s ease;
}
button:hover{
background:var(--button-hover);
}
button:active{
transform:scale(.98);
}
/* botão principal */
.btn-primary{
background:var(--button-main);
}
.btn-primary:hover{
background:#56684A;
}
/* botão secundário */
.btn-secondary{
background:#3A3A3A;
}
/* botão perigo */
.btn-danger{
background:var(--danger);
}
/* ==========================================================
BOTÃO GPS
========================================================== */
#btnGPS{
width:100%;
margin:10px 0 20px;
background:#364535;
font-size:16px;
}
#btnGPS:hover{
background:#445744;
}
/* ==========================================================
SUSPEITOS / VÍTIMAS
========================================================== */
#suspeitosContainer,
#vitimasContainer{
display:flex;
flex-direction:column;
gap:18px;
margin-top:18px;
}
/* cartão */
.person-card{
background:#242424;
border:1px solid var(--border);
border-radius:12px;
padding:18px;
box-shadow:var(--shadow);
}
.person-card h3{
margin-bottom:18px;
font-size:17px;
color:var(--text);
border-bottom:1px solid var(--border);
padding-bottom:10px;
}
/* ==========================================================
GRID
========================================================== */
.form-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
}
.form-grid-3{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px;
}
/* ==========================================================
CONTADORES
========================================================== */
.counter{
display:flex;
align-items:center;
gap:12px;
}
.counter input{
text-align:center;
}
/* ==========================================================
MENSAGEM
========================================================== */
#mensagem{
background:#161616;
border:1px solid var(--border);
color:#F5F5F5;
font-family:Consolas, "Courier New", monospace;
font-size:14px;
line-height:1.5;
min-height:320px;
}
/* ==========================================================
VALIDAÇÃO
========================================================== */
.error{
border-color:var(--danger) !important;
}
.success{
border-color:var(--success) !important;
}
.validation-message{
margin-top:6px;
color:#E16A6A;
font-size:13px;
}
/* ==========================================================
MOBILE
========================================================== */
@media (max-width:768px){
.form-grid{
grid-template-columns:1fr;
}
.form-grid-3{
grid-template-columns:1fr;
}
input,
select,
textarea{
font-size:16px;
}
}