/* ============================================================================ mobile.css — Mobile-only overrides for Imperator Capital ---------------------------------------------------------------------------- Every rule in this file lives inside `@media (max-width: 767px)` or `@media (max-width: 480px)`. Loaded LAST in so it wins the cascade. At >=768px this file is a no-op: desktop renders byte-identically. ============================================================================ */ @media (max-width: 767px) { /* ---------------------------------------------------------------------- * * 0. Global safety * ---------------------------------------------------------------------- */ body { overflow-x: hidden; } img { max-width: 100%; height: auto; } .container, .container-fluid { padding-left: 20px; padding-right: 20px; } /* ---------------------------------------------------------------------- * * 1. Header & navigation — mobile bar * Layout: [logo left] ........... [Join Imperator pill] [3-line burger] * Menu: full-screen dark overlay sliding in from the right * ---------------------------------------------------------------------- */ .header { position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; z-index: 1010 !important; /* above the menu overlay */ } .header__bottom { background-color: #ffffff !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important; padding: 10px 0 !important; } .header nav.navbar { display: flex !important; flex-wrap: nowrap !important; justify-content: flex-start !important; align-items: center !important; padding: 0 14px !important; gap: 6px !important; position: relative !important; min-height: 56px !important; } /* Logo anchored to the left */ .header .site-logo { position: static !important; transform: none !important; z-index: auto !important; margin: 0 !important; flex: 0 0 auto !important; display: block !important; } .header .site-logo img { max-width: 180px !important; max-height: 48px !important; width: auto !important; height: auto !important; display: block !important; } /* "Join Imperator" pill — repurposed `.account-menu.mobile-acc-menu` */ .header .account-menu.mobile-acc-menu { display: flex !important; list-style: none !important; margin: 0 0 0 auto !important; /* push to the right */ padding: 0 !important; flex: 0 0 auto !important; z-index: 1015 !important; /* stays above the menu overlay */ } .header .account-menu.mobile-acc-menu li { list-style: none !important; padding: 0 !important; margin: 0 !important; } .header .mobile-join-cta { display: inline-flex !important; align-items: center !important; justify-content: center !important; background: #15110b !important; color: #FDFBF6 !important; padding: 9px 16px !important; border-radius: 999px !important; font-size: 0.78rem !important; font-weight: 600 !important; line-height: 1 !important; letter-spacing: 0.005em !important; text-decoration: none !important; white-space: nowrap !important; font-family: "Geist", -apple-system, BlinkMacSystemFont, sans-serif !important; transition: background-color 0.2s ease, transform 0.2s ease !important; min-height: 36px !important; border: none !important; box-shadow: none !important; } .header .mobile-join-cta:hover, .header .mobile-join-cta:focus { background: #b8941f !important; color: #FDFBF6 !important; transform: translateY(-1px); } .header .mobile-join-cta:active { transform: translateY(0); } /* Hamburger button — to the right of the pill. Higher-specificity selector to beat the page-level