/* ============================================ KINDRED GUILD — GLOBAL FIXES Responsive + mobile safe areas + spacing. Include AFTER globals.css on every page. ============================================ */ /* ── 1. Z-INDEX HIERARCHY ─────────────────── */ #site-nav, .glass-nav { z-index: 100; } #pwa-install-banner { z-index: 500; } .modal-overlay { z-index: 2000; } #toast-container { z-index: 3000; } /* ── 2. BODY ──────────────────────────────── */ body { overflow-x: hidden; /* Safe area for notched phones (iPhone X+, etc.) */ padding-top: env(safe-area-inset-top, 0); padding-left: env(safe-area-inset-left, 0); padding-right: env(safe-area-inset-right, 0); /* Extra bottom padding for Android nav bar + safe area */ padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 80px); } /* ── 3. CONTAINER ─────────────────────────── */ .container { width: 100%; max-width: var(--max-width, 1100px); margin: 0 auto; padding: 0 24px; /* Space below sticky nav */ padding-top: 8px; } /* ── 4. STICKY NAV BOTTOM SPACING ─────────── */ /* Ensure content isn't hidden behind the fixed nav */ #site-nav { position: sticky; top: 0; } /* ── 4b. MOBILE MENU OVERLAY ──────────────── */ /* The hamburger menu used to render inline inside #site-nav (which is position: sticky), so it grew the nav to ~1100px tall on mobile and its bottom was clipped below the fold. Users had to scroll the BODY (which wasn't locked) to reach the Sign Out button. Now: render #mobile-menu as a true full-viewport fixed overlay below the navbar, with its own internal scroll. Body scroll is locked via the .mobile-menu-open class on (added by site-nav.js). */ @media (max-width: 767px) { #mobile-menu { position: fixed; top: 96px; /* below the 56px navbar + 40px quick-action strip */ left: 0; right: 0; bottom: 0; max-height: calc(100vh - 96px); overflow-y: auto; overscroll-behavior: contain; /* prevents scroll chaining to body */ -webkit-overflow-scrolling: touch; z-index: 90; /* below #site-nav (100) so navbar stays above */ background: rgba(2, 6, 23, 0.98); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); /* Subtle top edge so the menu visually separates from the navbar */ border-top: 1px solid var(--border, #262636); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); } /* When the menu is open, lock the body so the page behind can't scroll. iOS Safari ignores overflow:hidden on body alone, so we also set position: fixed and remember the scroll offset in JS (site-nav.js restores it on close). */ body.mobile-menu-open { overflow: hidden; /* position: fixed is applied inline by JS so we can preserve scrollY */ } } /* ── 5. GLOBAL TEXT WRAP ──────────────────── */ p, span, li, td, a, h1, h2, h3, h4, h5, h6 { overflow-wrap: anywhere; word-break: normal; } /* Flex and grid containers must keep a real text column; only the text itself should wrap. This prevents one-character columns on phones. */ main, section, article, header, footer, .container, .card, .post-form, .page-header, .header-bar, .hall-layout, .chat-area, .chat-messages { min-width: 0; } /* ── 6. INPUTS ────────────────────────────── */ input, textarea, select { max-width: 100%; box-sizing: border-box; /* Prevent zoom on iOS */ font-size: 16px; } /* ── 7. IMAGES ────────────────────────────── */ img { max-width: 100%; height: auto; } /* ── 8. PAGE HEADERS ──────────────────────── */ .page-header, .header-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border); } .page-header .actions, .header-bar > div { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } /* ── 9. CARDS ─────────────────────────────── */ .card, .quest-card, .wish-card, .worker-card, .profile-card, .quest-header, .post-form { padding: 20px; margin-bottom: 16px; } /* ── 10. CHAT LAYOUTS ─────────────────────── */ .dm-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 0; height: calc(100vh - 140px); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); } .hall-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 0; height: calc(100vh - 120px); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); } .dm-msg-bubble, .msg-content, .guild-message { overflow-wrap: anywhere; word-break: normal; } /* ── 11. MODAL ────────────────────────────── */ .modal-box, .custom-modal { max-height: 85vh; max-width: calc(100vw - 32px); overflow-y: auto; margin: 16px; padding: 24px; } /* ── 12. TABLES ───────────────────────────── */ table { width: 100%; overflow-x: auto; display: block; } @media (min-width: 768px) { table { display: table; } } /* ── 13. SCROLLBAR ────────────────────────── */ .view-selector, .section-tabs, .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .view-selector::-webkit-scrollbar, .section-tabs::-webkit-scrollbar, .tabs::-webkit-scrollbar { display: none; } .view-tab, .tab-btn, .tab { flex-shrink: 0; white-space: nowrap; } /* ── 14. QUEST CARD GRID ──────────────────── */ .quest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; } .quest-card { overflow: hidden; overflow-wrap: anywhere; word-break: normal; } /* ── 15. VIEW SELECTOR ───────────────────── */ .view-selector { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; margin-bottom: 12px; } .view-selector::-webkit-scrollbar { display: none; } /* ── 16. FILTER BAR ──────────────────────── */ .filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .filters select { max-width: 100%; min-width: 0; flex: 1; min-width: 120px; } /* ── 15. FAIRY WISHES LAYOUT ──────────────── */ .layout-split { display: grid; grid-template-columns: 1fr 300px; gap: 20px; } /* ── 16. FLOATING BUTTONS ─────────────────── */ /* Keep floating elements above Android nav bar */ .floating-btn, .fab, [style*="position: fixed"][style*="bottom"] { bottom: calc(env(safe-area-inset-bottom, 0px) + 20px) !important; } /* ── 17. TOAST NOTIFICATIONS ──────────────── */ #toast-container { bottom: calc(env(safe-area-inset-bottom, 0px) + 100px) !important; } /* ── 18. TABLET ───────────────────────────── */ @media (max-width: 1024px) and (min-width: 768px) { .container { padding: 0 20px; } /* Hide brand text on tablet, keep logo */ #site-nav .nav-brand span { display: none; } } /* ── 19. MOBILE ───────────────────────────── */ @media (max-width: 768px) { body { /* Extra bottom space for Android gesture nav */ padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 100px); } .container { padding: 0 16px; padding-top: 8px; } /* Chat layouts: stack on mobile */ .dm-layout, .hall-layout { grid-template-columns: 1fr; height: auto; min-height: 60vh; } .dm-sidebar, .channel-sidebar { display: none; } .dm-sidebar.mobile-open, .channel-sidebar.mobile-open { display: flex; position: fixed; inset: 0; z-index: 200; background: var(--surface); /* Safe area padding inside sidebar */ padding-top: env(safe-area-inset-top, 0); } /* Page headers: stack on mobile */ .page-header, .header-bar { flex-direction: column; align-items: flex-start; gap: 12px; } .page-header .actions .btn, .header-bar .btn { padding: 8px 12px; font-size: 0.78rem; } /* Wishes layout: stack */ .layout-split { grid-template-columns: 1fr; } .side-card { position: static; } /* Modals: full width on mobile */ .modal-footer, .custom-modal-actions { flex-direction: column; gap: 8px; } .modal-footer button, .custom-modal-actions button { width: 100%; } .modal-box, .custom-modal { margin: 12px; padding: 20px 16px; max-height: 80vh; } /* Cards: less padding on mobile */ .card, .quest-card, .wish-card, .worker-card, .profile-card, .quest-header, .post-form { padding: 16px; } /* Footer links: wrap */ .footer-links { flex-wrap: wrap; gap: 12px; } } /* ── 20. SMALL PHONES ─────────────────────── */ @media (max-width: 480px) { body { font-size: 14px; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 120px); } .container { padding: 0 12px; } .btn { padding: 10px 16px; font-size: 0.85rem; } .hero h1 { font-size: 1.6rem; } .cta-group { flex-direction: column; gap: 10px; } .cta-group .btn { width: 100%; } /* Quest grid: single column on small phones */ .quest-grid { grid-template-columns: 1fr; } /* Stats grid: 2 columns */ #liveStats > div { grid-template-columns: repeat(2, 1fr) !important; } } /* ── 21. LANDSCAPE MODE ───────────────────── */ @media (max-height: 500px) and (orientation: landscape) { body { padding-bottom: 40px; } .hero { padding: 40px 20px; } } /* ── 22. SCROLLBAR ────────────────────────── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--surface-3); }