.meteomag-widget-mobile {
--mm-blue: #0d65a7;
--mm-blue-dark: #083f70;
--mm-blue-row: #1268a6;
--mm-blue-row-hover: #1975b5;
--mm-border: rgba(255, 255, 255, 0.34);
--mm-temp-min: #0c669f;
--mm-temp-max: #df3d38;
width: 100%;
max-width: 100%;
margin: 0 auto;
overflow: hidden;
border-radius: 14px;
background: var(--mm-blue-row);
color: #ffffff;
box-shadow: 0 8px 22px rgba(15, 55, 90, 0.18);
font-family: Inter, "Helvetica Neue", Arial, sans-serif;
text-align: center;
}
.meteomag-widget-mobile,
.meteomag-widget-mobile * {
box-sizing: border-box;
}
.meteomag-widget-mobile [hidden] {
display: none !important;
} .meteomag-widget-mobile .meteo-widget-header {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
gap: 10px;
padding: 14px 15px;
border-bottom: 1px solid var(--mm-border);
background: var(--mm-blue-dark);
}
.meteomag-widget-mobile .meteo-title {
min-width: 0;
margin: 0;
color: #ffffff;
font-size: clamp(16px, 4.45vw, 19px);
font-weight: 800;
line-height: 1.15;
text-align: left;
}
.meteomag-widget-mobile .meteo-title-line,
.meteomag-widget-mobile .meteo-update-line {
display: block;
}
.meteomag-widget-mobile .meteo-title-location {
margin-top: 3px;
}
.meteomag-widget-mobile .meteo-aggiornate {
color: #ffffff;
font-size: clamp(9px, 2.85vw, 12px);
line-height: 1.23;
text-align: right;
}
.meteomag-widget-mobile .meteo-aggiornate time {
display: block;
}
.meteomag-widget-mobile .meteo-update-date,
.meteomag-widget-mobile .meteo-update-hour {
margin-top: 3px;
} .meteomag-widget-mobile .meteo-current-box {
width: 100%;
padding: 18px 14px 0;
background: linear-gradient(
135deg,
#0e6db5,
#075087
);
}
.meteomag-widget-mobile .current-primary {
display: grid;
grid-template-columns:
minmax(0, 1fr)
minmax(100px, 0.9fr);
align-items: center;
gap: 8px;
}
.meteomag-widget-mobile .current-summary {
min-width: 0;
text-align: left;
}
.meteomag-widget-mobile .titolo-riga {
display: flex;
align-items: center;
gap: 7px;
color: #ffffff;
font-size: clamp(18px, 5vw, 21px);
font-weight: 800;
line-height: 1.1;
white-space: nowrap;
}
.meteomag-widget-mobile .live-dot {
width: 10px;
height: 10px;
flex: 0 0 auto;
border-radius: 50%;
background: #17e331;
animation: mmBlinkMobile 1.2s infinite;
}
@keyframes mmBlinkMobile {
50% {
opacity: 0.35;
}
}
.meteomag-widget-mobile .temperatura-principale {
margin-top: 14px;
color: #ffffff;
font-size: clamp(46px, 13vw, 56px);
font-weight: 300;
line-height: 0.95;
white-space: nowrap;
}
.meteomag-widget-mobile .temperatura-principale span {
display: inline-block;
position: relative;
top: -0.34em;
margin-left: 1px;
font-size: 0.46em;
line-height: 1;
vertical-align: top;
}
.meteomag-widget-mobile .percepita-principale {
margin-top: 12px;
color: #ffffff;
font-size: clamp(12px, 3.7vw, 15px);
line-height: 1.2;
white-space: nowrap;
}
.meteomag-widget-mobile .current-icon {
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
text-align: center;
}
.meteomag-widget-mobile .current-icon img {
display: block;
width: clamp(92px, 28vw, 122px);
height: clamp(92px, 28vw, 122px);
object-fit: contain;
} .meteomag-widget-mobile .current-status {
position: relative;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: stretch;
gap: 0;
width: 100%;
margin-top: 17px;
padding: 14px 0;
border-top: 1px solid var(--mm-border);
}
.meteomag-widget-mobile .current-status::after {
content: "";
position: absolute;
top: 14px;
bottom: 14px;
left: 50%;
width: 1px;
background: rgba(255, 255, 255, 0.26);
transform: translateX(-0.5px);
}
.meteomag-widget-mobile .status-item {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
min-width: 0;
margin: 0;
padding: 0 10px;
text-align: left;
}
.meteomag-widget-mobile .status-item + .status-item {
border-left: 0;
}
.meteomag-widget-mobile .status-item img {
display: block;
width: 29px;
height: 29px;
object-fit: contain;
}
.meteomag-widget-mobile .status-item div {
min-width: 0;
}
.meteomag-widget-mobile .status-item span,
.meteomag-widget-mobile .status-item strong {
display: block;
color: #ffffff;
}
.meteomag-widget-mobile .status-item span {
font-size: clamp(9px, 2.75vw, 11px);
line-height: 1.1;
opacity: 0.9;
}
.meteomag-widget-mobile .status-item strong {
margin-top: 2px;
font-size: clamp(11px, 3.2vw, 13px);
line-height: 1.12;
overflow-wrap: anywhere;
} .meteomag-widget-mobile .current-metrics {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
border-top: 1px solid var(--mm-border);
}
.meteomag-widget-mobile .metric-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: 0;
min-height: 82px;
padding: 10px 4px;
border-right: 1px solid var(--mm-border);
border-bottom: 1px solid var(--mm-border);
text-align: center;
}
.meteomag-widget-mobile .metric-card:nth-child(3n) {
border-right: 0;
}
.meteomag-widget-mobile .metric-card:nth-last-child(-n + 3) {
border-bottom: 0;
}
.meteomag-widget-mobile .metric-icon {
font-size: clamp(20px, 6vw, 25px);
line-height: 1;
}
.meteomag-widget-mobile .metric-label {
margin-top: 4px;
color: #ffffff;
font-size: clamp(9px, 2.75vw, 11px);
line-height: 1.08;
opacity: 0.9;
}
.meteomag-widget-mobile .metric-value {
margin-top: 3px;
color: #ffffff;
font-size: clamp(11px, 3.2vw, 13px);
font-weight: 800;
line-height: 1.1;
white-space: normal;
} .meteomag-widget-mobile .meteo-daily-box,
.meteomag-widget-mobile .meteo-hourly-box {
width: 100%;
max-width: 100%;
background: var(--mm-blue-row);
}
.meteomag-widget-mobile .daily-section-title,
.meteomag-widget-mobile .hourly-section-title {
padding: 12px 13px;
border-bottom: 1px solid var(--mm-border);
background: var(--mm-blue-dark);
color: #ffffff;
font-size: 14px;
font-weight: 800;
text-align: left;
}
.meteomag-widget-mobile .daily-row {
display: grid;
grid-template-columns:
minmax(58px, 0.95fr)
42px
minmax(50px, 0.86fr)
44px
48px
44px
31px;
align-items: center;
width: 100%;
min-height: 82px;
padding: 0 5px;
border-bottom: 1px solid var(--mm-border);
background: var(--mm-blue-row);
color: #ffffff;
cursor: pointer;
}
.meteomag-widget-mobile .daily-row:hover,
.meteomag-widget-mobile .daily-row:focus-visible {
background: var(--mm-blue-row-hover);
}
.meteomag-widget-mobile .daily-row:focus-visible {
outline: 2px solid #ffffff;
outline-offset: -3px;
}
.meteomag-widget-mobile .daily-row .col {
min-width: 0;
padding: 0 2px;
color: #ffffff;
text-align: center;
}
.meteomag-widget-mobile .daily-row .data {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
padding-left: 7px;
font-size: clamp(11px, 3.35vw, 14px);
line-height: 1.15;
text-align: left !important;
}
.meteomag-widget-mobile .daily-row .data strong {
margin-top: 4px;
font-weight: 800;
}
.meteomag-widget-mobile .daily-row .icona img {
display: block;
width: 43px;
height: 43px;
margin: 0 auto;
object-fit: contain;
}
.meteomag-widget-mobile .daily-row .condizione {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
margin: 0;
color: #ffffff;
font-size: clamp(12px, 3.5vw, 15px);
line-height: 1.16;
text-align: left !important;
overflow-wrap: anywhere;
}
.meteomag-widget-mobile .daily-row .prec {
transform: translateX(-3px);
}
.meteomag-widget-mobile .daily-row .prec,
.meteomag-widget-mobile .daily-row .vento {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
color: #ffffff;
font-size: clamp(11px, 3.3vw, 14px);
line-height: 1.05;
}
.meteomag-widget-mobile .daily-row .prec strong,
.meteomag-widget-mobile .daily-row .vento strong {
font-weight: 800;
}
.meteomag-widget-mobile .daily-row .prec span,
.meteomag-widget-mobile .daily-row .vento span,
.meteomag-widget-mobile .daily-row .wind-direction {
font-size: clamp(8px, 2.7vw, 11px);
line-height: 1.08;
white-space: normal;
opacity: 0.94;
}
.meteomag-widget-mobile .daily-row .temp {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
justify-self: center;
gap: 5px;
width: 40px;
min-width: 40px;
padding: 6px 3px;
border: 1px solid rgba(255, 255, 255, 0.52);
border-radius: 7px;
background: rgba(255, 255, 255, 0.82);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.58);
font-size: clamp(11px, 3.45vw, 14px);
font-weight: 800;
line-height: 1;
}
.meteomag-widget-mobile .daily-row .temp-min {
color: var(--mm-temp-min);
}
.meteomag-widget-mobile .daily-row .temp-max {
color: var(--mm-temp-max);
}
.meteomag-widget-mobile .daily-row .dettaglio {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.meteomag-widget-mobile .apri-orarie {
display: inline-flex;
align-items: center;
justify-content: center;
width: 29px;
height: 29px;
padding: 0 0 2px;
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 50%;
background: rgba(255, 255, 255, 0.16);
color: #ffffff;
font-family: Arial, sans-serif;
font-size: 21px;
line-height: 1;
cursor: pointer;
}
.meteomag-widget-mobile .daily-row:hover .apri-orarie,
.meteomag-widget-mobile .apri-orarie:hover {
background: #ffffff;
color: var(--mm-blue-dark);
} .meteomag-widget-mobile .meteo-torna-box {
padding: 11px 12px;
background: var(--mm-blue-dark);
text-align: left;
}
.meteomag-widget-mobile .torna-giornaliera {
padding: 8px 11px;
border: 0;
border-radius: 7px;
background: #ffffff;
color: var(--mm-blue-dark);
font-size: 13px;
font-weight: 800;
cursor: pointer;
}
.meteomag-widget-mobile .hourly-row {
display: grid;
grid-template-columns:
minmax(50px, 0.76fr)
39px
minmax(76px, 1.28fr)
minmax(42px, 0.68fr)
minmax(45px, 0.72fr)
minmax(46px, 0.74fr);
align-items: center;
width: 100%;
min-height: 82px;
padding: 0 4px 0 5px;
border-bottom: 1px solid var(--mm-border);
background: var(--mm-blue-row);
}
.meteomag-widget-mobile .hourly-row .col {
min-width: 0;
padding: 0 2px;
color: #ffffff;
text-align: center;
}
.meteomag-widget-mobile .hourly-row .data {
display: flex;
align-items: center;
justify-content: flex-start;
padding-left: 7px;
font-size: clamp(11px, 3.35vw, 14px);
line-height: 1.15;
text-align: left !important;
}
.meteomag-widget-mobile .hourly-row .data strong {
font-weight: 800;
}
.meteomag-widget-mobile .hourly-row .icona {
transform: translateX(-2px);
}
.meteomag-widget-mobile .hourly-row .icona img {
display: block;
width: 43px;
height: 43px;
margin: 0 auto;
object-fit: contain;
}
.meteomag-widget-mobile .hourly-row .condizione {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
color: #ffffff;
font-size: clamp(12px, 3.5vw, 15px);
line-height: 1.16;
text-align: left !important;
overflow-wrap: normal;
word-break: normal;
hyphens: none;
transform: translateX(-1px);
}
.meteomag-widget-mobile .hourly-row .prec {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
transform: translateX(4px);
font-size: clamp(11px, 3.3vw, 14px);
line-height: 1.05;
}
.meteomag-widget-mobile .hourly-row .prec strong {
font-weight: 800;
}
.meteomag-widget-mobile .hourly-row .prec span {
font-size: clamp(8px, 2.7vw, 11px);
line-height: 1.08;
opacity: 0.94;
}
.meteomag-widget-mobile .hourly-row .temp {
display: flex;
align-items: center;
justify-content: center;
justify-self: center;
width: 40px;
min-width: 40px;
padding: 8px 3px;
border: 1px solid rgba(255, 255, 255, 0.52);
border-radius: 7px;
background: rgba(255, 255, 255, 0.82);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.58);
font-size: clamp(11px, 3.45vw, 14px);
font-weight: 800;
line-height: 1;
transform: translateX(5px);
}
.meteomag-widget-mobile .hourly-row .temp-current {
color: var(--mm-temp-min);
}
.meteomag-widget-mobile .hourly-row .vento {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
color: #ffffff;
font-size: clamp(11px, 3.3vw, 14px);
line-height: 1.05;
transform: translateX(7px);
}
.meteomag-widget-mobile .hourly-row .vento strong {
font-weight: 800;
}
.meteomag-widget-mobile .hourly-row .vento span {
font-size: clamp(8px, 2.7vw, 11px);
line-height: 1.08;
white-space: normal;
opacity: 0.94;
} @media (max-width: 767px) {
.meteomag-widget-mobile {
position: relative;
left: 50%;
width: min(
calc(100% + 16px),
calc(100vw - 10px)
);
max-width: calc(100vw - 10px);
margin-right: 0;
margin-left: 0;
transform: translateX(-50%);
}
} @media (max-width: 370px) {
.meteomag-widget-mobile .meteo-widget-header {
grid-template-columns: 1fr;
gap: 5px;
}
.meteomag-widget-mobile .meteo-aggiornate {
text-align: left;
}
.meteomag-widget-mobile .meteo-current-box {
padding-right: 10px;
padding-left: 10px;
}
.meteomag-widget-mobile .current-primary {
grid-template-columns:
minmax(0, 1fr)
92px;
}
.meteomag-widget-mobile .status-item {
justify-content: center;
gap: 5px;
width: 100%;
max-width: 100%;
margin: 0;
padding: 0 5px;
}
.meteomag-widget-mobile .status-item img {
width: 25px;
height: 25px;
}
.meteomag-widget-mobile .daily-row {
grid-template-columns:
minmax(54px, 0.92fr)
38px
minmax(45px, 0.8fr)
40px
44px
39px
28px;
padding: 0 3px;
}
.meteomag-widget-mobile .hourly-row {
grid-template-columns:
minmax(47px, 0.72fr)
36px
minmax(66px, 1.2fr)
minmax(38px, 0.64fr)
minmax(40px, 0.68fr)
minmax(41px, 0.7fr);
padding: 0 3px;
}
.meteomag-widget-mobile .daily-row .col {
padding: 0 1px;
}
.meteomag-widget-mobile .daily-row .data {
padding-left: 5px;
}
.meteomag-widget-mobile .daily-row .icona img {
width: 39px;
height: 39px;
}
.meteomag-widget-mobile .daily-row .temp {
width: 38px;
min-width: 38px;
}
.meteomag-widget-mobile .apri-orarie {
width: 27px;
height: 27px;
font-size: 20px;
}
} .meteomag-widget-mobile .alert-previsioni {
margin: 15px;
padding: 12px;
border-radius: 8px;
background: #fff3cd;
color: #7a5c00;
font-size: 14px;
text-align: center;
}
body.jnews-dark-mode .meteomag-widget-mobile {
--mm-blue: #161616;
--mm-blue-dark: #0d0d0d;
--mm-blue-row: #1b1b1b;
--mm-blue-row-hover: #252525;
--mm-border: #383838;
}