/* /lib/mobile-fix.css * VelorStrategy site-wide mobile responsive corrections. * Drop-in: in any page . * Targets only narrow viewports (≤640px) — no impact on desktop. */ @media (max-width: 640px) { /* Universal: prevent horizontal scroll */ html, body { max-width: 100vw; overflow-x: hidden; } body { word-wrap: break-word; overflow-wrap: break-word; } /* Nav: shrink padding, allow wrap, ensure Sign Out is reachable */ nav, nav.top-nav { padding: 10px 14px !important; gap: 8px !important; flex-wrap: wrap !important; } .nav-logo { font-size: 1rem !important; letter-spacing: -0.01em !important; } .nav-logo-sub { font-size: .56rem !important; margin-left: 6px !important; padding-left: 6px !important; letter-spacing: .08em !important; } .nav-actions { gap: 6px !important; flex-wrap: wrap !important; } .nav-btn, .nav-btn-ghost { font-size: .7rem !important; padding: 7px 11px !important; letter-spacing: 0 !important; } /* Hero: scale down + tighter padding */ .hero { padding: 32px 16px 22px !important; } .hero-eyebrow { font-size: .56rem !important; padding: 5px 11px !important; letter-spacing: .12em !important; margin-bottom: 14px !important; white-space: nowrap !important; max-width: 92vw !important; overflow: hidden !important; text-overflow: ellipsis !important; } .hero-h1 { font-size: 1.7rem !important; line-height: 1.1 !important; margin-bottom: 12px !important; } .hero-sub { font-size: .9rem !important; line-height: 1.55 !important; padding: 0 6px !important; } /* Quick-action chip rows: scrollable horizontally, never cropped */ .qa-chips { flex-wrap: wrap !important; justify-content: center !important; gap: 6px !important; padding: 0 6px !important; } .qa-chip { font-size: .72rem !important; padding: 6px 11px !important; } /* Main wraps */ .wrap, .wrap-narrow, .rail-900 { padding: 0 14px !important; } main { padding-bottom: 32px !important; } .section { padding: 18px 0 !important; } /* Ask Velora card */ .ask-card { margin: 0 6px 18px !important; border-radius: 14px !important; } .ask-hdr { padding: 13px 16px !important; } .ask-body { padding: 16px !important; } .ask-textarea { font-size: .9rem !important; min-height: 110px !important; } .ask-actions { gap: 8px !important; } .btn-primary { font-size: .82rem !important; padding: 10px 16px !important; } /* Quick-link card grids: 1 column on small screens */ .ql-grid { grid-template-columns: 1fr !important; gap: 10px !important; } .ql-card { padding: 12px 14px !important; } .ql-card-title { font-size: .92rem !important; } .ql-card-desc { font-size: .72rem !important; } /* Footer */ footer { padding: 18px !important; font-size: .58rem !important; } .contact-strip { padding: 18px 14px 8px !important; } /* Persistent left rail (academy/dashboard): collapse to drawer on mobile */ #academyRail, #dashSideMenu { transform: translateX(-100%); transition: transform .25s ease; } body.rail-open #academyRail, body.dash-menu-open #dashSideMenu { transform: translateX(0); } body.vs-academy .topbar, body.vs-academy main, body.vs-academy footer { margin-left: 0 !important; } /* When rail content has the .dash-side-link styles applied, push main */ nav, .hero, main, footer { margin-left: 0 !important; } #dashMenuBtn, #railMenuBtn { display: inline-flex !important; } /* Tables shouldn't break the page */ .table-wrap, table { max-width: 100% !important; overflow-x: auto !important; display: block !important; } /* Side-nav layouts on PMO / Legal / Sales / Career pages — already known to use sn-link */ .sn-layout, .sn-shell { grid-template-columns: 1fr !important; } .sn-side { display: none !important; } body.sn-side-open .sn-side { display: block !important; position: fixed; top: 0; left: 0; bottom: 0; z-index: 900; width: 80vw; max-width: 320px; background: #07090f; overflow-y: auto; border-right: 1px solid rgba(255,255,255,.13); padding: 16px 12px; } /* Generic: clip extreme button widths */ button, .btn, a.btn { max-width: 100%; } } /* Slightly larger phones (641-960): still trim down a bit */ @media (min-width: 641px) and (max-width: 960px) { .hero { padding: 48px 22px 30px !important; } .hero-h1 { font-size: 2.1rem !important; } }