*{
box-sizing:border-box;
}
html,
body{
width:100%;
height:100%;
margin:0;
}
body{
background:#05152d;
font-family:Arial, Helvetica, sans-serif;
color:white;
}
header{
height:90px;
display:flex;
justify-content:space-between;
align-items:center;
padding:10px 20px;
}
.logo img{
height:70px;
width:auto;
}
.titulo{
flex:1;
text-align:center;
}
.titulo h1{
margin:0;
font-size:32px;
font-weight:bold;
}
#hora{
width:220px;
font-size:22px;
font-weight:bold;
text-align:right;
line-height:1.2;
}
.grid{
display:grid;
grid-template-columns:1fr 1fr;
grid-template-rows:1fr 1fr;
height:calc(100vh - 90px);
gap:10px;
padding:10px;
}
.palco{
border-radius:15px;
background:#0d2345;
overflow:hidden;
display:flex;
flex-direction:column;
position:relative;
transition:
transform .4s ease,
box-shadow .4s ease,
border-color .4s ease;
}
/* ========================= */
/* PALCO A */
/* ========================= */
#A{
border:2px solid #d4a000;
background:#0d2345;
}
#A .titulo-palco{
background:linear-gradient(
90deg,
#7a5700,
#c99700
);
padding:10px 15px;
}
#A .palco-nome{
font-size:28px;
font-weight:bold;
margin:0;
}
#A .palco-info{
font-size:16px;
margin-top:3px;
opacity:.95;
}
#A .secao{
padding:10px 15px;
border-top:1px solid rgba(255,255,255,.15);
}
#A .secao-titulo{
font-size:14px;
font-weight:bold;
color:#f0b400;
text-transform:uppercase;
}
#A .agora{
font-size:24px;
font-weight:bold;
margin-top:4px;
}
#A .proximo{
font-size:20px;
font-weight:bold;
margin-top:4px;
}
#A .aviso{
font-size:16px;
line-height:1.3;
margin-top:4px;
}
/* ========================= */
/* PALCO B */
/* ========================= */
#B{
border:2px solid #38b000;
background:#0d2345;
}
#B .titulo-palco{
background:linear-gradient(
90deg,
#145a00,
#38b000
);
padding:10px 15px;
}
#B .palco-nome{
font-size:28px;
font-weight:bold;
margin:0;
}
#B .palco-info{
font-size:16px;
margin-top:3px;
opacity:.95;
}
#B .secao{
padding:10px 15px;
border-top:1px solid rgba(255,255,255,.15);
}
#B .secao-titulo{
font-size:14px;
font-weight:bold;
color:#7dff6b;
text-transform:uppercase;
}
#B .agora{
font-size:24px;
font-weight:bold;
margin-top:4px;
}
#B .proximo{
font-size:20px;
font-weight:bold;
margin-top:4px;
}
#B .aviso{
font-size:16px;
line-height:1.3;
margin-top:4px;
}
/* ========================= */
/* PALCO C */
/* ========================= */
#C{
border:2px solid #2f6db5;
background:#0d2345;
}
#C .titulo-palco{
background:linear-gradient(
90deg,
#163a6d,
#2f6db5
);
padding:10px 15px;
}
#C .palco-nome{
font-size:28px;
font-weight:bold;
margin:0;
}
#C .palco-info{
font-size:16px;
margin-top:3px;
opacity:.95;
}
#C .secao{
padding:10px 15px;
border-top:1px solid rgba(255,255,255,.15);
}
#C .secao-titulo{
font-size:14px;
font-weight:bold;
color:#7fb7ff;
text-transform:uppercase;
}
#C .agora{
font-size:24px;
font-weight:bold;
margin-top:4px;
}
#C .proximo{
font-size:20px;
font-weight:bold;
margin-top:4px;
}
#C .aviso{
font-size:16px;
line-height:1.3;
margin-top:4px;
}
/* ========================= */
/* PALCO D */
/* ========================= */
#D{
border:2px solid #9b5de5;
background:#0d2345;
}
#D .titulo-palco{
background:linear-gradient(
90deg,
#4b1f7a,
#9b5de5
);
padding:10px 15px;
}
#D .palco-nome{
font-size:28px;
font-weight:bold;
margin:0;
}
#D .palco-info{
font-size:16px;
margin-top:3px;
opacity:.95;
}
#D .secao{
padding:10px 15px;
border-top:1px solid rgba(255,255,255,.15);
}
#D .secao-titulo{
font-size:14px;
font-weight:bold;
color:#d9b8ff;
text-transform:uppercase;
}
#D .agora{
font-size:24px;
font-weight:bold;
margin-top:4px;
}
#D .proximo{
font-size:20px;
font-weight:bold;
margin-top:4px;
}
#D .aviso{
font-size:16px;
line-height:1.3;
margin-top:4px;
}
/* ================================= */
/* CELULAR E TABLETS */
/* ================================= */
@media (max-width: 900px){
html,
body{
height:auto;
overflow-y:auto;
}
body{
overflow-y:auto;
}
header{
height:auto;
flex-direction:column;
gap:10px;
padding:15px;
}
.logo img{
height:60px;
}
.titulo{
width:100%;
}
.titulo h1{
font-size:22px;
}
#hora{
width:100%;
text-align:center;
font-size:20px;
}
.grid{
display:flex;
flex-direction:column;
height:auto;
overflow:visible;
padding:10px;
gap:10px;
}
.palco{
width:100%;
min-height:250px;
}
.palco-nome{
font-size:22px !important;
}
.palco-info{
font-size:14px !important;
}
.agora{
font-size:20px !important;
}
.proximo{
font-size:18px !important;
}
.aviso{
font-size:14px !important;
}
}
/* ================================= */
/* DESTAQUE DE ATUALIZAÇÃO */
/* ================================= */
.palco.atualizado{
animation:destaquePalco 8s ease;
}
@keyframes destaquePalco{
0%{
transform:scale(1);
box-shadow:none;
}
15%{
transform:scale(1.01);
box-shadow:
0 0 20px rgba(255,255,255,.7),
0 0 40px rgba(255,255,255,.4);
}
50%{
box-shadow:
0 0 30px rgba(255,255,255,.9),
0 0 60px rgba(255,255,255,.5);
}
100%{
transform:scale(1);
box-shadow:none;
}
}
.palco.atualizado::after{
content:"ATUALIZADO";
position:absolute;
top:10px;
right:10px;
background:#00ff88;
color:#05152d;
font-size:12px;
font-weight:bold;
padding:5px 10px;
border-radius:20px;
box-shadow:
0 0 10px rgba(0,255,136,.8);
}
.logout{
position:fixed;
top:10px;
right:10px;
width:auto;
padding:8px 15px;
font-size:14px;
font-weight:bold;
background:#c62828;
color:white;
border:none;
border-radius:8px;
cursor:pointer;
z-index:9999;
}
.logout:hover{
background:#b71c1c;
}
button:not(.logout){
width:100%;
padding:20px;
font-size:22px;
}