FedMCP - Federal Parliamentary Information

/** * Mobile Navigation Styles * Bottom nav, header, and drawer components */ /* ============================================================================ Mobile Bottom Navigation ============================================================================ */ .mobile-bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-around; align-items: center; background: var(--bg-elevated, #1a1a1a); border-top: 1px solid var(--border-subtle, #333); padding: 0.5rem 0; z-index: 100; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); /* iOS safe area */ padding-bottom: max(0.5rem, env(safe-area-inset-bottom)); } .mobile-bottom-nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; flex: 1; min-height: 56px; background: none; border: none; cursor: pointer; transition: all 0.2s ease; -webkit-tap-highlight-color: transparent; color: var(--text-tertiary, #666); } .mobile-bottom-nav-item:active { transform: scale(0.95); } .mobile-bottom-nav-item.active { color: var(--accent-red, #dc2626); } .mobile-bottom-nav-icon { transition: transform 0.2s ease; } .mobile-bottom-nav-item.active .mobile-bottom-nav-icon { transform: scale(1.1); } .mobile-bottom-nav-label { font-size: 11px; font-weight: 500; letter-spacing: 0.02em; } /* ============================================================================ Mobile Header ============================================================================ */ .mobile-header { position: sticky; top: 0; left: 0; right: 0; background: var(--bg-elevated, #1a1a1a); border-bottom: 1px solid var(--border-subtle, #333); z-index: 90; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* iOS safe area */ padding-top: env(safe-area-inset-top); } .mobile-header-main { display: flex; align-items: center; justify-content: space-between; padding: 1rem; gap: 1rem; } .mobile-header-menu-button, .mobile-header-search-button { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; background: none; border: none; border-radius: 50%; color: var(--text-secondary, #999); cursor: pointer; transition: all 0.2s ease; -webkit-tap-highlight-color: transparent; } .mobile-header-menu-button:active, .mobile-header-search-button:active { transform: scale(0.9); background: var(--bg-overlay, #222); } .mobile-header-title { flex: 1; font-size: 18px; font-weight: 700; color: var(--text-primary, #fff); text-align: center; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mobile-header-search { padding: 0 1rem 1rem; animation: slideDown 0.3s ease; } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* ============================================================================ Swipeable Drawer ============================================================================ */ .swipeable-drawer-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 200; animation: fadeIn 0.3s ease; } .swipeable-drawer { position: fixed; left: 0; right: 0; bottom: 0; background: var(--bg-elevated, #1a1a1a); border-top-left-radius: 20px; border-top-right-radius: 20px; z-index: 201; animation: slideUp 0.3s ease; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3); display: flex; flex-direction: column; /* iOS safe area */ padding-bottom: env(safe-area-inset-bottom); } .swipeable-drawer-half { max-height: 50vh; } .swipeable-drawer-full { height: 100vh; border-radius: 0; } .swipeable-drawer-auto { max-height: 90vh; } @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } } .swipeable-drawer-handle { display: flex; justify-content: center; padding: 0.75rem; cursor: grab; -webkit-tap-highlight-color: transparent; } .swipeable-drawer-handle:active { cursor: grabbing; } .swipeable-drawer-handle-bar { width: 40px; height: 4px; background: var(--border-subtle, #333); border-radius: 2px; } .swipeable-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1rem 0.5rem; border-bottom: 1px solid var(--border-subtle, #333); } .swipeable-drawer-title { font-size: 18px; font-weight: 700; color: var(--text-primary, #fff); margin: 0; } .swipeable-drawer-close { min-width: 40px; min-height: 40px; display: flex; align-items: center; justify-content: center; background: none; border: none; border-radius: 50%; color: var(--text-secondary, #999); cursor: pointer; transition: all 0.2s ease; -webkit-tap-highlight-color: transparent; } .swipeable-drawer-close:active { transform: scale(0.9); background: var(--bg-overlay, #222); } .swipeable-drawer-content { flex: 1; overflow-y: auto; padding: 1rem; -webkit-overflow-scrolling: touch; } /* ============================================================================ Responsive Design ============================================================================ */ /* Hide bottom nav on desktop */ @media (min-width: 1024px) { .mobile-bottom-nav { display: none; } } /* Adjust header for tablet */ @media (min-width: 768px) { .mobile-header-main { padding: 1.25rem 1.5rem; } .mobile-header-title { font-size: 20px; } }