/* Forecast Modal — utility-bar weather icon opens a 4-island tabbed forecast. Reuses the .hg-weather-* day-grid classes from weather-widget-v1.css for visual parity with the beach-page weather pill modal. Only the tab bar, container spacing, footer links, and error state are scoped here with .hg-fcm-* classes. Uses px sizing throughout because the site base font-size is 62.5% and rem values render ~40% smaller than expected. */ /* ── Modal shell overrides ──────────────────────────────────── The shared .modals shell ships at z-index:999999 and lets the modal-card grow tall enough to be clipped by the parent on mobile. Bump z-index to 2147483647 (max signed 32-bit int — the site convention for beating the Raptive sticky footer ad, see rating-pill-v1.css / nearby-pill-v1.css) and cap the card to viewport height so the body scrolls internally instead of overflowing the viewport. */ .forecast-modal{ z-index:2147483647 !important; } .forecast-modal .modal-card{ max-height:100vh; display:flex; flex-direction:column; overflow:hidden; } .forecast-modal .modal-card-body{ flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; } /* Keep the close button anchored to the visible bottom of the card even when body content scrolls. (modal-card is now overflow:hidden, so the absolute-positioned button no longer scrolls with content.) */ .forecast-modal .modal-card .modal-close{ z-index:2; } /* Top-right close button. The modal-card-head with the logo was removed (it ate ~120px of mobile real estate without adding anything), so this button now anchors to the very top corner. */ .forecast-modal .modal-close.hg-fcm-close-top{ top:10px !important; right:10px !important; bottom:auto !important; z-index:3; } /* Hide the Raptive sticky footer ad while the modal is open. We tried z-index:1 + pointer-events:none in earlier rounds, but Raptive's own stacking context kept winning regardless of the modal's z-index — even after portaling the modal to . Practical fix: use display:none on the known adhesion containers so the ad is fully hidden while the modal is open and reappears on close. Stick to a tight allowlist of Raptive anchor/footer selectors so we don't accidentally hide the inline page-content ad slots (those live behind the modal anyway). */ body.hg-fcm-modal-open .adthrive-ad-anchor, body.hg-fcm-modal-open .adthrive-footer, body.hg-fcm-modal-open .adthrive-collapse, body.hg-fcm-modal-open [id*="adhesion"], body.hg-fcm-modal-open [id^="adthrive-anchor"]{ display:none !important; } .hg-fcm{ max-width:720px; margin:0 auto; padding:0 4px; } .hg-fcm-logo{ display:block; margin:0 auto 10px; height:32px; width:auto; } .hg-fcm-title{ margin:0 0 14px; font-size:22px; font-weight:700; color:#222; text-align:center; line-height:1.2; } /* ── Island tab bar ──────────────────────────────────────────── */ .hg-fcm-tabs{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 16px; padding:6px; background:#f3f5f7; border-radius:12px; } .hg-fcm-tab{ flex:1 1 auto; min-width:72px; padding:8px 6px 9px; border:none; border-radius:8px; background:transparent; color:#444; font-family:inherit; font-size:13px; font-weight:700; letter-spacing:.2px; cursor:pointer; transition:background .15s ease, color .15s ease, box-shadow .15s ease; display:flex; flex-direction:column; align-items:center; gap:3px; line-height:1.15; -webkit-appearance:none; appearance:none; } .hg-fcm-tab:hover{background:#e5eaef;color:#222} .hg-fcm-tab:focus{outline:2px solid #1866B4;outline-offset:2px} /* Island shape lives ABOVE the label — constant color regardless of active state so readers build a consistent shape + color mental model across the site (matches island nav, guidebook accents, etc.). */ .hg-fcm-tab-icon{ font-size:20px; line-height:1; display:block; } .hg-fcm-tab-name{ display:block; white-space:nowrap; } .hg-fcm-tab[data-island="oahu"] .hg-fcm-tab-icon{color:#F27A24} .hg-fcm-tab[data-island="maui"] .hg-fcm-tab-icon{color:#1866B4} .hg-fcm-tab[data-island="big-island"] .hg-fcm-tab-icon{color:#c3232f} .hg-fcm-tab[data-island="kauai"] .hg-fcm-tab-icon{color:#1D9771} .hg-fcm-tab.is-active{ background:#fff; color:#1866B4; box-shadow:0 1px 3px rgba(0,0,0,.12); } /* Label color on the active tab matches the island brand color */ .hg-fcm-tab[data-island="oahu"].is-active{color:#F27A24} .hg-fcm-tab[data-island="maui"].is-active{color:#1866B4} .hg-fcm-tab[data-island="big-island"].is-active{color:#c3232f} .hg-fcm-tab[data-island="kauai"].is-active{color:#1D9771} /* ── Current-conditions stat strip ───────────────────────────── */ /* Wind / Humidity / Feels like / Sun — sits between the headline and the 7-day grid. Each stat renders only if the field is present, so older cached payloads degrade gracefully. */ .hg-fcm-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:-4px 0 14px; padding:10px 12px; background:#f8fafb; border:1px solid #eceff2; border-radius:8px; } .hg-fcm-stat{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; text-align:center; min-width:0; } .hg-fcm-stat-label{ font-size:11px; font-weight:700; color:#888; text-transform:uppercase; letter-spacing:.4px; line-height:1; } .hg-fcm-stat-value{ font-size:14px; font-weight:700; color:#222; line-height:1.2; white-space:nowrap; } @media (max-width:520px){ .hg-fcm-stats{grid-template-columns:repeat(2,1fr);gap:6px;padding:8px 10px} .hg-fcm-stat-value{font-size:13px} } /* ── Content states ──────────────────────────────────────────── */ .hg-fcm-content{ min-height:220px; } .hg-fcm-loading, .hg-fcm-error{ padding:40px 10px; text-align:center; font-size:15px; color:#666; line-height:1.5; } .hg-fcm-error a{ color:#1866B4; font-weight:700; text-decoration:none; } .hg-fcm-error a:hover{text-decoration:underline} .hg-fcm-error-reason{ font-size:12px; color:#aaa; font-weight:400; } /* ── Footer links + attribution ─────────────────────────────── */ .hg-fcm-links{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; margin-top:20px; padding-top:16px; border-top:1px solid #eceff2; } .hg-fcm-link{ font-size:14px; font-weight:700; color:#1866B4; text-decoration:none; line-height:1.3; } .hg-fcm-link:hover{text-decoration:underline} /* Related-conditions row — "Also today" links to /ocean-report, /sunrise-sunset, /jellyfish-calendar. Keeps the "Weather" label narrow while surfacing adjacent tools readers often want next. */ .hg-fcm-related{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin-top:14px; padding-top:12px; border-top:1px dashed #e6e9ec; font-size:13px; } .hg-fcm-related-label{ color:#888; font-weight:700; text-transform:uppercase; letter-spacing:.5px; font-size:11px; } .hg-fcm-related-link{ color:#333; text-decoration:none; font-weight:600; display:inline-flex; align-items:center; gap:5px; white-space:nowrap; } .hg-fcm-related-link i{color:#1866B4;font-size:14px;line-height:1} .hg-fcm-related-link:hover{color:#1866B4;text-decoration:underline} .hg-fcm-related-link:hover i{color:#1866B4} .hg-fcm-attr{ margin-top:22px; padding-top:6px; font-size:12px; color:#888; text-align:center; } .hg-fcm-attr a{color:#888;text-decoration:underline} .hg-fcm-attr a:hover{color:#1866B4} /* ── Embedded weather brief player ──────────────────────────── */ /* The modal already has an island tab bar at the top — hide the brief's own tab strip and its update-time meta so the player stays compact. Forecast-modal JS clicks the matching brief tab when the parent tab changes, so panel switching stays in sync. */ .hg-fcm-brief-wrap{ margin:0 0 14px; } .hg-fcm-brief-wrap .hg-wx-brief{ margin:0; padding:10px 12px; background:#f7f9fb; border:1px solid #e3e8ed; border-radius:10px; } .hg-fcm-brief-wrap .hg-wx-brief-tabs, .hg-fcm-brief-wrap .hg-wx-brief-meta{ display:none; } .hg-fcm-brief-wrap .hg-wx-brief-head h3{ font-size:14px; margin:0 0 8px; } .hg-fcm-brief-wrap .hg-wx-brief-disclaimer{ font-size:11px; margin-top:8px; } /* ── Mobile refinements ──────────────────────────────────────── */ @media (max-width:520px){ /* Goal: fit the entire modal on a 414×896 iPhone XR viewport without scrolling. Squeeze every section's vertical margin / padding / min-height until the player + 7-day grid + footer links + attribution all sit inside ~720px of inner height. */ .hg-fcm-logo{height:24px;margin-bottom:8px} .hg-fcm-title{font-size:18px;margin:0 0 8px} .hg-fcm-tabs{margin:0 0 10px;padding:4px;gap:4px} .hg-fcm-tab{font-size:12px;padding:6px 4px 7px;min-width:56px;gap:2px} .hg-fcm-tab-icon{font-size:18px} .hg-fcm-brief-wrap{margin:0 0 8px} .hg-fcm-brief-wrap .hg-wx-brief{padding:8px 10px} .hg-fcm-brief-wrap .hg-wx-brief-head h3{font-size:13px;margin:0 0 6px} .hg-fcm-content{min-height:0} .hg-fcm-links{ flex-direction:column; align-items:flex-start; margin-top:10px; padding-top:8px; gap:4px; } .hg-fcm-link{font-size:13px} .hg-fcm-related{margin-top:8px;padding-top:8px;gap:4px 12px;font-size:12px} .hg-fcm-related-label{display:none} .hg-fcm-attr{margin-top:10px;font-size:11px} /* No bottom-right close button anymore — drop the padding-bottom reserve so we reclaim the space for actual content. */ .forecast-modal .modal-card-body{padding:12px 14px 14px} } /* Print: hide the modal entirely — weather is time-sensitive */ @media print{ .forecast-modal{display:none !important} }