*{
box-sizing:border-box;
}
html,
body{
width:100%;
height:100%;
margin:0;
padding:0;
overflow-x:hidden;
background:#000;
font-family:Arial,Helvetica,sans-serif;
}
.broadcast{
width:100%;
min-height:100vh;
min-height:100dvh;
display:flex;
flex-direction:column;
background:#050505;
color:#fff;
}
/* HEADER */
.header{
height:65px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 30px;
background:
linear-gradient(
90deg,
#001b44,
#0066ff
);
}
.title{
font-size:28px;
font-weight:900;
}
#updated{
font-size:14px;
opacity:.8;
}
/* MAIN SCOREBOARD */
#main-scoreboard{
flex:1;
display:flex;
align-items:center;
justify-content:center;
background:
radial-gradient(
circle,
#182848,
#000
);
}
#live-match{
width:100%;
text-align:center;
}
.live-game{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:15px;
}
.team{
font-size:35px;
font-weight:900;
}
.score{
font-size:100px;
font-weight:900;
line-height:1;
color:#00ff66;
}
.clock{
display:inline-flex;
align-items:center;
justify-content:center;
margin-top:20px;
padding:10px 22px;
min-height:48px;
max-width:90%;
background:#d60000;
color:#fff;
border-radius:999px;
font-size:22px;
font-weight:700;
line-height:1.2;
text-align:center;
white-space:normal;
word-break:break-word;
animation:pulse 1.2s infinite;
}
.selector-panel{
background:#111;
border-bottom:1px solid #333;
}
/* TICKER */
.ticker-bar{
height:90px;
overflow:hidden;
background:#111;
}
#ticker-track{
height:100%;
display:flex;
align-items:center;
gap:15px;
}
.ticker-item{
flex-shrink:0;
min-width:300px;
height:60px;
padding:0 20px;
display:flex;
align-items:center;
gap:12px;
background:#222;
border-radius:10px;
border:1px solid #333;
font-size:18px;
font-weight:bold;
}
.status{
padding:
6px 12px;
border-radius:20px;
font-size:12px;
font-weight:bold;
}
.status.live{
background:red;
}
.status.finished{
background:#555;
}
.status.upcoming{
background:#0066ff;
}
.status.goal{
background:#00a000;
}
.status.news{
background:#8e44ad;
}
.status.weather{
background:#0099cc;
}
@keyframes pulse{
0%{
box-shadow:
0 0 0 0
rgba(255,0,0,.8);
}
70%{
box-shadow:
0 0 0 15px
rgba(255,0,0,0);
}
100%{
box-shadow:none;
}
}
/* MOBILE */
@media(max-width:600px){
.title{
font-size:20px;
}
.clock{
margin-top:12px;
padding:8px 14px;
min-height:38px;
max-width:95%;
font-size:15px;
line-height:1.3;
}
#main-scoreboard{
min-height:240px;
display:flex;
align-items:center;
justify-content:center;
background:
radial-gradient(
circle,
#182848,
#000
);
}
.team{
font-size:30px;
}
.score{
font-size:70px;
}
.featured-controls{
flex-direction:column;
align-items:stretch;
}
#gameSelector{
width:100%;
}
.team-row{
gap:20px;
flex-direction:column;
}
.team{
font-size:28px;
}
.score{
font-size:70px;
}
/* ==========================
MOBILE TICKER
========================== */
.ticker-bar{
height:60px;
}
#ticker-track{
gap:8px;
padding:0 6px;
}
.ticker-item{
min-width:220px;
height:44px;
padding:0 12px;
gap:8px;
border-radius:8px;
font-size:13px;
}
.status{
padding:4px 8px;
font-size:10px;
white-space:nowrap;
}
}
.featured-controls{
background:#111;
padding:15px;
display:flex;
align-items:center;
gap:15px;
}
.featured-controls select{
flex:1;
padding:10px;
font-size:16px;
border-radius:8px;
}
.league{
font-size:20px;
opacity:.7;
margin-bottom:20px;
}
.team-row{
display:flex;
align-items:center;
justify-content:center;
gap:50px;
}
.team{
font-size:35px;
font-weight:900;
}
.flag{
font-size:45px;
}
#game-selector-list{
display:flex;
gap:10px;
overflow-x:auto;
padding:10px;
background:#111;
}
.game-card{
cursor:pointer;
padding:8px 12px;
background:#222;
color:white;
border-radius:10px;
white-space:nowrap;
font-size:15px;
font-weight:bold;
border:1px solid #333;
transition:.2s;
}
.game-card:hover{
background:#0066ff;
}
/* ==========================
PROMO BANNER
========================== */
.promo-banner{
margin:18px 0;
padding:8px 12px;
text-align:center;
border-radius:12px;
background:linear-gradient(90deg,#001f3f,#004b8d,#001f3f);
border:2px solid #ffd700;
box-shadow:0 0 15px rgba(255,215,0,.35);
}
.promo-main{
font-size:24px;
font-weight:bold;
color:#fff;
letter-spacing:1px;
}
.promo-sub{
margin-top:6px;
font-size:17px;
color:#ffe082;
}
.promo-site{
margin-top:6px;
font-size:20px;
font-weight:bold;
color:#00ffcc;
}
@media (max-width:900px){
.promo-banner{
margin:8px;
padding:8px 12px;
}
.promo-main{
font-size:15px;
}
.promo-sub{
font-size:11px;
}
.promo-site{
font-size:13px;
}
}
/* =========================================================
SCOREBOARD HEADER
========================================================= */
.scoreboard-header {
position: relative;
z-index: 1000;
width: 100%;
background: #0b1220;
border-bottom:
1px solid rgba(255,255,255,.08);
}
.scoreboard-header-inner {
max-width: 1400px;
margin: 0 auto;
min-height: 64px;
padding: 0 18px;
display: flex;
align-items: center;
gap: 14px;
}
/* =========================================================
MENU BUTTON
========================================================= */
.scoreboard-header .menu-btn {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
border: 0;
border-radius: 8px;
background:
rgba(255,255,255,.08);
color: #ffffff;
font-size: 1.2rem;
cursor: pointer;
}
/* =========================================================
BRAND
========================================================= */
.scoreboard-brand {
color: #ffffff;
text-decoration: none;
font-size: 1rem;
font-weight: 900;
letter-spacing: .04em;
white-space: nowrap;
}
.scoreboard-brand:hover {
color: #facc15;
}
/* =========================================================
NAVIGATION
========================================================= */
.scoreboard-nav {
margin-left: auto;
display: flex;
align-items: center;
gap: 3px;
}
.scoreboard-nav a {
padding: 8px 10px;
color: #cbd5e1;
text-decoration: none;
border-radius: 7px;
font-size: .82rem;
font-weight: 650;
transition:
background .2s ease,
color .2s ease;
}
.scoreboard-nav a:hover {
color: #ffffff;
background:
rgba(255,255,255,.08);
}
.scoreboard-nav a.active {
color: #ffffff;
background:
rgba(255,255,255,.11);
}
/* =========================================================
UPDATED TEXT
========================================================= */
.scoreboard-header #updated {
flex: 0 0 auto;
color: #94a3b8;
font-size: .72rem;
white-space: nowrap;
}
/* =========================================================
MOBILE NAV BUTTON
========================================================= */
.scoreboard-nav-toggle {
display: none;
width: 40px;
height: 40px;
padding: 8px;
border: 0;
border-radius: 8px;
background:
rgba(255,255,255,.07);
cursor: pointer;
}
.scoreboard-nav-toggle span {
display: block;
width: 100%;
height: 2px;
margin: 5px 0;
background: #ffffff;
border-radius: 2px;
}
/* =========================================================
TABLET / MOBILE
========================================================= */
@media (max-width: 900px) {
.scoreboard-header-inner {
min-height: 60px;
padding: 0 12px;
gap: 9px;
}
.scoreboard-nav-toggle {
display: block;
margin-left: auto;
}
.scoreboard-nav {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
margin: 0;
padding: 10px 14px 16px;
flex-direction: column;
align-items: stretch;
gap: 3px;
background: #0b1220;
border-top:
1px solid rgba(255,255,255,.08);
border-bottom:
1px solid rgba(255,255,255,.08);
box-shadow:
0 14px 25px rgba(0,0,0,.3);
}
.scoreboard-nav.open {
display: flex;
}
.scoreboard-nav a {
padding: 11px 13px;
font-size: .9rem;
}
.scoreboard-header #updated {
font-size: .66rem;
}
}
/* =========================================================
SMALL PHONES
========================================================= */
@media (max-width: 520px) {
.scoreboard-brand {
font-size: .82rem;
}
.scoreboard-header #updated {
display: none;
}
.scoreboard-header .menu-btn,
.scoreboard-nav-toggle {
width: 36px;
height: 36px;
}
}