/* core.css — shared responsive layer for The Union of the Rising Sons. * * Load order in , AFTER each page's inline * * * Bump the ?v= query whenever this file changes (same rule as core.js). * * Scope: this file is presentation only. It does NOT restyle the desktop * experience — every rule lives behind the mobile breakpoint below, except a * couple of harmless cross-viewport safety nets. It reuses the page tokens * (--cream, --line, --clay, --taupe, --bark) with fallbacks so a page that * somehow lacks one still renders. * * Breakpoint convention (the one place it's defined): MOBILE = max-width 760px. * Phones and small tablets in portrait. index.html/seek.html keep their own * 1000px column-stacking query; this layer sits below that and handles the * "phone shell": the nav, the modal/sheet, and screen-fit guards. * * v2 — top bar wraps to two rows on mobile (wordmark no longer collides with * the nav/actions). Phase 1 foundation: * · .overlay/.dialog centered modal -> bottom sheet on mobile (fixes the * off-screen "New message" window; matches inbox.html's existing .ovl/.sheet). * · single-row scrollable top nav so all destinations stay reachable. * · horizontal-overflow guard so no page needs side-panning. * · larger touch targets + safe-area insets for notched phones. */ /* ---- cross-viewport safety nets (cheap, non-visual) ---- */ /* Content media never forces a page wider than the screen. Scoped away from * Leaflet, whose tiles must keep their intrinsic size. */ :where(img, svg, video):not(.leaflet-container *) { max-width: 100%; } /* ============================ MOBILE ============================ */ @media (max-width: 760px) { /* No accidental sideways panning. overflow-x:clip (not hidden) so it never * turns into a scroll container — keeps position:sticky topbars working. */ html, body { overflow-x: clip; } /* ---- top bar: two rows on a phone ---- * One row can't hold the wordmark, six nav links, and the right-side actions * without them colliding. Let the bar wrap: logo + actions share the top row, * and the nav drops to its own full-width, swipeable row beneath. The order: * properties (not DOM order) decide which items pack onto the first line. */ .top, .topbar { flex-wrap: wrap; gap: 10px; padding: 10px 14px; } /* Row 1, left: logo can shrink, and the wordmark ellipsizes only if a screen * is truly narrow — so it never pushes into the actions. */ .logo { order: 1; flex: 1 1 auto; min-width: 0; } .logo b { font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Row 1, right: the actions stay pinned to the far end of the top row. */ .top .right, .topbar .right { order: 2; margin-left: auto; } /* Row 2: the full-width swipeable nav. flex-basis:100% forces the wrap. */ .top .nav, .topbar .nav { order: 3; flex: 1 1 100%; margin-left: 0; gap: 2px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox */ scroll-snap-type: x proximity; } .top .nav::-webkit-scrollbar, .topbar .nav::-webkit-scrollbar { display: none; } /* WebKit/Blink */ .top .nav a, .topbar .nav a { white-space: nowrap; padding: 8px 11px; scroll-snap-align: start; } /* ---- the headline fix: centered modal -> bottom sheet ---- * The .overlay/.dialog system (driven by core.js cardOverlay and used on * index/profile/seek/projects/calendar/coordinator) centered a dialog that * could be taller than the phone, pushing its top — and the close button — * above the viewport. Anchor it to the bottom and let it own the height. */ .overlay { place-items: end stretch; /* bottom-anchored, full width */ padding: 0; } .dialog { width: 100%; max-width: none; max-height: 92dvh; /* dvh so the keyboard can't bury it */ border-radius: 16px 16px 0 0; box-shadow: 0 -12px 44px -20px rgba(60, 40, 20, .55); animation: uors-sheet-up .22s ease; } @keyframes uors-sheet-up { from { transform: translateY(14px); opacity: .65; } to { transform: none; opacity: 1; } } /* Header stays pinned so the close button is always one tap away. */ .dhead2 { position: sticky; top: 0; z-index: 1; background: var(--cream, #fffdf8); border-radius: 16px 16px 0 0; } /* Generous tap target for close, on either modal system. */ .dhead2 .x, .sheet-head .x { min-width: 40px; min-height: 40px; } /* ---- chat inside the sheet: fill it, keep the composer above the keyboard ---- */ /* .dbody2.chat-body hard-codes height:62vh on desktop; on a phone let the * sheet bound the height and have the body flex to fill. */ .dbody2.chat-body { height: auto; max-height: none; flex: 1 1 auto; min-height: 0; } .chat-scroll { min-height: 0; } /* allow the scroll region to shrink */ .chat-compose { position: sticky; bottom: 0; background: var(--cream, #fffdf8); padding-bottom: calc(8px + env(safe-area-inset-bottom)); } /* Sheet footers / composers clear the home indicator on notched phones. */ .sheet-foot { padding-bottom: calc(11px + env(safe-area-inset-bottom)); } } /* Respect reduced-motion: no slide-up. */ @media (max-width: 760px) and (prefers-reduced-motion: reduce) { .dialog { animation: none; } }