/* mobile.css — Atlas Mobile Design System Only active when mobile-shell.js adds .atlas-mobile to */ /* === Design Tokens === */ :root { --mobile-brand: #C41230; --mobile-brand-hover: #a0102a; --mobile-dark: #111827; --mobile-text-primary: #111827; --mobile-text-secondary: #374151; --mobile-text-muted: #6b7280; --mobile-text-light: #9ca3af; --mobile-text-faint: #b0b0b0; --mobile-border: #e5e7eb; --mobile-border-light: #f3f4f6; --mobile-bg-page: #f9fafb; --mobile-bg-card: #fff; --mobile-bg-muted: #fafafa; --mobile-green: #16a34a; --mobile-red: #ef4444; --mobile-amber: #f59e0b; --mobile-blue: #2D8CFF; --mobile-radius-card: 10px; --mobile-radius-compact: 8px; --mobile-radius-chip: 20px; --mobile-radius-badge: 4px; --mobile-header-height: 48px; --mobile-nav-height: 56px; --mobile-safe-bottom: env(safe-area-inset-bottom, 0px); --mobile-gutter: 16px; --mobile-font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* === Mobile-Only Styles (gated by body.atlas-mobile) === */ body.atlas-mobile { font-family: var(--mobile-font); -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; } /* Hide desktop header */ body.atlas-mobile .unified-header { display: none !important; } /* Mobile header bar */ body.atlas-mobile .mobile-header { display: flex; align-items: center; justify-content: center; min-height: var(--mobile-header-height); padding: 14px var(--mobile-gutter); background: var(--mobile-bg-card); border-bottom: 1px solid var(--mobile-border); position: sticky; top: 0; z-index: 100; } body.atlas-mobile .mobile-header-title { font-family: var(--mobile-font); font-size: 16px; font-weight: 700; color: var(--mobile-text-primary); } body.atlas-mobile .mobile-header-back { font-family: var(--mobile-font); font-size: 14px; font-weight: 600; color: var(--mobile-brand); cursor: pointer; position: absolute; left: var(--mobile-gutter); } body.atlas-mobile .mobile-header-action { position: absolute; right: var(--mobile-gutter); } /* Bottom navigation */ body.atlas-mobile .mobile-bottom-nav { display: flex; align-items: flex-end; justify-content: space-around; padding: 10px 24px calc(10px + var(--mobile-safe-bottom)); background: var(--mobile-bg-card); border-top: 1px solid var(--mobile-border); position: fixed; bottom: 0; left: 0; right: 0; z-index: 200; } body.atlas-mobile .mobile-nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 58px; height: 40px; cursor: pointer; } body.atlas-mobile .mobile-nav-item svg { width: 20px; height: 20px; stroke: var(--mobile-text-light); stroke-width: 2; fill: none; } body.atlas-mobile .mobile-nav-item.active svg { stroke: var(--mobile-text-primary); } body.atlas-mobile .mobile-nav-label { font-family: var(--mobile-font); font-size: 10px; color: var(--mobile-text-light); } body.atlas-mobile .mobile-nav-item.active .mobile-nav-label { color: var(--mobile-brand); font-weight: 600; } /* Page body padding for fixed nav */ body.atlas-mobile .chat-app, body.atlas-mobile .company-container, body.atlas-mobile .meetings-content-v3, body.atlas-mobile .screen-app { padding-bottom: calc(var(--mobile-nav-height) + var(--mobile-safe-bottom) + 16px) !important; } /* Card system */ body.atlas-mobile .mobile-card { background: var(--mobile-bg-card); border: 1px solid var(--mobile-border); border-radius: var(--mobile-radius-card); overflow: hidden; margin: 0 var(--mobile-gutter); } body.atlas-mobile .mobile-card + .mobile-card { margin-top: 8px; } /* Filter chips */ body.atlas-mobile .mobile-chip { font-family: var(--mobile-font); font-size: 10px; font-weight: 500; padding: 4px 10px; border-radius: var(--mobile-radius-chip); border: 1px solid var(--mobile-border); background: var(--mobile-bg-card); color: var(--mobile-text-secondary); cursor: pointer; } body.atlas-mobile .mobile-chip.active { background: var(--mobile-dark); color: #fff; border-color: var(--mobile-dark); } /* Section headers */ body.atlas-mobile .mobile-section-header { font-family: var(--mobile-font); font-size: 10px; font-weight: 600; color: var(--mobile-text-light); letter-spacing: 0.5px; text-transform: uppercase; padding: 0 2px; } /* Show more links */ body.atlas-mobile .mobile-show-more { font-family: var(--mobile-font); font-size: 12px; font-weight: 600; color: var(--mobile-brand); text-align: center; padding: 10px var(--mobile-gutter); cursor: pointer; } /* Page fade-in transition */ body.atlas-mobile .mobile-page-enter { animation: mobileFadeIn 150ms ease-out; } @keyframes mobileFadeIn { from { opacity: 0; } to { opacity: 1; } }