/* 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. Most rules live behind the mobile * breakpoint below (so desktop layout is untouched); the exceptions are a couple * of harmless cross-viewport safety nets and — as of v3 — the cross-viewport * BEVEL FINISH on the form layer (controls, buttons, dialog shells). 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. * * v4 — cross-page NAV TRANSITION: a cross-document View Transition (all app * pages opt in via this shared file) plus a short opacity boot fade as a * universal floor, replacing the white flash between top-nav tabs. Both are * reduced-motion-aware. Presentation only; no layout/color change. * v3 — cross-viewport BEVEL FINISH on the form layer: recessed inset on text * controls, raised bevel + press on filled action buttons, inset + unified * drop on dialog shells. Tokenized (--bevel-up/-in/-press, --dialog-drop) * near the top, applied just below the safety-nets. Presentation only; no * layout/color change. (First intentional cross-viewport visual rule set.) * 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%; } /* ======================== NAV TRANSITION — MOVED (v8) ======================== * The page transition now lives in urs-2035.css, not here. * * It was written on the assumption, stated in its own comment, that "every app * page loads this stylesheet". That was true of the app and false of the * product: About, Mission, How it works, Economics, Goals, Explore, Terms, * Privacy, Refund and Delete account load urs-2035.css ONLY. A cross-document * View Transition needs BOTH documents to opt in, so every step between the app * and those ten pages hard-cut while the app itself faded — the exact white * flash the rule existed to remove. * * urs-2035.css is loaded by all thirty real pages and by none of the four email * templates, which is precisely the right coverage, so the block lives there. */ /* ============================ BEVEL FINISH (v3) ============================ * Cross-viewport, intentional (unlike the mobile shell below). A light, warm * bevel woven through the FORM layer — the controls people type into, the * action buttons they press, and the dialog shells those forms live in — to * give edges texture and a clearer boundary without changing layout or color. * * Mechanism: layered box-shadow. Light reads from the top-left (warm cream * highlight), shadow falls to the bottom-right (warm bark). Tokens below so the * whole system tunes from one place. Tuned to be felt, not shouted. * * Cascade notes (why this lands without per-page edits): * · Form CONTROLS set no resting box-shadow on any page, so the recessed * inset applies at rest; each page's :focus ring (which replaces box-shadow) * still wins on focus — resting bevel, focus ring, no conflict. * · Filled BUTTONS: the selector list matches each class at its own * specificity, so equal-specificity rules (.btn.primary, .deploy, .cbtn …) * win on source order. The big soft CTA drop-shadow is intentionally * traded for the beveled look + a tight lift. * · .dialog drop-shadows were inconsistent across pages; this unifies them * and adds the inset. The mobile bottom-sheet keeps its own shadow + bevel * (see the dialog rule inside the breakpoint). */ /* DEEPENED (v12), alongside the elevation ramp in urs-2035.css. The note above * says "tuned to be felt, not shouted"; the ask was for it to be shouted a * little, so that a member filling in a long form can see where one field ends * and the next begins. Same mechanism, same three states, more of each — a * field is a deeper well, a button has a firmer edge, a dialog sits further off * the page. Nothing here changes layout or colour. */ :root{ /* raised: filled buttons + dialog shells */ --bevel-up: inset 1px 1px 0 rgba(255,253,248,.42), inset -1px -1px 1px rgba(47,38,32,.26), 0 2px 4px rgba(47,38,32,.22); /* recessed: text fields (a well you type into) */ --bevel-in: inset 5px 2px 4px rgba(47,38,32,.20), inset -1px -1px 1px rgba(255,253,248,.70); /* pressed: momentary on :active */ --bevel-press: inset 1px 1px 4px rgba(47,38,32,.36), inset -1px -1px 0 rgba(255,253,248,.16); /* one consistent modal drop-shadow, paired with the inset on dialogs */ --dialog-drop: 0 34px 80px -26px rgba(60,40,20,.64); } /* Form controls — recessed wells. Checkboxes/radios stay flat. */ input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]), select, textarea { box-shadow: var(--bevel-in); } /* Filled action buttons — raised, beveled edge. Listed at the specificities the * pages use so equal-specificity rules win by source order. */ .btn, .btn.primary, .btn.soft, .deploy, .ghost, .cbtn, .addbtn, .btnclay, .mini, .empty button, .dfoot .save, .dfoot .cancel, .dfoot2 .save, .dfoot2 .cancel { box-shadow: var(--bevel-up); } /* Tactile press on the principal submit buttons. */ .btn.primary:active, .btn.soft:active, .deploy:active, .ghost:active, .cbtn:active, .addbtn:active, .btnclay:active, .mini:active, .dfoot .save:active, .dfoot .cancel:active, .dfoot2 .save:active, .dfoot2 .cancel:active { box-shadow: var(--bevel-press); } /* Dialog shells — the frame a form sits in. Inset bevel + unified drop. */ .dialog { box-shadow: var(--bevel-up), var(--dialog-drop); } /* ================== A DIALOG NEVER RUNS OFF THE SCREEN (v11) ================== * Cross-viewport, and the mobile sheet below is the same idea for phones. * * REPORTED ON BOYCOTTS: open a campaign and the panel runs off the bottom with * no way to scroll it and no way to move it. Measured on the live page at a * 675px-tall viewport: the dialog was 720px tall, so its footer — Freeze, * Report, Claim, Contact organizer — sat 85px below the fold. * * WHAT WAS ACTUALLY HAPPENING, because "no scroll" was not quite true. Those * pages put `overflow-y:auto` on the OVERLAY and no height bound on the dialog, * so the scroll that exists moves the whole dialog — header and footer with it — * and it only had 125px of travel. Past that the scroll CHAINED to the page * behind: measured, scrollY went to 400 while the dialog sat still. That is * exactly what "unmovable, no scroll" feels like — you scroll, the panel inches * and stops, and the page starts sliding around underneath it. * * THE RULE IS THE ONE SEVEN PAGES ALREADY HAD, and the trouble was that they * each had their own copy. Thirteen pages define .dialog themselves: * * index, posts, profile, seek, showcase, showcase-edit max-height:90vh + flex column (right) * coordinator max-height:86vh + overflow:auto (bounded, but scrolls the header away) * requirements bounded only inside a media query * shop, calendar no bound * boycotts, boycott-page, projects no bound ← reported * * One rule in thirteen places, disagreeing — the same drift as the vendor list * (278) and the invoice folder rule (279). So it belongs here, once: core.css * loads after every page's inline