/** * iPad/touch performance — disables expensive GPU effects site-wide. * Loaded via global.css on every page. Desktop (fine pointer) is unchanged. */ @media (pointer: coarse) { /* Fractal noise grain + fixed gradients cook the GPU on phones. */ body::after { display: none !important; content: none !important; } body { background-attachment: scroll !important; } .main-header, .mobile-toggle, .glass-card, .tg-composer, .tg-sidebar, .nav-menu, .qe-bottom-bar, .print-tools-panel { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .main-header { background: rgba(8, 11, 17, 0.94) !important; } .mobile-toggle { background: rgba(16, 185, 129, 0.22) !important; } .scrolling-tattoos .tattoo-card { backdrop-filter: none; -webkit-backdrop-filter: none; } .scrolling-tattoos .tattoo-card:not(.active) { filter: none; opacity: 0.65; } .scrolling-tattoos .scroll-track::after { display: none; } .floating-side-panel { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(8, 10, 14, 0.97); } .side-panel-overlay { backdrop-filter: none; -webkit-backdrop-filter: none; } .hero-feature-video-frame.glass-card { backdrop-filter: none; -webkit-backdrop-filter: none; } /* Keep hamburger tappable above the menu overlay so close works without hammering. */ html.side-panel-open .main-header, body.side-panel-open .main-header { z-index: 30002 !important; } body.side-panel-open .mobile-toggle { position: relative; z-index: 30003; } /* Editor pages: drop GPU-heavy atmosphere filters on thumbnails and outputs. */ #qe-output-img, #qe-thumb-img, .sketch-recent-thumb, #center-preview-img, .tryon-center-img { filter: none !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important; } /* Tool strips and overlays: no backdrop blur on touch (major heat source). */ #mp-mobile-tool-strip, #qe-mobile-tool-strip, .qe-layer-popover, .sketch-preview-overlay, .qe-layer-fab { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } #mp-mobile-tool-strip, #qe-mobile-tool-strip { background: rgba(6, 23, 16, 0.94) !important; box-shadow: none !important; } /* Stop infinite CSS transitions fighting the compositor during touch. */ .sketch-recent-thumb, .sketch-recent-thumb:hover { transition: none !important; } /* Try-On: kill GPU-heavy layers that heat phones (blur, masks, infinite anim). */ body.try-on-page .tryon-layout { background: #020617 !important; } body.try-on-page .tryon-card, body.try-on-page .tryon-card-controls, body.try-on-page .tryon-modal-overlay, body.try-on-page .tryon-sheet-overlay, body.try-on-page .tryon-viewer-content, body.try-on-page .tryon-output-download-mobile { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } body.try-on-page .tryon-card::before { display: none !important; } body.try-on-page .tryon-card, body.try-on-page .tryon-panel-right, body.try-on-page .tryon-output-thumbnail { box-shadow: none !important; transition: none !important; } body.try-on-page .tryon-card:hover, body.try-on-page .tryon-card:active { transform: none !important; } body.try-on-page .tryon-output-thumbnail:hover, body.try-on-page .tryon-output-thumbnail.active { transform: none !important; box-shadow: none !important; } body.try-on-page #tryon-result-history .tryon-output-thumbnail { filter: none !important; } /* Menu overlay: backdrop-blur over Try-On images = 5fps + browser crash on phones. */ .side-panel-overlay, .side-panel-overlay.active { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(0, 0, 0, 0.82) !important; transition: none !important; } .floating-side-panel, .floating-side-panel.open { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(8, 10, 14, 0.98) !important; box-shadow: none !important; transition: none !important; } body.try-on-page.side-panel-open .tryon-layout, body.try-on-page.side-panel-open #tryon-result-history { display: none !important; } body.try-on-page .tryon-output-thumbnail { transition: none !important; box-shadow: none !important; } body.try-on-page .mobile-toggle, body.try-on-page .mobile-toggle span:not(.msg-unread-badge) { transition: none !important; } .scrolling-tattoos.carousel-static-touch .scroll-track, .scrolling-tattoos.carousel-static-touch .tattoo-card { transform: none !important; transition: none !important; } /* site-polish.css blur on editor pages — major phone heat source. */ .glass-card, .editor-shell, .sketch-panel, .qe-panel, .mb-panel { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } } /* iPad / tablet only: block double-tap whole-page zoom (canvas tools override locally). */ @media (pointer: coarse) and (min-width: 601px) and (max-width: 1024px) { html, body:not(.generator-page) { touch-action: manipulation !important; -ms-touch-action: manipulation !important; } body.generator-page .tg-stack-container { touch-action: pan-y !important; -webkit-overflow-scrolling: touch !important; } } /* Phones (incl. Android Chrome): block double-tap whole-page zoom on every page. CSS-only — never re-add capture-phase touch handlers on Android (crashes the browser menu, see RECURRING_BUGS 2026-06-19). `manipulation` keeps pinch-zoom and panning; it only removes double-tap and other non-standard gestures. Canvas tools keep their own `touch-action: none` on the drawing surface, so forcing the page root to `manipulation` does not affect drawing. */ @media (pointer: coarse) and (max-width: 600px) { html, body:not(.generator-page) { touch-action: manipulation !important; -ms-touch-action: manipulation !important; } body.generator-page .tg-stack-container { touch-action: pan-y !important; -webkit-overflow-scrolling: touch !important; } }