/* =========================================================================== MET Gnome: the shared feel of every page (update 2026.10.27.1) =========================================================================== WHAT THIS FILE IS A small layer of rules that every player page loads before its own styles: practice.php, start.php, the realm (world/index.php), the Listening Room, Profile, My Music, Action Cards, the login page, Labs and Lite. It changes how the pages FEEL to touch, not how they look. Each page's own stylesheet still decides colours, sizes and layout, and wins over anything here (every visual rule below is wrapped in :where(), which has no weight in the cascade). WHY IT EXISTS Richard: "Make the whole thing work more professionally. The UI isn't smooth." Most of the roughness on an iPhone came from the browser's own defaults, page by page: - tapping a button twice quickly zoomed the page (double-tap zoom); - holding a finger on a gnome or a card popped up "Save Image"; - every tap flashed a grey box; - buttons gave no sign they had been pressed (Safari only shows :active styles when the page listens for touches, see mg-ui.js); - focusing a small text box zoomed the whole page in and left it there; - moving between pages blinked to white. One shared file fixes all of that once, instead of in twelve places. INTEGRATES WITH ui/mg-ui.js the touch listener that turns :active on in Safari, and the small helpers pages may call (MGui.haptic). Every page that links this file also links mg-ui.js. ======================================================================== */ /* 0. THE STORYBOOK LOOK (update 2026.11.09.3, ui/mg-fantasy.css): the typeface, the brass-framed plates, the buttons. This file is about how pages feel; that one is about how they look. Delete this one line to go back to the old look. */ @import url('/ui/mg-fantasy.css?v=20261110a'); /* 1. PAGES FADE INTO EACH OTHER Cross-document view transitions: when one MET Gnome page opens another (Home → Practice Room → The Realm), the browser cross-fades the two instead of blanking the screen. Both pages must carry this rule, which is why it lives in the shared file. Browsers that do not know it (older Safari, Firefox) ignore it and navigate exactly as before. 180 ms is long enough to read as smooth and short enough never to feel slow. */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } } /* 2. NO ACCIDENTAL ZOOM WHEN TAPPING FAST touch-action: manipulation keeps scrolling and two-finger pinch zoom, but turns off double-tap-to-zoom on the things people tap: on a musician tapping Great, Great, Needs work in quick succession, Safari otherwise reads two taps as "zoom in". It also removes the old 300 ms wait some browsers add while they decide whether a second tap is coming. */ :where(a, button, input, select, textarea, label, summary, [role="button"], [onclick], [data-piece-action]) { touch-action: manipulation; } /* 3. NO GREY FLASH, NO "SAVE IMAGE" POPUP, NO STRAY TEXT SELECTION - The tap highlight is the grey box Safari and Chrome draw on every tap. Pages show their own pressed state instead (see 4). - Holding a finger on an image, a canvas or a button opens the "Save Image / Copy" sheet on iOS. Gnomes, cards and the map are pictures people touch a lot, so the sheet is off for them. - Button labels never get selected by a long press. Text in paragraphs, inputs and the music itself is left alone. */ :where(a, button, label, summary, [role="button"]) { -webkit-tap-highlight-color: transparent; } :where(img, canvas, svg, button, [role="button"]) { -webkit-touch-callout: none; } :where(button, [role="button"], summary) { -webkit-user-select: none; user-select: none; } /* 4. A PRESS YOU CAN SEE A slight darkening while a finger is down, for every button that does not already style its own :active state (pages that do keep theirs: :where() has no weight, so their rules win). Brightness is used rather than a transform because many buttons are already positioned with transforms. */ :where(button:not(:disabled):active, [role="button"]:active, a.btn:active, .sessionBtn:active) { filter: brightness(.9); } /* 5. TEXT BOXES THAT DO NOT ZOOM THE PAGE (iPhone and iPad only) iOS zooms the whole page in when a text box with type smaller than 16px gets focus, and does not zoom back out. The @supports test is true only on iOS/iPadOS Safari, so other browsers keep each page's chosen size. */ @supports (-webkit-touch-callout: none) { :where(input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="tel"], input[type="url"], input:not([type]), select, textarea) { font-size: max(16px, 1em); } } /* 6. THE TEXT SIZE STAYS WHERE THE PAGE SET IT iOS enlarges text on its own when a phone turns sideways; the pages are already laid out for both orientations. */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* 7. A SHARED "BACK HOME" LINK for pages that had no way home (Profile, the Listening Room, Action Cards). Used as ← Home; each page places it. */ .mgHome { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: 11px; border: 1px solid #5b4632; background: #2f251c; color: #f4c542; font: 700 14px/1 'Nunito', system-ui, sans-serif; text-decoration: none; white-space: nowrap; } .mgHome:hover { background: #3a2e23; } /* In a page header whose links are pushed right (margin-left:auto), Home stays at the left edge, before the page name. */ header > .mgHome { margin-left: 0 !important; margin-right: 0; }