/* =====================================================
BESKIDINFO – NEWS TICKER / CZARNA WERSJA
===================================================== */
.beskidinfo-news-ticker {
--ticker-zielony: #0cab78;
--ticker-zielony-jasny: #39d49f;
--ticker-zielony-ciemny: #078c63;
position: relative;
display: flex;
align-items: center;
width: 100%;
height: 54px;
margin: 0 0 24px;
padding: 6px;
overflow: hidden;
box-sizing: border-box;
background:
linear-gradient(
110deg,
#101211 0%,
#171b19 60%,
#0f1714 100%
);
border: 1px solid rgba(12, 171, 120, 0.28);
border-radius: 12px;
box-shadow:
0 7px 22px rgba(0, 0, 0, 0.16),
0 1px 4px rgba(0, 0, 0, 0.1);
}
/* Delikatna zielona poświata */
.beskidinfo-news-ticker::after {
position: absolute;
top: -40px;
right: 5%;
width: 170px;
height: 110px;
content: "";
pointer-events: none;
background: rgba(12, 171, 120, 0.11);
border-radius: 50%;
filter: blur(30px);
}
/* Zielona etykieta po lewej */
.beskidinfo-ticker-etykieta {
position: relative;
z-index: 5;
flex: 0 0 auto;
display: flex;
align-items: center;
height: 40px;
padding: 0 17px 0 14px;
box-sizing: border-box;
color: #ffffff;
background:
linear-gradient(
135deg,
var(--ticker-zielony) 0%,
var(--ticker-zielony-ciemny) 100%
);
border-radius: 8px;
font-size: 11px;
font-weight: 800;
line-height: 1;
letter-spacing: 0.45px;
text-transform: uppercase;
white-space: nowrap;
box-shadow: 0 5px 14px rgba(12, 171, 120, 0.25);
}
/* Biały punkt w zielonej etykiecie */
.beskidinfo-ticker-etykieta::before {
display: block;
flex: 0 0 auto;
width: 7px;
height: 7px;
margin-right: 9px;
content: "";
background: #ffffff;
border-radius: 50%;
box-shadow:
0 0 0 4px rgba(255, 255, 255, 0.16);
animation:
beskidinfo-ticker-puls
2.2s
ease-in-out
infinite;
}
.beskidinfo-ticker-krotka {
display: none;
}
/* Okno przesuwanych wiadomości */
.beskidinfo-ticker-okno {
position: relative;
z-index: 2;
display: flex;
flex: 1 1 auto;
min-width: 0;
height: 100%;
overflow: hidden;
-webkit-mask-image:
linear-gradient(
to right,
transparent 0,
#000 22px,
#000 calc(100% - 35px),
transparent 100%
);
mask-image:
linear-gradient(
to right,
transparent 0,
#000 22px,
#000 calc(100% - 35px),
transparent 100%
);
}
/* Tor przesuwający wiadomości */
.beskidinfo-ticker-tor {
display: flex;
align-items: center;
width: max-content;
min-width: max-content;
will-change: transform;
animation:
beskidinfo-ticker-ruch
var(--ticker-czas)
linear
infinite;
}
/* Powtarzana grupa wiadomości */
.beskidinfo-ticker-grupa {
display: flex;
flex: 0 0 auto;
align-items: center;
gap: 26px;
padding-left: 28px;
padding-right: 7px;
white-space: nowrap;
}
/* Tytuły artykułów */
.beskidinfo-ticker-link {
position: relative;
color: #ffffff !important;
font-size: 14px;
font-weight: 700;
line-height: 1.25;
text-decoration: none !important;
transition: color 0.2s ease;
}
.beskidinfo-ticker-link:hover,
.beskidinfo-ticker-link:focus {
color: var(--ticker-zielony-jasny) !important;
text-decoration: none !important;
}
/* Zielone separatory */
.beskidinfo-ticker-kropka {
display: block;
flex: 0 0 auto;
width: 6px;
height: 6px;
background: #21c98e;
border-radius: 50%;
opacity: 0.9;
box-shadow:
0 0 0 4px rgba(33, 201, 142, 0.1);
}
/* Zatrzymanie po najechaniu */
.beskidinfo-news-ticker:hover .beskidinfo-ticker-tor,
.beskidinfo-news-ticker:focus-within .beskidinfo-ticker-tor {
animation-play-state: paused;
}
/* Ruch wiadomości */
@keyframes beskidinfo-ticker-ruch {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(-50%, 0, 0);
}
}
/* Delikatne pulsowanie punktu */
@keyframes beskidinfo-ticker-puls {
0%,
100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.6;
transform: scale(0.8);
}
}
/* =====================================================
TABLET
===================================================== */
@media (max-width: 1018px) {
.beskidinfo-news-ticker {
height: 52px;
margin-bottom: 20px;
}
.beskidinfo-ticker-etykieta {
height: 38px;
padding: 0 14px 0 12px;
font-size: 10px;
}
.beskidinfo-ticker-link {
font-size: 13px;
}
}
/* =====================================================
TELEFON
===================================================== */
@media (max-width: 767px) {
.beskidinfo-news-ticker {
height: 48px;
margin-bottom: 18px;
padding: 5px;
border-radius: 10px;
}
.beskidinfo-ticker-etykieta {
height: 36px;
padding: 0 12px;
border-radius: 7px;
font-size: 10px;
}
.beskidinfo-ticker-etykieta::before {
width: 6px;
height: 6px;
margin-right: 7px;
box-shadow:
0 0 0 3px rgba(255, 255, 255, 0.15);
}
.beskidinfo-ticker-pelna {
display: none;
}
.beskidinfo-ticker-krotka {
display: inline;
}
.beskidinfo-ticker-grupa {
gap: 20px;
padding-left: 22px;
padding-right: 4px;
}
.beskidinfo-ticker-link {
font-size: 12px;
font-weight: 700;
}
.beskidinfo-ticker-kropka {
width: 5px;
height: 5px;
box-shadow:
0 0 0 3px rgba(33, 201, 142, 0.08);
}
}
/* Dostępność – wyłączenie animacji systemowych */
@media (prefers-reduced-motion: reduce) {
.beskidinfo-ticker-tor,
.beskidinfo-ticker-etykieta::before {
animation: none;
}
}