/* ========================================================================== MARINE RESPONSIVE — Stili condivisi per tutte le pagine *_responsive.php Pagine: index, landing, allerte, sat, meteo, vento, mare, tavsin ========================================================================== */ * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; max-width: 100%; height: 100%; min-height: 0; background: #fff; font-family: Arial, Helvetica, sans-serif; overflow: hidden; overflow-x: hidden; color: #000; } .meteomed-layout { position: relative; width: 100%; max-width: 100%; min-width: 0; height: 100%; min-height: 0; display: flex; flex-direction: column; background: #fff; /* Unità cqb/cqi = dimensioni del contenitore (iframe), non del browser */ container-type: size; container-name: meteomed; } /* Pagina aperta fuori iframe: riempie il viewport */ html:not(.meteomed-embed) .meteomed-layout { min-height: 100vh; min-height: 100dvh; } /* ========================================================================== HEADER azzurro: logo Meteomed | titolo + sottotitolo | logo marina ========================================================================== */ .meteomed-header { position: relative; width: 100%; height: clamp(40px, 11cqb, 90px); background: #1AB5F0; display: flex; align-items: center; justify-content: space-between; gap: clamp(8px, 1.5vw, 20px); padding: 0 clamp(12px, 2vw, 28px); flex-shrink: 0; z-index: 3; } .meteomed-header .logo { height: 70%; width: auto; flex-shrink: 0; display: block; object-fit: contain; } .meteomed-header .header-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(2px, 0.4vh, 6px); text-align: center; } .meteomed-header .title { width: 100%; color: #fff; text-shadow: 2px 4px 4px rgba(0, 0, 0, 0.3); font-family: "Arial Black", Gadget, sans-serif; font-weight: bold; font-size: clamp(13px, 2.2vw, 28px); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .meteomed-header .titlelow { width: 100%; color: #fff; font-family: "Arial Black", Gadget, sans-serif; font-size: clamp(10px, 1.4vw, 16px); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .meteomed-header .logo-marina { height: 80%; max-width: 30%; width: auto; flex-shrink: 0; object-fit: contain; display: block; } /* ========================================================================== CONTENT — area centrale nera (default) Modificatore .meteomed-content--white per pagine con sfondo bianco (tavsin) ========================================================================== */ .meteomed-content { flex: 1 1 auto; width: 100%; background: #fff; position: relative; display: flex; flex-direction: column; overflow: hidden; padding: 0; } .meteomed-content--white { background: #fff; } @media (max-width: 480px) { .meteomed-header .logo { height: 55%; max-width: 28%; } } /* ========================================================================== EMBED — pagina caricata dentro iframe (classe su via meteomed-embed.js) Nessun vh/dvh: tutto scala rispetto all'area dell'iframe. ========================================================================== */ html.meteomed-embed, html.meteomed-embed body { height: auto; min-height: 0; overflow: hidden; } /* Altezza fissa 16:9 su tutte le slide: il sito esterno che legge scrollHeight dell'iframe ottiene sempre la stessa dimensione. */ html.meteomed-embed .meteomed-layout { width: 100%; height: auto; aspect-ratio: 16 / 9; min-height: 0; max-height: none; overflow: hidden; } html.meteomed-embed .meteomed-header { height: clamp(28px, 13cqb, 56px); padding: 0 clamp(6px, 2cqi, 16px); gap: clamp(4px, 1.5cqi, 10px); } html.meteomed-embed .meteomed-header .header-text { gap: 1px; } html.meteomed-embed .meteomed-header .title { font-size: clamp(9px, 4.5cqi, 18px); } html.meteomed-embed .meteomed-header .titlelow { font-size: clamp(7px, 3cqi, 11px); } html.meteomed-embed .meteomed-header .logo { height: 58%; max-width: 26%; } html.meteomed-embed .meteomed-header .logo-marina { max-width: 24%; height: 72%; } html.meteomed-embed .meteomed-footer { height: clamp(8px, 4cqb, 18px); } html.meteomed-embed .progressbar { height: clamp(5px, 3.5cqb, 14px); } /* Allerte: stessa altezza frame delle altre slide, contenuto compresso */ html.meteomed-embed .alerts-container { padding: clamp(4px, 2cqb, 12px) clamp(6px, 2cqi, 14px); overflow: hidden; } html.meteomed-embed .nome-settore { font-size: clamp(10px, 4.2cqi, 20px); margin-bottom: clamp(3px, 1cqb, 8px); } html.meteomed-embed .alerts-list { grid-template-columns: 1fr; gap: clamp(4px, 1.2cqb, 10px); } html.meteomed-embed .alerts-item { min-height: 0; padding: clamp(5px, 1.8cqb, 12px) clamp(8px, 2cqi, 14px); gap: clamp(6px, 2cqi, 12px); border-radius: clamp(8px, 2cqi, 14px); } html.meteomed-embed .alert-icon { font-size: clamp(22px, 9cqi, 52px); } html.meteomed-embed .item-container h1 { font-size: clamp(11px, 3.8cqi, 18px); } html.meteomed-embed .item-container h2 { font-size: clamp(9px, 2.8cqi, 13px); } html.meteomed-embed .alerts-item.green.single-card .item-container h1 { font-size: clamp(12px, 4cqi, 20px); } html.meteomed-embed .info-bar { flex-shrink: 0; font-size: clamp(7px, 2.6cqi, 11px); line-height: 1.15; padding: clamp(2px, 0.8cqb, 5px) clamp(4px, 1.5cqi, 8px); } /* Iframe molto basso: nascondi sottotitolo slide per guadagnare spazio */ @container meteomed (max-height: 280px) { .meteomed-header .titlelow { display: none; } .meteomed-header { height: clamp(24px, 14cqb, 44px); } } @container meteomed (max-height: 200px) { .meteomed-header .title { font-size: clamp(8px, 4cqi, 14px); } } /* ========================================================================== MAP (mare, vento, meteo, sat) Mappa generata dal JS + overlay orario/timestamp + (opz.) overlay legenda ========================================================================== */ .map-wrap { flex: 1 1 auto; width: 100%; position: relative; min-height: 0; overflow: hidden; background: #fff; } .map-wrap #img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; display: block; max-width: none; max-height: none; } /* Modificatore: l'immagine copre tutta l'area (usato da sat per le immagini satellite) */ .map-wrap--cover #img { object-fit: cover; object-position: center center; } /* Spinner di caricamento centrato — visibile finché #img mostra ancora il loader.gif, viene nascosto automaticamente appena la JS sostituisce src con la mappa reale. Sta sopra TUTTI gli overlay (legenda, info-bar, top-left) così è sempre percepibile durante il caricamento. */ .map-wrap:has(#img[src*="loader"])::after { content: ""; position: absolute; top: 50%; left: 50%; width: clamp(44px, 6vw, 96px); height: clamp(44px, 6vw, 96px); margin-top: calc(-1 * clamp(22px, 3vw, 48px)); margin-left: calc(-1 * clamp(22px, 3vw, 48px)); border: clamp(3px, 0.45vw, 6px) solid rgba(0, 0, 0, 0.12); border-top-color: #2196F3; border-radius: 50%; animation: map-spin 0.9s linear infinite; z-index: 4; pointer-events: none; } @keyframes map-spin { to { transform: rotate(360deg); } } /* Overlay orario in basso a destra (background "orario.png" + testo) */ .top-left { position: absolute; right: 0; bottom: clamp(8px, 12%, 14vh); width: clamp(140px, 22%, 320px); color: #009fe3; text-shadow: 2px 4px 4px rgba(0, 0, 0, 0.3); font-size: clamp(11px, 1.8vw, 22px); text-align: right; font-family: "Arial Black", Gadget, sans-serif; padding: clamp(4px, 1vh, 12px) clamp(8px, 1.2vw, 18px); background-image: url("../images/orario.png?v=105"); background-repeat: no-repeat; background-size: 100% 100%; z-index: 2; pointer-events: none; } /* Overlay legenda centrata verticalmente sul lato sinistro. Wrapper a tutta altezza disponibile; l'immagine resta sempre visibile per intero grazie a object-fit:contain. La width scala in modo fluido con vw così da rimpicciolirsi progressivamente mano a mano che il dispositivo diventa più piccolo. */ .bottom-left { position: absolute; left: clamp(2px, 0.8%, 12px); top: clamp(12px, 5vh, 64px); bottom: clamp(12px, 5vh, 64px); width: clamp(50px, 13vw, 220px); display: flex; align-items: center; justify-content: flex-start; z-index: 2; pointer-events: none; } .bottom-left #imgleg { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; } /* ========================================================================== ALLERTE (allerte) ========================================================================== */ .alerts-container { flex: 1 1 auto; width: 100%; display: flex; flex-direction: column; align-items: center; padding: clamp(12px, 2.5vh, 28px) clamp(12px, 3vw, 40px); overflow-y: auto; min-height: 0; } .nome-settore { width: 100%; text-align: center; color: #000; font-size: clamp(20px, 3.2vw, 38px); font-weight: bold; margin-bottom: clamp(12px, 2vh, 24px); text-shadow: 2px 4px 4px rgba(0, 0, 0, 0.3); text-transform: uppercase; } .alerts-list { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(12px, 2vh, 24px); align-items: stretch; } .alerts-item { border-radius: 16px; padding: clamp(12px, 2.5vh, 28px) clamp(16px, 2.5vw, 28px); display: flex; align-items: center; justify-content: center; gap: clamp(12px, 2vw, 28px); color: white; min-height: clamp(140px, 22vh, 240px); flex-wrap: nowrap; } .alerts-item.single-card { grid-column: 1 / -1; } .alerts-item.green { background-color: rgba(0, 200, 83, 0.85); } .alerts-item.orange { background-color: rgba(255, 128, 0, 0.85); } .alerts-item.red { background-color: rgba(255, 0, 0, 0.85); } .alert-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: clamp(48px, 7vw, 120px); line-height: 1; } .item-container { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: clamp(2px, 0.6vh, 8px); color: white; text-align: center; } .item-container h1 { font-size: clamp(16px, 2.4vw, 32px); line-height: 1.1; font-weight: bold; word-break: break-word; } .item-container h2 { font-size: clamp(12px, 1.6vw, 22px); line-height: 1.1; font-weight: normal; word-break: break-word; } .alerts-item.green.single-card .item-container h1 { font-size: clamp(20px, 3vw, 40px); } /* ========================================================================== TAVSIN — tabelle sinottiche (tavsin) ========================================================================== */ .titolo-localita { width: 100%; flex-shrink: 0; background: #4DA1CA; color: #fff; text-align: center; padding: clamp(6px, 1vh, 12px) clamp(8px, 1.5vw, 20px); font-size: clamp(13px, 1.8vw, 22px); font-weight: bold; line-height: 1.2; } .titolo-localita:empty { display: none; } .tavsin-wrap { flex: 1 1 auto; width: 100%; min-height: 0; overflow: auto; background: #fff; } .tavsin-wrap .tableResp { width: 100%; position: relative; } .tavsin-wrap .tableResp .tableRespCont { width: 100%; overflow-x: auto; } .tavsin-wrap .tableSinottiche { width: 100%; min-width: 900px; border-collapse: separate; } .tavsin-wrap .tableSinottiche thead tr th, .tavsin-wrap .tableSinottiche tbody tr th, .tavsin-wrap .tableSinottiche tbody tr td { padding: clamp(4px, 0.8vh, 12px) clamp(4px, 0.6vw, 10px); font-size: clamp(10px, 1.05vw, 14px); vertical-align: middle; } .tavsin-wrap .tableSinottiche thead th { font-size: clamp(11px, 1.15vw, 16px); color: #555; font-weight: bold; background: #f5f5f5; position: sticky; top: 0; z-index: 1; } .tavsin-wrap .tableSinottiche thead th small { display: block; font-size: clamp(9px, 0.9vw, 12px); color: #36aee8; font-style: italic; font-weight: normal; } .tavsin-wrap .tableSinottiche tbody tr td img, .tavsin-wrap .tableSinottiche tbody tr th img { max-width: clamp(16px, 1.6vw, 26px); height: auto; vertical-align: middle; } .tavsin-wrap .tableSinottiche tbody tr td small, .tavsin-wrap .tableSinottiche tbody tr th small { font-size: clamp(9px, 0.85vw, 11px); display: inline-block; line-height: 1.1; } .tavsin-wrap .tableSinottiche tbody tr th { white-space: nowrap; font-weight: 600; } /* Override del meccanismo "colonna data fissa" del CSS tavsin.css legacy */ @media (max-width: 1139px) { .tavsin-wrap .tableResp .tableRespCont { overflow-x: auto !important; overflow-y: visible !important; margin-left: 0 !important; width: 100% !important; } .tavsin-wrap .tableResp tr th:first-child, .tavsin-wrap .tableResp tr.rowEvi th:first-child { position: static !important; width: auto !important; display: table-cell !important; } } /* ========================================================================== INFO BAR — "Dati del run XX UTC del XX/XX/XXXX..." Usata da: mare, vento, meteo, allerte, tavsin ========================================================================== */ .info-bar { width: 100%; flex-shrink: 0; background: #fff; color: #000; text-align: center; padding: clamp(5px, 1vh, 14px) clamp(8px, 1.2vw, 22px); font-size: clamp(13px, 1.5vw, 24px); line-height: 1.25; border-top: 1px solid rgba(0, 0, 0, 0.1); } /* Modificatore: sovrapposta all'immagine con sfondo trasparente (usato da mare/vento/meteo, deve stare DENTRO .map-wrap) */ .info-bar--overlay { position: absolute; left: 0; right: 0; bottom: 0; background: transparent; color: #000; border-top: 0 none; /* Alone bianco soft per migliorare la leggibilità sopra l'immagine, in particolare delle parti azzurre (#2196F3) */ text-shadow: 0 0 3px rgba(255, 255, 255, 0.85), 0 1px 2px rgba(255, 255, 255, 0.55); z-index: 3; pointer-events: none; } /* ========================================================================== PROGRESS BAR ========================================================================== */ .progressbar { position: relative; width: 100%; height: clamp(8px, 3cqb, 26px); flex-shrink: 0; } .progressbar .w3-light-grey { width: 100%; height: 100%; } .progressbar #myBar { height: 100%; width: 1%; background-color: #2196F3; } /* ========================================================================== FOOTER azzurro con sfumatura ========================================================================== */ .meteomed-footer { position: relative; width: 100%; height: clamp(12px, 4cqb, 32px); background: linear-gradient(to bottom, #BDE9FA 0%, #7FD7F5 50%, #1AB5F0 100%); flex-shrink: 0; z-index: 2; } .meteomed-footer::before { content: ""; position: absolute; top: -4px; left: 0; width: 100%; height: 4px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0)); pointer-events: none; } /* ========================================================================== RESPONSIVE — breakpoint comuni ========================================================================== */ /* ---------- TABLET / SMALL DESKTOP (≤ 768px) ---------- */ @media (max-width: 768px) { .meteomed-header { gap: 8px; } .meteomed-header .title { font-size: clamp(11px, 2.4vw, 18px); } .meteomed-header .titlelow { font-size: clamp(9px, 1.6vw, 13px); } .meteomed-header .logo-marina { max-width: 25%; } .top-left { width: clamp(110px, 28%, 200px); font-size: clamp(10px, 2.2vw, 15px); } .bottom-left { width: clamp(46px, 11vw, 130px); top: clamp(10px, 4vh, 40px); bottom: clamp(10px, 4vh, 40px); } .info-bar { font-size: clamp(11px, 1.8vw, 16px); padding: clamp(4px, 0.8vh, 10px) clamp(6px, 1vw, 16px); } .alerts-container { padding: 16px 12px; } .nome-settore { font-size: clamp(18px, 4vw, 28px); } .alerts-list { grid-template-columns: 1fr; gap: 12px; } .alerts-item { padding: 14px 16px; gap: 14px; min-height: 0; } .alert-icon { font-size: clamp(40px, 12vw, 80px); } .item-container h1 { font-size: clamp(15px, 4vw, 22px); } .item-container h2 { font-size: clamp(11px, 3vw, 16px); } .titolo-localita { font-size: clamp(12px, 2.2vw, 16px); } .tavsin-wrap .tableSinottiche { min-width: 800px; } .tavsin-wrap .tableSinottiche thead tr th, .tavsin-wrap .tableSinottiche tbody tr th, .tavsin-wrap .tableSinottiche tbody tr td { padding: 6px 6px; font-size: 11px; } .tavsin-wrap .tableSinottiche thead th { font-size: 12px; } } /* ---------- SMARTPHONE (≤ 480px) ---------- */ @media (max-width: 480px) { .meteomed-header { gap: 6px; padding: 0 8px; } .meteomed-header .logo { height: 60%; } .meteomed-header .title { font-size: clamp(10px, 2.8vw, 15px); } .meteomed-header .titlelow { font-size: clamp(8px, 1.8vw, 11px); } .meteomed-header .logo-marina { max-width: 22%; height: 70%; } .top-left { width: clamp(100px, 35%, 170px); font-size: clamp(9px, 2.6vw, 13px); bottom: clamp(6px, 10%, 12vh); } .bottom-left { width: clamp(40px, 14vw, 100px); left: clamp(2px, 0.6%, 8px); top: clamp(8px, 3vh, 28px); bottom: clamp(8px, 3vh, 28px); } .info-bar { font-size: clamp(10px, 2.4vw, 14px); padding: clamp(3px, 0.6vh, 8px) clamp(5px, 1vw, 12px); } .alerts-container { padding: 12px 8px; } .nome-settore { font-size: clamp(15px, 5vw, 22px); margin-bottom: 10px; } .alerts-item { padding: 12px; gap: 10px; } .alert-icon { font-size: clamp(32px, 14vw, 60px); } .item-container h1 { font-size: clamp(14px, 4.5vw, 18px); } .item-container h2 { font-size: clamp(10px, 3.2vw, 14px); } .titolo-localita { font-size: 12px; padding: 6px 8px; } .tavsin-wrap .tableSinottiche { min-width: 720px; } .tavsin-wrap .tableSinottiche thead tr th, .tavsin-wrap .tableSinottiche tbody tr th, .tavsin-wrap .tableSinottiche tbody tr td { padding: 4px 5px; font-size: 10px; } .tavsin-wrap .tableSinottiche thead th { font-size: 11px; } } /* ---------- SMARTPHONE STRETTI (≤ 380px) ---------- */ @media (max-width: 380px) { .meteomed-header .titlelow { display: none; } .bottom-left { width: clamp(34px, 16vw, 80px); } } /* ---------- ULTRA STRETTO (≤ 320px) ---------- */ @media (max-width: 320px) { .meteomed-header .title { display: none; } .meteomed-header .logo-marina { max-width: 35%; } } /* ---------- LANDSCAPE SMARTPHONE (max-height: 480px) ---------- */ @media (max-height: 480px) { .meteomed-header { height: clamp(44px, 14vh, 64px); } .meteomed-header .title { font-size: clamp(12px, 4vh, 20px); } .meteomed-header .titlelow { font-size: clamp(9px, 2.4vh, 14px); } .progressbar { height: clamp(8px, 2.4vh, 14px); } /* In landscape lo spazio verticale è poco: margini contenuti ma comunque presenti per non incollare la legenda a header/footer */ .bottom-left { top: clamp(4px, 2vh, 16px); bottom: clamp(4px, 2vh, 16px); } .alerts-container { padding: 8px 12px; } .nome-settore { font-size: clamp(14px, 4vh, 22px); margin-bottom: 6px; } .alerts-item { min-height: 0; padding: 8px 12px; } .alert-icon { font-size: clamp(28px, 10vh, 60px); } .titolo-localita { padding: 4px 8px; } }