/* ============================================================ GOLDEN ARK · MOBILE FIXES (global stylesheet) Hardens responsive behavior for phones (≤640px) + tablets. Strategy: minimal-but-defensive overrides that catch the common pain points across pages without breaking desktop. Drop into AFTER the page's own stylesheets: ============================================================ */ /* ─── Global safety net (all viewports) ───────────────────── */ html, body { /* Prevent rogue horizontal scroll from oversized children */ max-width: 100%; } body { overflow-x: hidden; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } img, video, iframe, svg, canvas { max-width: 100%; height: auto; } iframe.platform-iframe { height: auto; min-height: calc(100dvh - 110px); } /* Touch-friendly minimums (any viewport) */ button, a.btn, .btn, .nav-cta, .btn-primary, .btn-outline, .ops-tab, .platform-tab, .schedule-btn { min-height: 40px; } input, select, textarea { font-size: 16px; /* iOS Safari refuses to zoom on focus when >=16px */ } /* ─── Tablet (≤900px) ─────────────────────────────────────── */ @media (max-width: 900px) { .container { padding-left: 20px; padding-right: 20px; } .grid-3, .grid-auto-360, .grid-auto-300 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .grid-2 { grid-template-columns: 1fr; } } /* ─── Phone (≤640px) ──────────────────────────────────────── */ @media (max-width: 640px) { /* Container padding tight on phones */ .container { padding-left: 14px; padding-right: 14px; } /* Heroes / large titles get smaller and tighter */ .hero, .platform-hero { padding: 30px 0 24px !important; } .hero__title, .platform-hero__title, .hero-headline { font-size: clamp(34px, 9vw, 48px) !important; letter-spacing: 0.04em !important; line-height: 1.05 !important; } .hero__lead, .platform-hero__lead, .hero-sub, .sub { font-size: 15px !important; line-height: 1.55 !important; } .hero__meta { grid-template-columns: 1fr 1fr !important; gap: 10px !important; } .hero__meta-item .value { font-size: 13px !important; } /* Collapse multi-col grids → single col on phones */ .grid-5, .grid-4, .grid-3, .grid-2, .grid-auto-360, .grid-auto-300, .grid-auto-260 { grid-template-columns: 1fr !important; gap: 12px !important; } /* Card padding tighter */ .module-card, .artifact-tile, .kpi-card, .insight-card, .feat, .role, .carrier-card, .insight { padding: 18px !important; } .module-card__title, .artifact-tile__title { font-size: 17px !important; } .module-card__desc, .artifact-tile__meta { font-size: 13px !important; } /* Section heads compact */ .section { padding: 36px 0 !important; } .section-head { gap: 12px !important; flex-wrap: wrap !important; } .section-head__title { font-size: 20px !important; letter-spacing: 0.05em !important; } .section-head__sub { font-size: 10px !important; } /* Tables — wrap in horizontal scroll if too wide */ table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } table thead, table tbody { display: table; width: 100%; } /* KPI strips → 2-col on phone */ .kpi-strip { grid-template-columns: 1fr 1fr !important; gap: 8px !important; } .kpi-strip__item strong { font-size: 22px !important; } .kpi-strip__item .label { font-size: 9px !important; } /* Search bar compact */ .search-bar { padding: 10px 14px !important; gap: 8px !important; } .search-bar input { font-size: 14px !important; } /* Buttons full-width on phone (when in form rows) */ .hero-btns { flex-direction: column !important; } .hero-btns .btn-primary, .hero-btns .btn-outline { width: 100% !important; text-align: center !important; } /* Footer compact + stack */ .gas-footer { padding: 24px 0 !important; } .gas-footer__top { flex-direction: column !important; gap: 8px !important; align-items: flex-start !important; } .gas-footer__pillars { flex-wrap: wrap !important; gap: 10px !important; } .gas-footer__pillars span { font-size: 10px !important; } /* Nav: keep the brand/logo visible, shrink everything else */ .gas-nav { padding: 0 12px !important; } .gas-nav__brand { font-size: 14px !important; padding: 12px 12px 12px 0 !important; } .gas-nav__tabs { gap: 2px !important; } .gas-nav__tab { padding: 6px 8px !important; font-size: 9px !important; letter-spacing: 0.08em !important; } .gas-nav__logout { padding: 6px 9px !important; font-size: 9px !important; } .gas-nav__status { display: none !important; } /* Dispatch platform header */ .platform-nav { padding: 0 10px !important; gap: 8px !important; } .platform-brand { font-size: 13px !important; letter-spacing: 0.08em !important; } .platform-back, .platform-logout { padding: 6px 8px !important; font-size: 8px !important; } .platform-status { display: none !important; } .platform-tab { padding: 11px 12px !important; font-size: 9px !important; letter-spacing: 0.08em !important; } /* iOS dynamic viewport handling */ .platform-iframe { min-height: calc(100dvh - 100px) !important; } /* Daily Ops tabs */ .ops-tab { padding: 11px 12px !important; font-size: 9px !important; } /* Status bar (overview) */ .status-bar { flex-direction: column !important; gap: 10px !important; padding: 14px !important; align-items: flex-start !important; } .status-bar__item { flex-direction: row !important; align-items: center !important; gap: 10px !important; } /* Auth pages — keep card readable on small phones */ .auth-card, .auth-shell { padding: 24px 18px !important; max-width: 100% !important; } .auth-input { font-size: 16px !important; padding: 12px 14px !important; } .auth-btn { width: 100% !important; font-size: 14px !important; } } /* ─── Very small phone (≤380px) ───────────────────────────── */ @media (max-width: 380px) { .hero__title, .platform-hero__title, .hero-headline { font-size: 30px !important; } .container { padding-left: 12px; padding-right: 12px; } .hero__meta { grid-template-columns: 1fr !important; } .platform-tab { padding: 10px !important; } .gas-nav__brand { font-size: 13px !important; } } /* ─── Dispatch platform shell — iOS dynamic viewport ──────── */ /* The original CSS sets html,body{height:100%;overflow:hidden} which fights mobile browser chrome. Override with dvh for proper mobile behavior while keeping the tabbed shell layout. */ @media (max-width: 900px) { html, body { /* Allow body to be tall enough on mobile (override fixed 100%) */ } body.dispatch-platform-shell { /* Set by adding class="dispatch-platform-shell" on if needed */ } } /* ─── Reduce motion preference (accessibility) ────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }