/** * layout.css — Responsive shell widths and component layout rules. * * Owns: .layout-desktop / .layout-mobile class overrides set by * js/layout-preference.js. Controls app shell max-width, pipeline board * column stacking, tab bar sizing, and landing page scroll layout. * * Load order: theme.css → layout.css → tendera-ui.css → typography.css * * NOTE: js/layout-preference.js adds .layout-desktop to when the * viewport is ≥ 768 px wide (unless the user has overridden it). */ /* ===== LAYOUT SWITCHER (REMOVED - AUTO-RESPONSIVE ONLY) ===== */ .layout-switcher { display: none !important; } /* ===== APP PAGES (dashboard, pipeline, shortlist, profile, etc.) ===== */ /* Desktop: wider shell, browser-friendly */ .layout-desktop .app-shell { max-width: 1100px !important; margin-left: auto; margin-right: auto; box-shadow: none; min-height: 100vh; } .layout-desktop .top-bar { padding-left: 1.5rem; padding-right: 1.5rem; } .layout-desktop .page-inner { max-width: none !important; } .layout-desktop .swipe-page { padding-left: 1.5rem !important; padding-right: 1.5rem !important; max-width: 900px; margin: 0 auto; } /* Pipeline: vertical stack of columns (desktop and mobile) */ .layout-desktop .pipeline-board { display: flex !important; flex-direction: column !important; grid-template-columns: none !important; overflow-x: visible !important; gap: 1rem; padding-bottom: 1rem; } .layout-desktop .pipeline-column { flex: none !important; width: 100% !important; max-width: 100% !important; min-height: 120px; } .layout-desktop .pipeline-column-list { min-height: 3rem; } /* Dashboard: wider tenders list */ .layout-desktop .tenders { max-width: 680px; } .layout-desktop .tender { padding: 1.1rem 1.35rem; } /* Tab bar: rounded edges (mobile: top corners; desktop: all corners) */ .tab-bar { border-radius: 16px 16px 0 0; } .layout-desktop .tab-bar { flex-shrink: 0; min-height: 60px; max-width: 1100px; margin-left: auto; margin-right: auto; padding: 0.6rem 1.5rem calc(0.6rem + env(safe-area-inset-bottom)); display: flex; justify-content: center; align-items: center; gap: 0.25rem; border-radius: 16px; } .layout-desktop .tab-bar .tab-item { flex: 0 0 auto; min-width: 4.5rem; max-width: 120px; font-size: 0.75rem; padding: 0.35rem 0.5rem; border-radius: 8px; } .layout-desktop .tab-bar .tab-item:hover { background: var(--tab-item-hover, rgba(0, 43, 54, 0.06)); } .layout-desktop .tab-bar .tab-icon { font-size: 1.15rem; margin-bottom: 0.15rem; } /* ===== MOBILE: force narrow when user chose mobile on desktop ===== */ .layout-mobile .app-shell { max-width: 480px !important; } .layout-mobile .pipeline-board { display: flex !important; flex-direction: column !important; grid-template-columns: none !important; overflow-x: visible !important; } /* How-to page: wider content on desktop */ .layout-desktop .app { max-width: 720px; margin-left: auto; margin-right: auto; padding-inline: 2rem; } /* Auth: centered card, wider on desktop */ .layout-desktop .auth-card, .layout-desktop [class*="auth"] > div { max-width: 420px; margin-left: auto; margin-right: auto; } /* Index (landing): when user forces mobile on desktop */ .layout-mobile .container { max-width: 480px !important; margin-left: auto !important; margin-right: auto !important; } /* ===== INDEX (landing): vertical scroll for BOTH desktop and mobile ===== */ .layout-desktop .swipe-viewport, .layout-mobile .swipe-viewport { overflow-y: auto; overflow-x: hidden; } .layout-desktop .swipe-container, .layout-mobile .swipe-container { display: flex; flex-direction: column; overflow-x: visible; overflow-y: visible; scroll-snap-type: none; } .layout-desktop .swipe-page, .layout-mobile .swipe-page { flex: none; min-height: auto; scroll-snap-align: none; } .layout-desktop .swipe-dots, .layout-mobile .swipe-dots { display: none; } /* How it works: vertical stack of all 6 cards (both layouts) */ .layout-desktop .how-carousel-wrapper, .layout-mobile .how-carousel-wrapper { display: flex; flex-direction: column; margin-top: 1rem; } .layout-desktop .how-carousel, .layout-mobile .how-carousel { display: flex; flex-direction: column; overflow-x: visible; overflow-y: visible; scroll-snap-type: none; gap: 1rem; } .layout-desktop .how-slide, .layout-mobile .how-slide { flex: none; width: 100%; max-width: 100%; margin: 0; scroll-snap-align: none; } .layout-desktop .how-dots, .layout-mobile .how-dots { display: none; } /* Why Tendera & Features: vertical stack (same layout as How it works) */ .layout-desktop .why-grid, .layout-mobile .why-grid { display: flex; flex-direction: column; gap: 1rem; } .layout-desktop .features-grid, .layout-mobile .features-grid { display: flex; flex-direction: column; gap: 1rem; }