/* ========================================================== mobile.css — iAlert Mobile-Responsive Overrides Two scoping approaches used intentionally: 1. #hamburger-btn / #mob-nav / .mob-nav-* rules are NOT scoped to body.mobile-ready because those elements only exist on opted-in pages (added via _nav_mobile.php). Scoping would be redundant. 2. Layout overrides ARE scoped to body.mobile-ready so they have zero effect on production pages that haven't been converted yet. Add class="mobile-ready" to to opt a page in. ========================================================== */ /* ---------------------------------------------------------- HAMBURGER BUTTON Hidden by default everywhere; @media block below reveals it on mobile-ready pages only. ---------------------------------------------------------- */ #hamburger-btn { display: none; flex-direction: column; justify-content: center; gap: 5px; background: none; border: none; cursor: pointer; padding: 10px; position: absolute; right: 10px; top: 10px; z-index: 100; } #hamburger-btn span { display: block; width: 24px; height: 2px; background: #fff; transition: transform .3s, opacity .3s; } #hamburger-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } #hamburger-btn.open span:nth-child(2) { opacity: 0; } #hamburger-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ---------------------------------------------------------- MOBILE NAV PANEL Hidden by default; JS toggles .open class. ---------------------------------------------------------- */ #mob-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #1a3a5c; z-index: 9997; border-top: 2px solid #C41226; max-height: 80vh; overflow-y: auto; } #mob-nav.open { display: block; } .mob-nav-item { border-bottom: 1px solid rgba(255,255,255,.1); } .mob-nav-top { display: flex; align-items: center; justify-content: space-between; padding: 13px 20px; color: #fff !important; font-size: 14px; font-weight: 600; text-decoration: none !important; cursor: pointer; background: none; border: none; width: 100%; text-align: left; font-family: inherit; } .mob-nav-top.has-sub::after { content: '+'; font-size: 18px; opacity: .55; line-height: 1; } .mob-nav-top.has-sub.expanded::after { content: '\2212'; } .mob-nav-sub { display: none; background: rgba(0,0,0,.18); } .mob-nav-sub.open { display: block; } .mob-nav-sub-label { padding: 9px 20px 4px 28px; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.4); } .mob-nav-sub a { display: block; padding: 9px 20px 9px 28px; color: rgba(255,255,255,.85) !important; font-size: 13px; text-decoration: none !important; border-bottom: 1px solid rgba(255,255,255,.06); } .mob-nav-sub a:hover { background: rgba(255,255,255,.1); } /* ========================================================== MOBILE BREAKPOINT — max-width: 1024px All rules below scoped to body.mobile-ready ========================================================== */ @media (max-width: 1024px) { /* ── Member menu bar (logged-in only) ───────────────── */ body.mobile-ready .mbr-menu table { width: 100% !important; } body.mobile-ready .mbr-menu td:first-child { display: none; } body.mobile-ready .mbr-menu td { text-align: center !important; display: block; width: 100% !important; } /* ── Core layout ─────────────────────────────────────── */ body.mobile-ready { overflow-x: hidden; } body.mobile-ready #wrapper { min-width: 0 !important; width: 100%; } body.mobile-ready .main-container { width: 100% !important; padding: 0 15px; box-sizing: border-box; } /* ── Header ──────────────────────────────────────────── */ body.mobile-ready #inner-banner-bg, body.mobile-ready #home-banner-bg { position: relative; min-height: 0 !important; } body.mobile-ready #left-logo-holder { width: auto !important; margin: 12px 0 !important; } body.mobile-ready #left-logo-holder img { max-height: 46px; width: auto; } body.mobile-ready #right-menu-holder { display: none !important; } body.mobile-ready #hamburger-btn { display: flex !important; } /* ── Search bar ──────────────────────────────────────── */ body.mobile-ready .wx-hdr-center-search { position: static !important; transform: none !important; top: auto !important; left: auto !important; width: 100%; box-sizing: border-box; padding: 8px 15px; justify-content: center; background: #2a5298; white-space: normal; } body.mobile-ready .wx-hdr-center-search::before { display: none !important; } body.mobile-ready .wx-hdr-center-bg { display: none !important; } body.mobile-ready .wx-hdr-center-search input[type="text"] { flex: 1; width: auto !important; border-radius: 4px 0 0 4px; } /* ── Footer ──────────────────────────────────────────── */ body.mobile-ready footer .footer-container { width: 100% !important; padding: 0 20px !important; box-sizing: border-box; } body.mobile-ready footer .footer-nav-wrapper { width: 100% !important; margin: 12px 0 0 !important; } body.mobile-ready footer .footer-nav-col-1, body.mobile-ready footer .footer-nav-col-2 { width: 100% !important; float: none !important; padding: 0 0 20px !important; text-align: center !important; } body.mobile-ready footer h6.footer-subtitle { text-align: center !important; } body.mobile-ready footer .ftr-menu li { display: inline-block !important; float: none !important; padding: 0 10px !important; font-size: 14px !important; line-height: 36px !important; background: none !important; } } /* ========================================================== weather_location.php — loc-page Content area already uses max-width/fluid CSS — minimal overrides needed. Main addition: extend the sticky mobile CTA bar (coded at 768px inline) to cover the full 1024px mobile breakpoint. ========================================================== */ body.mobile-ready .loc-page { padding-top: 8px !important; } @media (max-width: 1024px) { body.mobile-ready .loc-page { padding-top: 32px !important; } body.mobile-ready .mob-cta-bar { display: flex !important; align-items: center; justify-content: center; position: fixed; bottom: 0; left: 0; right: 0; background: #1a3a5c; border-top: 3px solid #C41226; padding: 12px 16px; z-index: 999; box-shadow: 0 -3px 12px rgba(0,0,0,.25); } body.mobile-ready .mob-cta-bar a { display: block !important; width: 100%; max-width: 420px; background: #C41226; color: #fff !important; padding: 13px 20px; border-radius: 5px; text-align: center; text-decoration: none !important; font-weight: 700; font-size: 1em; } body.mobile-ready #testimonials-content-bg { padding-bottom: 70px; } } /* ========================================================== individual.php — .phonetext-login two-column layout Stack: features (right col) first, signup form (left col) second. CSS order property handles reordering — no HTML changes needed. ========================================================== */ @media (max-width: 1024px) { body.mobile-ready #phonetext-login-content-bg { min-height: 0 !important; background-image: none !important; } body.mobile-ready .phonetext-login-container { width: 100% !important; display: flex; flex-direction: column; } /* Features column — rendered first on mobile */ body.mobile-ready .phonetext-login-right-col { order: 1; width: 100% !important; float: none !important; padding: 0 15px 20px; box-sizing: border-box; } body.mobile-ready .phonetext-login-right-col h3 { margin-top: 20px !important; font-size: 22px !important; text-align: center; } body.mobile-ready .phonetext-login-right-col h3.subtitle { font-size: 16px !important; margin-bottom: 16px !important; text-align: center; } body.mobile-ready .phonetext-login-right-col > img { display: none; } body.mobile-ready .phonetext-login-cont-box-bg { width: 100% !important; min-height: 0 !important; background-image: none !important; border: 1px solid #e0e0e0; border-radius: 6px; box-sizing: border-box; padding: 14px; margin-bottom: 12px; display: flex; align-items: flex-start; gap: 12px; } body.mobile-ready .phonetext-login-first-box-img-holder { width: 36px !important; flex-shrink: 0; } body.mobile-ready .phonetext-login-first-box-img-holder .step-num { padding: 0 !important; font-size: 26px; line-height: 1.2; text-align: center; } body.mobile-ready .phonetext-login-first-box-content-holder { width: auto !important; float: none !important; flex: 1; } body.mobile-ready .phonetext-login-first-box-content-holder h2 { padding-top: 0 !important; font-size: 17px !important; margin-bottom: 6px; } body.mobile-ready .phonetext-login-btn-holder { margin: 10px 0 20px !important; float: none; text-align: center; } body.mobile-ready .learn-btn { display: inline-block; float: none; } /* Signup form column — rendered second on mobile */ body.mobile-ready .phonetext-login-left-col { order: 2; width: 100% !important; float: none !important; min-height: 0 !important; background-image: none !important; } body.mobile-ready .phonetext-login-left-textholder { margin: 16px auto !important; width: 95%; } body.mobile-ready .phonetext-login-left-textholder h1 { font-size: 20px !important; margin-bottom: 14px; } body.mobile-ready .login-form-holder { width: 100% !important; padding: 0; box-sizing: border-box; } body.mobile-ready .login-form-holder input[type="text"], body.mobile-ready .login-form-holder input[type="email"], body.mobile-ready .login-form-holder input[type="password"] { width: 100% !important; box-sizing: border-box; } body.mobile-ready .login-form-holder input.signup { float: none; width: 100% !important; display: block; } } /* ========================================================== forecast.php — fc-obs-data desktop baseline Flex divs replace the legacy data ; this block makes them render correctly at desktop widths on wrk_forecast.php. ========================================================== */ body.mobile-ready .fc-obs-data { display: table; border-collapse: collapse; border-spacing: 0; } body.mobile-ready .fc-obs-row { display: table-row; } body.mobile-ready .fc-obs-label { display: table-cell; text-align: right; font-weight: bold; white-space: nowrap; padding: 1px 8px 1px 2px; } body.mobile-ready .fc-obs-val { display: table-cell; padding: 1px 2px; } body.mobile-ready .fc-cond-icon { width: 134px; height: 134px; display: block; } body.mobile-ready #fc-subs-standalone { display: none; } body.mobile-ready .fc-subs-grid { display: grid; grid-template-columns: repeat(4, auto); gap: 12px; justify-content: center; margin: 0 auto 4px; } body.mobile-ready .fc-subs-item { text-align: center; padding: 4px; } /* ========================================================== forecast.php — fc-page layout ========================================================== */ @media (max-width: 1024px) { /* ── Alert links bar: center on mobile ── */ body.mobile-ready .fc-alert-links { justify-content: center !important; gap: 16px; } /* ── Current conditions ── */ body.mobile-ready #fc-current-cond { padding-top: 8px !important; } body.mobile-ready #fc-current-cond > table, body.mobile-ready #fc-current-cond > table > tbody, body.mobile-ready #fc-current-cond > table > tr, body.mobile-ready #fc-current-cond > table > tbody > tr { display: block; width: 100%; } body.mobile-ready #fc-current-cond > table > tr > td, body.mobile-ready #fc-current-cond > table > tbody > tr > td { display: block; width: 100% !important; box-sizing: border-box; } /* Space above Alert Subscriptions column */ body.mobile-ready #fc-current-cond > table > tr > td:nth-child(2), body.mobile-ready #fc-current-cond > table > tbody > tr > td:nth-child(2) { padding-top: 0; text-align: center; } /* Alert Subscriptions section header — matches .tcb forecast section style */ body.mobile-ready .fc-subs-header { display: block; width: 100%; box-sizing: border-box; margin: 0 0 12px !important; padding: 28px 0 6px; font-size: 1.15em !important; font-weight: bold; color: #1a3a5c !important; border-bottom: 2px solid #2a5298; text-align: left !important; } body.mobile-ready .fc-subs-header a { color: #1a3a5c !important; text-decoration: none !important; } /* Data row (icon | weather+temp | data table) → icon+text same line, data below */ body.mobile-ready .fc-cond-left-tbl { width: 100%; } body.mobile-ready .fc-cond-left-tbl tr:nth-child(2) { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; } body.mobile-ready .fc-cond-left-tbl tr:nth-child(2) td:nth-child(1) { flex: 0 0 90px !important; width: 90px !important; max-width: 90px !important; padding: 0 !important; } body.mobile-ready .fc-cond-left-tbl tr:nth-child(2) td:nth-child(2) { flex: 0 0 auto !important; padding-left: 0 !important; padding-right: 0 !important; } body.mobile-ready .fc-cond-left-tbl tr:nth-child(2) td:nth-child(3) { flex: 0 0 100%; padding-top: 12px; } /* ── Obs data rows: centered flex block ── */ body.mobile-ready .fc-obs-data { display: flex; flex-direction: column; align-items: center; } body.mobile-ready .fc-obs-row { display: flex; margin: 0; } body.mobile-ready .fc-obs-label { width: 110px; flex-shrink: 0; text-align: right; font-weight: bold; padding-right: 10px; white-space: nowrap; } body.mobile-ready .fc-obs-val { text-align: left; } /* Icon */ body.mobile-ready .fc-cond-icon { width: 90px !important; height: 90px !important; } /* Condition text */ body.mobile-ready .fc-cond-left-tbl h2 { font-size: .95em !important; font-weight: normal !important; margin: 0 0 4px !important; } /* Temperature — large and prominent */ body.mobile-ready .fc-cond-left-tbl h1 { font-size: 2.2em !important; font-weight: bold !important; margin: 0 !important; color: #1a3a5c; } /* Space above and below timestamp */ body.mobile-ready .fc-cond-left-tbl tr:nth-child(3) td { padding-top: 14px !important; padding-bottom: 24px !important; text-align: center; } /* ── 5-day forecast: horizontal scroll slider ── */ body.mobile-ready #fc-5day-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; } body.mobile-ready #fc-5day-table { min-width: 680px; } body.mobile-ready #fc-5day-table > tr > td, body.mobile-ready #fc-5day-table > tbody > tr > td { min-width: 76px; width: auto !important; } body.mobile-ready #fc-5day-table img { width: 68px !important; height: 68px !important; } /* ── Detailed forecast: stack sidebar below rows ── */ body.mobile-ready #fc-detail-flex { flex-direction: column; } /* Narrow the period label so forecast text has more room */ body.mobile-ready #fc-detail-flex > div:first-child > div > div:first-child { width: 82px !important; padding-left: 4px !important; padding-right: 8px !important; } body.mobile-ready #det-forecast-sidebar { width: 100% !important; border-left: none !important; border-top: 1px solid #ccd6e0; flex-direction: row; flex-wrap: wrap; gap: 16px; padding: 12px 15px; box-sizing: border-box; } body.mobile-ready #det-forecast-sidebar > div { flex: 1; min-width: 140px; } /* ── Promo signup strip: space below before footer ── */ body.mobile-ready #fc-promo-signup { margin-bottom: 24px; } /* ── Observation History: hidden on mobile ── */ body.mobile-ready #fc-obs-history { display: none; } /* ── Footer gap: base CSS adds 30px, weather_location rule adds 70px; scope this override to forecast-only via :has(.wx-page) ── */ body.mobile-ready #testimonials-content-bg:has(.wx-page) { padding-bottom: 8px !important; } /* ── Regional Weather Observations: stack columns ── */ body.mobile-ready #fc-regional-tbl, body.mobile-ready #fc-regional-tbl > tbody, body.mobile-ready #fc-regional-tbl > tbody > tr, body.mobile-ready #fc-regional-tbl > tr { display: block; width: 100%; } body.mobile-ready #fc-regional-tbl > tbody > tr > td, body.mobile-ready #fc-regional-tbl > tr > td { display: block; width: 100% !important; box-sizing: border-box; border-bottom: 1px solid #e8eef5; padding-bottom: 10px; margin-bottom: 4px; } /* ── Subscriptions: hide desktop td, show standalone block ── */ body.mobile-ready .fc-subs-col-desktop { display: none !important; } body.mobile-ready #fc-subs-standalone { display: block; } body.mobile-ready .fc-subs-grid { grid-template-columns: repeat(2, 1fr); } }