/* Stop horizontal scroll / white strip on the right (mobile) */ html { overflow-x: hidden; width: 100%; } body { overflow-x: hidden; width: 100%; max-width: 100%; } .min-h-screen { overflow-x: hidden; max-width: 100%; } /* Header: P icon + PEXO wordmark */ .site-header-logo { display: block; height: 2.25rem; width: auto; max-width: 2.75rem; min-width: 0; flex-shrink: 0; object-fit: contain; } .site-brand { margin-left: 0; padding-left: 0; min-width: 0; max-width: 100%; gap: 0.2rem; } .site-brand .site-header-logo { margin-right: -0.1rem; } .site-brand .site-logo { margin-left: -0.15rem; height: 2.75rem; max-width: 11rem; min-width: 0; } .site-header__bar > .flex { min-width: 0; width: 100%; } /* Desktop nav must not take space on mobile */ @media (max-width: 1023px) { #main-nav { display: none !important; width: 0 !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; flex: 0 0 0 !important; } } /* Mobile header: PEXO text logo readable, no horizontal white gap */ @media (max-width: 639px) { .site-header__wrap { padding-left: 0.5rem; padding-right: 0.5rem; } .site-brand { gap: 0.15rem; flex-shrink: 1; min-width: 0; max-width: calc(100% - 5.5rem); } .site-header-logo { height: 2.15rem !important; max-width: 2.5rem !important; } .site-brand .site-logo { height: 2.125rem !important; max-width: 7.5rem !important; display: block !important; } .site-header__bar > .flex > .flex.items-center.gap-2 { flex-shrink: 0; gap: 0.35rem; } .site-header__bar #theme-toggle, .site-header__bar #mobile-menu-btn { width: 2.25rem; height: 2.25rem; min-width: 2.25rem; padding: 0; } } @media (max-width: 380px) { .site-header-logo { height: 2rem !important; max-width: 2.35rem !important; } .site-brand .site-logo { height: 1.875rem !important; max-width: 6.5rem !important; } } .footer-brand .site-header-logo { height: 2rem; max-width: 2.35rem; } .footer-brand .site-logo { height: 2.5rem; max-width: 10rem; } .hero-bg .site-header-logo { height: 2.75rem; max-width: 3.25rem; } .hero-bg .site-logo { height: 3rem; max-width: 9rem; } /* Dark mode on */ html.dark, html.dark body, html.dark .min-h-screen { background-color: var(--background); color: var(--foreground); } /* Mobile menu overlay */ .mobile-menu { position: fixed; inset: 0; z-index: 45; } .mobile-menu.hidden { display: none !important; } .mobile-menu__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); } .mobile-menu__panel { position: absolute; top: 5.5rem; left: 1rem; right: 1rem; max-width: min(28rem, calc(100vw - 2rem)); margin: 0 auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.25rem; box-sizing: border-box; } .mobile-menu__panel a { padding: 0.75rem 1rem; border-radius: 0.75rem; font-weight: 600; font-size: 0.9375rem; } .mobile-menu__panel a:hover { background: rgba(37, 99, 235, 0.08); color: #2563eb; } .mobile-menu__cta { margin-top: 0.5rem; text-align: center; background: linear-gradient(90deg, #2563eb, #1e3a8a) !important; color: #fff !important; border-radius: 9999px !important; } html.dark .mobile-menu__panel a:hover { background: rgba(255, 255, 255, 0.08); color: #60a5fa; } #theme-toggle, #mobile-menu-btn { cursor: pointer; pointer-events: auto; flex-shrink: 0; } /* Hero blobs should not widen page */ .hero-bg { overflow-x: hidden; }