html,
body{
margin:0;
padding:0;
width:100%;
height:100%;
overflow:hidden;
background:#050505;
font-family:Arial,sans-serif;
}
body{
position:fixed;
inset:0;
overflow:hidden;
}
.topbar{
position:fixed;
top:0;
left:0;
right:0;
height:42px;
display:flex;
justify-content:space-between;
align-items:center;
padding:0 18px;
background:rgba(0,0,0,.92);
border-bottom:1px solid #202020;
box-sizing:border-box;
backdrop-filter:blur(10px);
z-index:10000;
}
.top-left,
.top-centre,
.top-right{
display:flex;
align-items:center;
gap:12px;
color:#fff;
}
.top-centre{
position:absolute;
left:50%;
transform:translateX(-50%);
white-space:nowrap;
font-weight:bold;
}
.stat{
display:flex;
align-items:center;
gap:6px;
cursor:default;
}
.stat b{
font-weight:700;
}
#map{
position:fixed;
top:42px;
left:0;
right:0;
bottom:0;
width:100%;
}
.logo{
position:absolute;
top:62px;
left:80px;
z-index:2000;
color:white;
text-shadow:0 0 15px rgba(255,0,0,.4);
}
.logo-title{
font-size:34px;
font-weight:bold;
}
.logo span{
color:#ff2b2b;
}
.live-indicator{
margin-top:2px;
font-size:14px;
font-weight:700;
letter-spacing:3px;
color:#ff4b4b;
}
.live-indicator::before{
content:"●";
color:#ff3030;
margin-right:6px;
animation:livePulse 1.8s infinite ease-in-out;
}
@keyframes livePulse{
0%{
opacity:.4;
transform:scale(.85);
text-shadow:0 0 4px #ff3030;
}
50%{
opacity:1;
transform:scale(1.2);
text-shadow:
0 0 12px #ff3030,
0 0 22px #ff3030;
}
100%{
opacity:.4;
transform:scale(.85);
text-shadow:0 0 4px #ff3030;
}
}
.report-btn{
position:absolute;
top:62px;
right:20px;
z-index:6000;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
padding:14px 24px;
color:#fff;
text-decoration:none;
font-weight:700;
border-radius:14px;
border:1px solid rgba(255,60,60,.45);
background:rgba(18,18,18,.45);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
box-shadow:
0 0 18px rgba(255,0,0,.18),
inset 0 0 12px rgba(255,255,255,.05);
transition:.25s;
}
.report-btn:hover{
background:#b50000;
border-color:#ff4040;
box-shadow:
0 0 24px rgba(255,40,40,.35);
}
.menu-btn{
position:absolute;
top:62px;
left:380px;
z-index:6000;
width:54px;
height:54px;
display:flex;
align-items:center;
justify-content:center;
border:1px solid rgba(255,60,60,.45);
border-radius:14px;
background:rgba(18,18,18,.45);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
color:#fff;
cursor:pointer;
font-size:24px;
box-shadow:
0 0 25px rgba(255,0,0,.15),
inset 0 0 18px rgba(255,255,255,.04);
transition:.25s;
}
.menu-btn:hover{
border-color:#ff3b3b;
box-shadow:
0 0 30px rgba(255,0,0,.45),
inset 0 0 20px rgba(255,255,255,.08);
}
.sidebar{
position:absolute;
top:42px;
left:-340px;
width:320px;
height:calc(100vh - 42px);
background:rgba(10,10,10,.95);
backdrop-filter:blur(12px);
border-right:1px solid #222;
z-index:11000;
transition:.3s;
overflow:auto;
}
.sidebar.open{
left:0;
}
.sidebar h2{
color:white;
padding:20px;
margin:0;
border-bottom:1px solid #222;
}
.leaflet-top{
top:42px;
}
.sidebar a{
display:block;
color:#ddd;
text-decoration:none;
padding:15px 20px;
border-bottom:1px solid #1a1a1a;
}
.sidebar a:hover{
background:#181818;
}
.incident-panel{
position:fixed;
right:-450px;
top:42px;
width:420px;
height:calc(100vh - 42px);
background:rgba(10,10,10,.95);
backdrop-filter:blur(12px);
border-left:1px solid #222;
z-index:11000;
transition:right .3s;
overflow-y:auto;
overflow-x:hidden;
-webkit-overflow-scrolling:touch;
color:white;
}
.incident-panel.open{
right:0;
}
.incident-content{
padding:25px;
}
.incident-title{
font-size:28px;
margin-bottom:10px;
}
.badge{
display:inline-block;
margin:3px;
padding:6px 12px;
border-radius:20px;
background:#222;
}
.close-btn{
float:right;
width:38px;
height:38px;
display:flex;
align-items:center;
justify-content:center;
border-radius:10px;
background:rgba(20,20,20,.45);
backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,.08);
color:#fff;
cursor:pointer;
font-size:22px;
transition:.25s;
}
.close-btn:hover{
color:#ff5555;
border-color:#ff4444;
box-shadow:0 0 16px rgba(255,0,0,.35);
}
.search-overlay{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background:rgba(0,0,0,.6);
z-index:20000;
display:none;
align-items:center;
justify-content:center;
padding:20px;
}
.search-overlay.open{
display:flex;
}
.search-modal{
position:relative;
width:600px;
max-width:100%;
max-height:85vh;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
background:rgba(10,10,10,.95);
backdrop-filter:blur(12px);
border:1px solid rgba(212,17,17,.5);
border-radius:16px;
box-shadow:
0 0 40px rgba(255,0,0,.35),
0 20px 60px rgba(0,0,0,.6);
padding:25px;
color:white;
}
.search-input{
width:100%;
padding:12px;
margin-bottom:15px;
background:#111;
border:1px solid #333;
border-radius:8px;
color:white;
font-size:16px;
}
.search-input:focus{
outline:none;
border-color:#d41111;
}
.search-results{
display:flex;
flex-direction:column;
gap:10px;
}
.search-result-item{
background:rgba(255,255,255,.03);
border:1px solid #222;
border-radius:10px;
padding:14px;
cursor:pointer;
transition:.2s;
}
.search-result-item:hover{
border-color:#d41111;
background:rgba(212,17,17,.08);
}
.search-result-title{
font-weight:bold;
font-size:16px;
margin-bottom:6px;
}
.search-result-meta{
font-size:13px;
color:#999;
display:flex;
gap:12px;
flex-wrap:wrap;
}
.search-empty{
color:#777;
text-align:center;
padding:30px 10px;
font-size:14px;
}
.floating-control.hidden{
opacity:0;
visibility:hidden;
pointer-events:none;
transform:translateY(-12px);
transition:.25s;
}
.leaflet-container{
background:#050505;
}
.leaflet-tile{
filter:
brightness(0.55)
contrast(1.3)
saturate(1.15);
}
.vote-btn{
flex:1;
padding:12px;
background:#181818;
border:1px solid #333;
color:#ddd;
border-radius:8px;
font-size:14px;
font-weight:600;
cursor:pointer;
transition:.2s;
}
.vote-btn:hover{
background:#222;
border-color:#666;
}
.verify-btn:hover{
border-color:#00aa55;
}
.fake-btn:hover{
border-color:#cc3333;
}
#newsTicker{
position:fixed;
left:0;
right:0;
bottom:0;
height:42px;
background:rgba(5,5,5,.92);
border-top:1px solid #222;
overflow:hidden;
z-index:9000;
display:flex;
align-items:center;
}
#newsTickerInner{
display:inline-flex;
align-items:center;
white-space:nowrap;
position:absolute;
left:100%;
top:50%;
transform:translateY(-50%);
animation:tickerScroll 45s linear infinite;
will-change:transform;
color:white;
font-size:15px;
font-weight:bold;
}
#newsTickerInner span{
display:inline-block;
flex:none;
margin-right:70px;
}
#timelineBar{
position:fixed;
overflow:hidden;
left:20px;
right:20px;
bottom:48px;
padding:14px 18px 16px;
border-radius:18px;
background:rgba(15,15,15,.35);
backdrop-filter:blur(22px);
-webkit-backdrop-filter:blur(22px);
border:1px solid rgba(255,255,255,.08);
box-shadow:
0 10px 40px rgba(0,0,0,.45),
0 0 25px rgba(255,0,0,.08),
inset 0 1px 0 rgba(255,255,255,.10),
inset 0 -1px 0 rgba(0,0,0,.45);
z-index:8999;
}
#timelineBar::before{
content:"";
position:absolute;
top:1px;
left:2%;
width:96%;
height:42%;
border-radius:18px 18px 80px 80px;
background:linear-gradient(
180deg,
rgba(255,255,255,.18) 0%,
rgba(255,255,255,.08) 35%,
rgba(255,255,255,0) 100%
);
pointer-events:none;
}
.timeline-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:12px;
}
.timeline-title{
color:white;
font-weight:bold;
letter-spacing:1px;
}
#timelineText{
color:#ff6666;
font-weight:bold;
}
.timeline-labels{
display:flex;
justify-content:space-between;
margin-top:10px;
color:#999;
font-size:11px;
font-weight:bold;
}
#timelineSlider{
width:100%;
appearance:none;
-webkit-appearance:none;
height:8px;
border-radius:8px;
background:linear-gradient(
90deg,
#444,
#ff3b3b
);
outline:none;
}
#timelineSlider::-webkit-slider-thumb{
-webkit-appearance:none;
width:22px;
height:22px;
border-radius:50%;
background:#ff3b3b;
border:3px solid white;
cursor:pointer;
box-shadow:
0 0 18px rgba(255,60,60,.7);
}
#timelineSlider::-moz-range-thumb{
width:22px;
height:22px;
border:none;
border-radius:50%;
background:#ff3b3b;
}
@keyframes tickerScroll{
from{
transform:translate(0,-50%);
}
to{
transform:translate(-100%,-50%);
}
}
/* ---------- TOP BAR ---------- */
.breaking-toast{
position:fixed;
top:95px;
right:20px;
width:320px;
padding:18px;
background:rgba(15,15,15,.96);
border:1px solid #d41111;
border-radius:12px;
color:white;
cursor:pointer;
z-index:999999;
box-shadow:0 0 30px rgba(255,0,0,.45);
transform:translateX(120%);
transition:.4s;
}
.breaking-toast.show{
transform:translateX(0);
}
.breaking-toast.dismissed{
opacity:0;
pointer-events:none;
}
@media (max-width:768px){
.topbar{
position:fixed;
top:0;
left:0;
right:0;
height:78px;
display:grid;
grid-template-columns:1fr 1fr;
grid-template-rows:36px 36px;
align-items:center;
padding:4px 10px;
box-sizing:border-box;
z-index:10000;
}
.top-left{
grid-column:1;
grid-row:1;
white-space:nowrap;
font-size:13px;
}
.top-right{
grid-column:2;
grid-row:1;
justify-content:flex-end;
gap:8px;
font-size:13px;
}
.top-centre{
position:static;
transform:none;
grid-column:1 / span 2;
grid-row:2;
justify-content:center;
font-size:14px;
white-space:nowrap;
}
#map{
position:fixed;
top:78px;
left:0;
right:0;
bottom:0;
}
.leaflet-top{
top:78px;
}
.logo{
top:92px;
left:20px;
font-size:22px;
}
.menu-btn{
top:88px;
right:20px;
left:auto;
width:46px;
height:46px;
font-size:20px;
}
.report-btn{
top:155px;
left:50%;
transform:translateX(-50%);
width:260px;
max-width:75vw;
right:auto;
padding:12px 20px;
}
.sidebar{
top:78px;
left:-100%;
width:100%;
height:calc(100vh - 78px);
}
.incident-panel{
position:fixed;
top:78px;
right:-100%;
width:100%;
height:calc(100dvh - 78px);
overflow-y:auto;
-webkit-overflow-scrolling:touch;
}
.live-indicator{
display:block;
margin-left:0;
margin-top:2px;
font-size:12px;
letter-spacing:1px;
}
/* Report Incident button sits at top:155px with ~44-48px height on phones,
so keep the toast well clear of it (and the menu button above it). */
.breaking-toast{
top:212px;
left:20px;
right:20px;
width:auto;
transform:translateY(-40px);
opacity:0;
}
.breaking-toast.show{
transform:translateY(0);
opacity:1;
}
.search-modal{
width:100%;
max-height:100dvh;
height:100dvh;
border-radius:0;
}
}