.meteo-widget{
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
max-width:100%;
background:#fff;
border-radius:12px;
box-shadow:0 4px 20px rgba(0,0,0,.12);
padding:24px;
color:#1a1a1a;
margin:20px 0;
} .meteo-current{
display:grid;
grid-template-columns:auto 1fr;
gap:24px;
align-items:center;
padding:24px;
background:linear-gradient(135deg,#ba1d41 0%,#9a1535 100%);
border-radius:10px;
margin-bottom:20px;
color:#fff;
position:relative;
overflow:hidden;
background-size:200% 200%;
animation:gradientShift 12s ease-in-out infinite;
}
.meteo-current::before{
content:"";
position:absolute;
top:-50%;
left:-30%;
width:60%;
height:200%;
background:radial-gradient(ellipse at center, rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 60%);
transform:rotate(25deg);
animation:sheenMove 10s ease-in-out infinite;
pointer-events:none;
}
.meteo-current-left{
display:flex;
align-items:center;
gap:16px;
}
.meteo-current-icon{
width:80px;
height:80px;
object-fit:contain;
filter:drop-shadow(0 2px 8px rgba(0,0,0,.3));
animation:float 4s ease-in-out infinite;
}
.meteo-current-temp{
font-size:52px;
font-weight:700;
line-height:1;
animation:tempPop 600ms ease both;
}
.meteo-unit{
font-size:22px;
margin-left:4px;
opacity:.9;
}
.meteo-current-right{
display:flex;
flex-direction:column;
gap:8px;
}
.meteo-location{
font-size:22px;
font-weight:600;
}
.meteo-updated{
font-size:12px;
opacity:.8;
}
.meteo-feels{
font-size:15px;
opacity:.95;
}
.meteo-desc{
font-size:16px;
opacity:.95;
margin:6px 0;
} .meteo-extra{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:10px;
margin-top:14px;
}
.meteo-extra-item{
background:rgba(255,255,255,.15);
padding:10px 12px;
border-radius:6px;
font-size:13px;
display:flex;
align-items:center;
gap:6px;
transition:background .2s ease;
opacity:0;
transform:translateY(12px);
animation:slideInUp 500ms ease forwards;
}
.meteo-extra-item:hover{
background:rgba(255,255,255,.25);
} .meteo-map{
margin:20px 0;
height:380px;
border-radius:10px;
overflow:hidden;
box-shadow:0 2px 12px rgba(0,0,0,.1);
}
.meteo-map iframe{
border:0;
width:100%;
height:100%;
} .meteo-forecast-cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
gap:14px;
padding:4px;
}
.meteo-card{
background:#fff;
border-radius:10px;
padding:18px;
text-align:center;
cursor:pointer;
transition:all .25s ease;
border:2px solid #f0f0f0;
box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.meteo-card:hover{
transform:translateY(-4px);
box-shadow:0 6px 20px rgba(186,29,65,.15);
border-color:#ba1d41;
}
.meteo-card-top{
display:flex;
flex-direction:column;
align-items:center;
gap:10px;
margin-bottom:10px;
}
.meteo-card-day{
font-weight:700;
font-size:15px;
color:#ba1d41;
text-transform:uppercase;
letter-spacing:.5px;
}
.meteo-card-icon{
width:56px;
height:56px;
object-fit:contain;
}
.meteo-card-temps{
font-weight:700;
font-size:19px;
color:#1a1a1a;
}
.meteo-card-desc{
font-size:13px;
color:#666;
margin:8px 0;
min-height:36px;
display:flex;
align-items:center;
justify-content:center;
}
.meteo-card-more{
margin-top:14px;
font-size:12px;
color:#555;
text-align:left;
line-height:1.7;
max-height:0;
opacity:0;
overflow:hidden;
transition:all .3s ease;
}
.meteo-card.active .meteo-card-more{
max-height:280px;
opacity:1;
}
.meteo-more-item{
padding:6px 10px;
display:flex;
align-items:center;
gap:8px;
background:#f9f9f9;
border-radius:5px;
margin-bottom:5px;
}
.meteo-more-item:last-child{
margin-bottom:0;
}
.meteo-label{
font-weight:600;
color:#ba1d41;
}
.meteo-card.active{
background:linear-gradient(135deg,#ba1d41 0%,#9a1535 100%);
color:#fff;
border-color:#ba1d41;
transform:scale(1.04);
box-shadow:0 8px 24px rgba(186,29,65,.25);
}
.meteo-card.active .meteo-card-day,
.meteo-card.active .meteo-card-temps,
.meteo-card.active .meteo-card-desc,
.meteo-card.active .meteo-card-more{
color:#fff;
}
.meteo-card.active .meteo-more-item{
background:rgba(255,255,255,.15);
}
.meteo-card.active .meteo-label{
color:#fff;
} @media (max-width:1200px){
.meteo-current{
grid-template-columns:1fr;
text-align:center;
}
.meteo-current-left{
justify-content:center;
}
.meteo-current-right{
align-items:center;
}
}
@media (max-width:768px){
.meteo-widget{
padding:18px;
}
.meteo-current{
padding:20px;
}
.meteo-current-temp{
font-size:42px;
}
.meteo-location{
font-size:20px;
}
.meteo-extra{
grid-template-columns:repeat(2,1fr);
gap:8px;
}
.meteo-map{
height:280px;
}
.meteo-forecast-cards{
grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
gap:12px;
}
}
@media (max-width:480px){
.meteo-widget{
padding:14px;
}
.meteo-current{
padding:16px;
}
.meteo-current-temp{
font-size:36px;
}
.meteo-current-icon{
width:64px;
height:64px;
}
.meteo-extra{
grid-template-columns:1fr;
}
.meteo-map{
height:240px;
}
.meteo-forecast-cards{
grid-template-columns:repeat(2,1fr);
gap:10px;
}
.meteo-card{
padding:14px;
}
.meteo-card-icon{
width:48px;
height:48px;
}
} @keyframes gradientShift{
0%{ background-position: 0% 50%; }
50%{ background-position: 100% 50%; }
100%{ background-position: 0% 50%; }
}
@keyframes sheenMove{
0%{ transform: rotate(25deg) translateX(0); opacity:.6; }
50%{ transform: rotate(25deg) translateX(40%); opacity:.3; }
100%{ transform: rotate(25deg) translateX(0); opacity:.6; }
}
@keyframes float{
0%,100%{ transform:translateY(0); }
50%{ transform:translateY(-6px); }
}
@keyframes tempPop{
0%{ opacity:0; transform: translateY(6px) scale(.98); }
60%{ opacity:1; transform: translateY(0) scale(1.04); }
100%{ opacity:1; transform: translateY(0) scale(1); }
}
@keyframes slideInUp{
0%{ opacity:0; transform:translateY(12px); }
100%{ opacity:1; transform:translateY(0); }
} @media (prefers-reduced-motion: reduce){
.meteo-current,
.meteo-current::before,
.meteo-current-icon,
.meteo-current-temp,
.meteo-extra-item{
animation:none !important;
transition:none !important;
}
}