/* ============================================================================ Writz — Mobile / responsive layer (Phase 35 mobile) ============================================================================ Loaded on EVERY page (injected into by meta_app's after_request). Desktop is unchanged: all rules live inside max-width media queries or are gated on body.is-phone / body.is-tablet classes set by mobile.js. Breakpoints: phone ≤ 600px → single column, hamburger nav, big touch targets tablet 601–1024 → roomier two-up layouts, scrollable tab bar desktop > 1024 → untouched ============================================================================ */ /* Touch + sizing baseline (safe on all sizes) */ :root { --m-touch: 44px; } /* Apple HIG minimum tap target */ /* The JS-injected hamburger for the Studio shell — hidden on desktop */ .m-navtoggle { display: none; background: var(--bg-secondary, #131920); color: var(--text-primary, #e8f0fe); border: 1px solid var(--border-primary, #1e2d40); border-radius: 8px; font-size: 20px; line-height: 1; width: var(--m-touch); height: var(--m-touch); cursor: pointer; flex-shrink: 0; } /* ============================ PHONE ≤ 600px ============================ */ @media (max-width: 600px) { /* ---- Studio shell header → hamburger ---- */ .app-header { flex-wrap: wrap; gap: 8px; padding: 8px 12px; position: relative; } .m-navtoggle { display: inline-flex; align-items: center; justify-content: center; order: 2; margin-left: auto; } /* Collapse the 12-tab bar; reveal as a full-width dropdown on toggle */ .app-tabs { display: none !important; position: absolute; top: 100%; left: 0; right: 0; z-index: 1000; flex-direction: column !important; align-items: stretch !important; background: var(--bg-secondary, #131920); border-bottom: 1px solid var(--border-primary, #1e2d40); box-shadow: 0 12px 24px rgba(0,0,0,0.4); max-height: 75vh; overflow-y: auto; padding: 6px; gap: 2px; } body.m-nav-open .app-tabs { display: flex !important; } .app-tabs .tab-btn { width: 100%; justify-content: flex-start; gap: 12px; min-height: var(--m-touch); padding: 10px 14px; font-size: 15px; } .app-tabs .tab-btn .tab-label { display: inline !important; } /* show labels in the drawer */ /* The meta_app "Publish" dropdown + mic widget inside the tab bar: let them sit inline in the drawer instead of floating */ .app-tabs .meta-tab-dropdown, .app-tabs .hw-mic-wrap { width: 100%; } .app-tabs .meta-tab-dropdown-menu { position: static; box-shadow: none; } /* Right-side header actions: keep compact, allow wrap */ .app-header > div[style*="margin-left:auto"], .app-header > div[style*="margin-left: auto"] { order: 3; } #currentProjectBadge { max-width: 120px; font-size: 12px; } /* ---- Global single-column reflow ---- */ .voices-grid, .books-container, .book-grid, .pricing-grid, [style*="grid-template-columns"] { grid-template-columns: 1fr !important; } /* but keep small auto-fill chip rows multi-up */ .vctk-chips, .meta-dash-actions { grid-template-columns: none !important; } /* Two-column "browse" layouts stack */ .browse-container { grid-template-columns: 1fr !important; display: block !important; } .filter-sidebar { width: 100% !important; margin-bottom: 16px; } /* Generic content padding trim */ .container { padding-left: 14px !important; padding-right: 14px !important; } .tab-content { padding: 0 !important; } /* Modals: full-width, not fixed 360-480px */ .modal-content, .modal-dialog { min-width: 0 !important; width: 94vw !important; max-width: 94vw !important; } /* Touch targets for icon buttons */ .btn-icon, .vctk-chip, .btn-small { min-height: 38px; } button, .btn { min-height: var(--m-touch); } /* Tables scroll instead of overflowing */ .table-container, table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Heavy-authoring hint banner (Phase 2 boundary) */ .m-desktop-hint { display: block !important; } /* ---- Phone typography: big desktop hero text is overwhelming on a narrow screen. Scale headings down fluidly. ---- */ h1 { font-size: clamp(24px, 7vw, 34px) !important; line-height: 1.15 !important; } h2, .section-title { font-size: clamp(20px, 6vw, 26px) !important; } .hero h1, .hero-title, [class*="hero"] h1 { font-size: clamp(26px, 8vw, 36px) !important; } .hero p, .hero-subtitle { font-size: 15px !important; line-height: 1.5 !important; } /* Hero CTA buttons stack full-width instead of side-by-side overflow */ .hero-cta, .cta-row, .als-cta-row, [class*="cta-row"] { flex-direction: column !important; align-items: stretch !important; } .hero-cta .btn, .cta-row .btn { width: 100% !important; } /* The floating chat/help bubble shouldn't cover content/buttons */ .meta-chat-bubble, [class*="chat-bubble"], [id*="chat-widget"] { transform: scale(0.85); transform-origin: bottom right; } /* Tighten the storefront header cluster so it never overflows */ .navbar { row-gap: 6px; } .navbar-search-auth { gap: 6px !important; } } /* Belt-and-suspenders: ensure the storefront nav truly collapses on phones even if cascade/caching gets weird. (Matches storefront_enhanced.css but loaded from , so this is a safety net, not the primary rule.) */ @media (max-width: 768px) { body .navbar-links:not(.meta-open) { display: none !important; } body .meta-hamburger { display: inline-flex !important; } } /* ============================ TABLET 601–1024 ============================ */ @media (min-width: 601px) and (max-width: 1024px) { /* Studio tab bar: keep horizontal but let it scroll if it overflows */ .app-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; } .app-tabs .tab-btn { flex-shrink: 0; } /* Two-up grids on tablet */ .voices-grid, .book-grid, .books-container { grid-template-columns: repeat(2, 1fr) !important; } .pricing-grid { grid-template-columns: repeat(2, 1fr) !important; } } /* ---- "Best on desktop" hint for heavy authoring tabs (hidden by default, shown on phone via the rule above; toggled per-tab by mobile.js) ---- */ .m-desktop-hint { display: none; background: rgba(245, 166, 35, 0.10); border: 1px solid rgba(245, 166, 35, 0.4); color: #f5a623; font-size: 13px; line-height: 1.5; padding: 12px 14px; margin: 12px; border-radius: 10px; } /* ---- PWA: when launched from the home screen (standalone), pad for the iOS status bar / notch so the header isn't under it ---- */ @media (display-mode: standalone) { .app-header, .navbar, body > nav:first-of-type { padding-top: max(8px, env(safe-area-inset-top)); } }