.meteomag-widget-desktop {
--mm-blue-header: #073f70;
--mm-blue-live-top: #0d6eb7;
--mm-blue-live-bottom: #07558f;
--mm-blue-row: #1265a0;
--mm-blue-row-hover: #176fae;
--mm-border: rgba(255, 255, 255, 0.38);
--mm-temp-min: #1685c8;
--mm-temp-max: #e9433d;
container-type: inline-size;
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-desktop,
.meteomag-widget-desktop * {
box-sizing: border-box;
}
.meteomag-widget-desktop [hidden] {
display: none !important;
} .meteomag-widget-desktop .meteo-widget-header {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 24px;
min-height: 64px;
padding: 13px 28px;
border-bottom: 1px solid var(--mm-border);
background: var(--mm-blue-header);
}
.meteomag-widget-desktop .meteo-header-title-wrap,
.meteomag-widget-desktop .meteo-header-update-wrap {
min-width: 0;
}
.meteomag-widget-desktop .meteo-header-update-wrap {
justify-self: end;
}
.meteomag-widget-desktop .meteo-title {
margin: 0;
overflow: hidden;
color: #ffffff;
font-size: clamp(20px, 2.05cqw, 27px);
font-weight: 700;
line-height: 1.15;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
}
.meteomag-widget-desktop .meteo-aggiornate {
color: #ffffff;
font-size: clamp(13px, 1.45cqw, 17px);
font-weight: 400;
line-height: 1.2;
text-align: right;
white-space: nowrap;
} .meteomag-widget-desktop .meteo-current-box {
width: 100%;
padding: 0;
background: linear-gradient(
135deg,
var(--mm-blue-live-top),
var(--mm-blue-live-bottom)
);
} .meteomag-widget-desktop .current-primary,
.meteomag-widget-desktop .current-metrics {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
width: 100%;
} .meteomag-widget-desktop .current-primary {
min-height: 222px;
align-items: stretch;
border-bottom: 1px solid var(--mm-border);
}
.meteomag-widget-desktop .current-summary,
.meteomag-widget-desktop .current-icon,
.meteomag-widget-desktop .current-status {
width: 100%;
min-width: 0;
min-height: 100%;
margin: 0;
padding: 22px clamp(18px, 2.6cqw, 36px);
}
.meteomag-widget-desktop .current-summary,
.meteomag-widget-desktop .current-icon {
border-right: 1px solid var(--mm-border);
} .meteomag-widget-desktop .current-summary {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: left;
} .meteomag-widget-desktop .current-summary > * {
width: min(245px, 100%);
}
.meteomag-widget-desktop .titolo-riga {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 9px;
color: #ffffff;
font-size: clamp(20px, 2.15cqw, 27px);
font-weight: 800;
line-height: 1.05;
white-space: nowrap;
}
.meteomag-widget-desktop .live-dot {
display: inline-block;
width: 11px;
height: 11px;
flex: 0 0 auto;
border-radius: 50%;
background: #13d43a;
animation: mmDesktopLiveBlink 1.2s infinite;
}
@keyframes mmDesktopLiveBlink {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.35;
}
}
.meteomag-widget-desktop .temperatura-principale {
margin-top: 18px;
color: #ffffff;
font-size: clamp(52px, 5.8cqw, 76px);
font-weight: 300;
line-height: 0.92;
white-space: nowrap;
} .meteomag-widget-desktop .temperatura-principale span {
display: inline-block;
position: relative;
top: -0.32em;
margin-left: 2px;
font-size: 0.48em;
line-height: 1;
vertical-align: top;
}
.meteomag-widget-desktop .percepita-principale {
margin-top: 18px;
color: #ffffff;
font-size: clamp(14px, 1.55cqw, 19px);
font-weight: 400;
line-height: 1.15;
white-space: nowrap;
} .meteomag-widget-desktop .current-icon {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.meteomag-widget-desktop .current-icon img {
display: block;
width: clamp(112px, 12.4cqw, 156px);
height: clamp(112px, 12.4cqw, 156px);
object-fit: contain;
}
.meteomag-widget-desktop .current-icon-condition {
margin-top: -2px;
color: #ffffff;
font-size: clamp(17px, 1.82cqw, 22px);
font-weight: 700;
line-height: 1.05;
text-align: center;
} .meteomag-widget-desktop .current-status {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 15px;
} .meteomag-widget-desktop .status-item {
display: grid;
grid-template-columns: 50px minmax(0, 185px);
align-items: center;
justify-content: center;
gap: 13px;
width: min(260px, 100%);
min-width: 0;
margin: 0 auto;
text-align: left;
}
.meteomag-widget-desktop .status-item + .status-item {
padding-top: 15px;
border-top: 1px solid rgba(255, 255, 255, 0.3);
}
.meteomag-widget-desktop .status-item img {
display: block;
width: 48px;
height: 48px;
object-fit: contain;
}
.meteomag-widget-desktop .status-item div {
min-width: 0;
}
.meteomag-widget-desktop .status-item span,
.meteomag-widget-desktop .status-item strong {
display: block;
color: #ffffff;
}
.meteomag-widget-desktop .status-item span {
font-size: clamp(13px, 1.45cqw, 17px);
font-weight: 400;
line-height: 1.12;
}
.meteomag-widget-desktop .status-item strong {
margin-top: 4px;
font-size: clamp(16px, 1.75cqw, 21px);
font-weight: 800;
line-height: 1.12;
overflow-wrap: anywhere;
} .meteomag-widget-desktop .metric-card {
display: grid;
grid-template-columns: 56px minmax(0, 185px);
align-items: center;
justify-content: center;
gap: 15px;
width: 100%;
min-width: 0;
min-height: 96px;
padding: 15px clamp(14px, 2cqw, 28px);
border-right: 1px solid var(--mm-border);
border-bottom: 1px solid var(--mm-border);
text-align: left;
}
.meteomag-widget-desktop .metric-card:nth-child(3n) {
border-right: 0;
}
.meteomag-widget-desktop .metric-card:nth-last-child(-n + 3) {
border-bottom: 0;
}
.meteomag-widget-desktop .metric-icon {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
min-width: 56px;
font-size: clamp(32px, 3.5cqw, 46px);
line-height: 1;
text-align: center;
}
.meteomag-widget-desktop .metric-copy {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
width: 100%;
min-width: 0;
}
.meteomag-widget-desktop .metric-label,
.meteomag-widget-desktop .metric-value {
display: block;
}
.meteomag-widget-desktop .metric-label {
color: #ffffff;
font-size: clamp(14px, 1.55cqw, 18px);
font-weight: 400;
line-height: 1.1;
}
.meteomag-widget-desktop .metric-value {
margin-top: 5px;
color: #ffffff;
font-size: clamp(17px, 1.85cqw, 22px);
font-weight: 800;
line-height: 1.1;
white-space: nowrap;
} .meteomag-widget-desktop .meteo-daily-box,
.meteomag-widget-desktop .meteo-hourly-box {
width: 100%;
max-width: 100%;
background: var(--mm-blue-row);
}
.meteomag-widget-desktop .daily-row {
display: grid;
grid-template-columns:
minmax(92px, 0.92fr)
48px
minmax(112px, 1.28fr)
minmax(60px, 0.66fr)
minmax(108px, 0.98fr)
minmax(70px, 0.76fr)
minmax(62px, 0.68fr)
minmax(72px, 0.76fr)
minmax(78px, 0.8fr);
align-items: center;
width: 100%;
min-height: 64px;
padding: 0 15px;
border-bottom: 1px solid var(--mm-border);
background: var(--mm-blue-row);
color: #ffffff;
cursor: pointer;
}
.meteomag-widget-desktop .daily-row:hover {
background: var(--mm-blue-row-hover);
}
.meteomag-widget-desktop .daily-row:focus-visible {
outline: 2px solid #ffffff;
outline-offset: -3px;
}
.meteomag-widget-desktop .daily-row .col {
min-width: 0;
padding: 0 4px;
color: #ffffff;
text-align: center;
}
.meteomag-widget-desktop .daily-row .data {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
padding-left: 12px;
line-height: 1.16;
text-align: left;
}
.meteomag-widget-desktop .daily-row .data strong {
margin-top: 3px;
font-weight: 700;
}
.meteomag-widget-desktop .daily-row .icona img {
display: block;
width: 44px;
height: 44px;
margin: 0 auto;
object-fit: contain;
}
.meteomag-widget-desktop .daily-row .condizione {
margin: 0;
color: #ffffff;
font-size: clamp(14px, 1.55cqw, 18px);
line-height: 1.2;
text-align: left;
overflow-wrap: anywhere;
} .meteomag-widget-desktop .daily-row.intestazione {
min-height: 72px;
background: var(--mm-blue-header);
color: #ffffff;
cursor: default;
}
.meteomag-widget-desktop .daily-row.intestazione:hover {
background: var(--mm-blue-header);
}
.meteomag-widget-desktop .daily-row.intestazione .col {
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
padding: 0 3px;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
color: #ffffff;
font-size: clamp(12px, 1.3cqw, 15px);
font-weight: 700;
line-height: 1.25;
text-align: center;
white-space: normal;
}
.meteomag-widget-desktop .daily-row.intestazione .data {
justify-content: flex-start;
padding-left: 12px;
text-align: left;
}
.meteomag-widget-desktop .daily-row.intestazione .condizione {
justify-content: flex-start;
text-align: left;
}
.meteomag-widget-desktop .daily-row.intestazione .temp {
display: flex;
justify-self: stretch;
min-width: 0;
padding: 0 3px;
border: 0;
background: transparent;
color: #ffffff;
}
.meteomag-widget-desktop .daily-row.intestazione .dettaglio {
justify-self: stretch;
overflow: visible;
text-overflow: clip;
white-space: normal;
} .meteomag-widget-desktop .daily-row:not(.intestazione) .temp {
display: inline-flex;
align-items: center;
justify-content: center;
justify-self: center;
gap: 8px;
min-width: 100px;
padding: 7px 10px;
border: 1px solid rgba(255, 255, 255, 0.48);
border-radius: 7px;
background: rgba(255, 255, 255, 0.78);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
font-weight: 800;
line-height: 1;
}
.meteomag-widget-desktop .temp-min {
color: var(--mm-temp-min);
}
.meteomag-widget-desktop .temp-max {
color: var(--mm-temp-max);
}
.meteomag-widget-desktop .temp-separator {
color: #4e5964;
font-weight: 700;
} .meteomag-widget-desktop .daily-row:not(.intestazione) .vento {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
line-height: 1.05;
}
.meteomag-widget-desktop .wind-speed {
color: #ffffff;
font-size: clamp(13px, 1.42cqw, 16px);
font-weight: 700;
}
.meteomag-widget-desktop .wind-direction {
color: #ffffff;
font-size: clamp(9px, 1.02cqw, 12px);
font-weight: 400;
line-height: 1.1;
text-align: center;
white-space: normal;
opacity: 0.94;
} .meteomag-widget-desktop .daily-row .dettaglio {
display: flex;
align-items: center;
justify-content: center;
justify-self: stretch;
width: 100%;
}
.meteomag-widget-desktop .apri-orarie {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
padding: 0 0 2px;
border: 1px solid rgba(255, 255, 255, 0.58);
border-radius: 50%;
background: rgba(255, 255, 255, 0.14);
color: #ffffff;
font-family: Arial, sans-serif;
font-size: 27px;
font-weight: 400;
line-height: 1;
cursor: pointer;
transition:
background 0.2s,
color 0.2s,
transform 0.2s;
}
.meteomag-widget-desktop .apri-orarie:hover,
.meteomag-widget-desktop .daily-row:hover .apri-orarie {
background: #ffffff;
color: var(--mm-blue-header);
transform: scale(1.05);
} .meteomag-widget-desktop .meteo-torna-box {
padding: 12px 18px;
background: var(--mm-blue-header);
text-align: left;
}
.meteomag-widget-desktop .torna-giornaliera {
padding: 9px 14px;
border: 0;
border-radius: 7px;
background: #ffffff;
color: var(--mm-blue-header);
font-size: 14px;
font-weight: 800;
cursor: pointer;
}
.meteomag-widget-desktop .meteo-hourly-box .daily-row {
grid-template-columns:
minmax(76px, 0.8fr)
46px
minmax(120px, 1.55fr)
minmax(54px, 0.62fr)
minmax(66px, 0.72fr)
minmax(66px, 0.72fr)
minmax(66px, 0.72fr)
minmax(62px, 0.66fr)
minmax(72px, 0.74fr);
} .meteomag-widget-desktop .meteo-hourly-box .hourly-row .temp {
min-width: 62px;
padding: 6px 9px;
gap: 0;
color: var(--mm-temp-min);
font-size: clamp(14px, 1.55cqw, 18px);
font-weight: 800;
} @container (max-width: 980px) {
.meteomag-widget-desktop .meteo-widget-header {
padding: 12px 20px;
}
.meteomag-widget-desktop .current-primary {
min-height: 202px;
}
.meteomag-widget-desktop .current-summary,
.meteomag-widget-desktop .current-icon,
.meteomag-widget-desktop .current-status {
padding: 18px 16px;
}
.meteomag-widget-desktop .current-summary > * {
width: min(210px, 100%);
}
.meteomag-widget-desktop .status-item {
grid-template-columns: 44px minmax(0, 165px);
}
.meteomag-widget-desktop .metric-card {
grid-template-columns: 48px minmax(0, 165px);
min-height: 88px;
gap: 11px;
padding: 13px 10px;
}
.meteomag-widget-desktop .metric-icon {
width: 48px;
min-width: 48px;
}
.meteomag-widget-desktop .daily-row {
grid-template-columns:
minmax(84px, 0.9fr)
42px
minmax(98px, 1.25fr)
minmax(52px, 0.62fr)
minmax(94px, 0.92fr)
minmax(62px, 0.72fr)
minmax(56px, 0.64fr)
minmax(64px, 0.7fr)
minmax(68px, 0.74fr);
padding: 0 9px;
}
.meteomag-widget-desktop .daily-row .data {
padding-left: 8px;
}
.meteomag-widget-desktop .daily-row .col {
padding-right: 2px;
}
.meteomag-widget-desktop .daily-row:not(.intestazione) .temp {
min-width: 90px;
gap: 5px;
padding: 6px 7px;
}
}
@container (max-width: 780px) {
.meteomag-widget-desktop .meteo-widget-header {
gap: 12px;
padding: 11px 15px;
}
.meteomag-widget-desktop .meteo-title {
font-size: 18px;
}
.meteomag-widget-desktop .meteo-aggiornate {
font-size: 12px;
}
.meteomag-widget-desktop .current-primary {
min-height: 184px;
}
.meteomag-widget-desktop .current-summary,
.meteomag-widget-desktop .current-icon,
.meteomag-widget-desktop .current-status {
padding: 14px 10px;
}
.meteomag-widget-desktop .current-summary > * {
width: min(180px, 100%);
}
.meteomag-widget-desktop .status-item {
grid-template-columns: 36px minmax(0, 135px);
gap: 8px;
}
.meteomag-widget-desktop .status-item img {
width: 34px;
height: 34px;
}
.meteomag-widget-desktop .metric-card {
grid-template-columns: 40px minmax(0, 135px);
min-height: 78px;
gap: 8px;
padding: 10px 7px;
}
.meteomag-widget-desktop .metric-icon {
width: 40px;
min-width: 40px;
}
.meteomag-widget-desktop .daily-row {
grid-template-columns:
minmax(76px, 0.86fr)
40px
minmax(86px, 1.2fr)
minmax(46px, 0.58fr)
minmax(86px, 0.86fr)
minmax(56px, 0.66fr)
minmax(52px, 0.6fr)
minmax(58px, 0.64fr)
minmax(60px, 0.66fr);
min-height: 60px;
padding: 0 5px;
}
}
@container (max-width: 640px) {
.meteomag-widget-desktop .meteo-widget-header {
grid-template-columns: 1fr;
gap: 5px;
}
.meteomag-widget-desktop .meteo-header-update-wrap {
justify-self: start;
}
.meteomag-widget-desktop .meteo-aggiornate {
text-align: left;
white-space: normal;
}
.meteomag-widget-desktop .current-primary {
grid-template-columns: 1fr 1fr;
}
.meteomag-widget-desktop .current-summary,
.meteomag-widget-desktop .current-icon {
border-bottom: 1px solid var(--mm-border);
}
.meteomag-widget-desktop .current-icon {
border-right: 0;
}
.meteomag-widget-desktop .current-status {
grid-column: 1 / -1;
flex-direction: row;
justify-content: center;
gap: 28px;
}
.meteomag-widget-desktop .status-item {
width: min(210px, 45%);
}
.meteomag-widget-desktop .status-item + .status-item {
padding-top: 0;
padding-left: 24px;
border-top: 0;
border-left: 1px solid rgba(255, 255, 255, 0.3);
}
.meteomag-widget-desktop .current-metrics {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.meteomag-widget-desktop .metric-card:nth-child(3n) {
border-right: 1px solid var(--mm-border);
}
.meteomag-widget-desktop .metric-card:nth-child(2n) {
border-right: 0;
}
.meteomag-widget-desktop .metric-card:nth-last-child(-n + 3) {
border-bottom: 1px solid var(--mm-border);
}
.meteomag-widget-desktop .metric-card:nth-last-child(-n + 2) {
border-bottom: 0;
}
.meteomag-widget-desktop .daily-row {
grid-template-columns:
minmax(72px, 0.88fr)
38px
minmax(82px, 1.3fr)
minmax(44px, 0.58fr)
minmax(82px, 0.88fr)
minmax(54px, 0.66fr)
minmax(56px, 0.66fr);
}
.meteomag-widget-desktop .daily-row > .umidita,
.meteomag-widget-desktop .daily-row > .pressione {
display: none;
}
}
@container (max-width: 520px) {
.meteomag-widget-desktop .current-status {
gap: 12px;
}
.meteomag-widget-desktop .status-item {
width: 50%;
}
.meteomag-widget-desktop .metric-card {
grid-template-columns: 40px minmax(0, 130px);
}
.meteomag-widget-desktop .daily-row {
grid-template-columns:
minmax(68px, 0.9fr)
36px
minmax(78px, 1.28fr)
minmax(42px, 0.56fr)
minmax(78px, 0.86fr)
minmax(52px, 0.64fr)
38px;
}
.meteomag-widget-desktop .daily-row.intestazione .dettaglio {
font-size: 0;
}
.meteomag-widget-desktop .daily-row.intestazione .dettaglio::after {
content: "+";
font-size: 18px;
}
} .meteomag-widget-desktop .alert-previsioni {
margin: 20px;
padding: 14px;
border-radius: 8px;
background: #fff3cd;
color: #7a5c00;
font-size: 15px;
text-align: center;
}
body.jnews-dark-mode .meteomag-widget-desktop {
--mm-blue-header: #0c0c0c;
--mm-blue-live-top: #1a1a1a;
--mm-blue-live-bottom: #111111;
--mm-blue-row: #1a1a1a;
--mm-blue-row-hover: #242424;
--mm-border: #3c3c3c;
}