/* assets/css/lp-app-zoom.css * ───────────────────────────────────────────────────────────────────── * Laptop density tier for the root marketing/landing pages (the app has its * own copy of this idea in app/assets/css/app-zoom.css — same mechanism, * different factor, because these pages were authored on a ~1920px designer * canvas while the app's chrome targets ~1900px of dashboard). * * SYMPTOM IT FIXES: on a laptop panel with Windows display scaling (a * 1920x1080 screen at 150% reports a ~1280 CSS-px viewport) the landing * pages' 1240px containers run edge to edge with no side padding and every * clamp() sits at its desktop maximum, so the page reads oversized. The * workaround was Ctrl+minus to 67%; this file does that automatically. * * THE FILENAME IS LOAD-BEARING. The companion script, * app/assets/js/app-zoom-viewport-units.js, rescales every media condition * in the document by the zoom factor, and skips any stylesheet whose href * contains "app-zoom.css" so the tier conditions below are never rescaled * out from under themselves (isOwnSheet in that file). Rename this file * without keeping that substring and the page oscillates. * * A page adopting this tier loads this sheet plus that script LAST in * , and any of its own JS that reads getBoundingClientRect()/ * innerWidth/innerHeight and writes the result back as a pixel style must * divide those reads by window.apexZoomFactor() — rects and the window are * SCREEN px under zoom while offsetWidth/clientWidth stay LOCAL px. See the * script's header for the full contract. * * Two steps rather than one so the 1441px cliff is small: at ~1280 the * effective canvas is 1280/.67 ≈ 1910 and at 1440 it is 1440/.75 = 1920 — * both land on the designer canvas. Above 1441 is a desktop monitor and is * left completely untouched; below 1025 the pages' own tablet/phone media * tiers take over and must not be shrunk on top. * ───────────────────────────────────────────────────────────────────── */ /* Always defined so JS can read it unconditionally; 1 means the tier is off. MUST track the `zoom` values below exactly — the companion script and any patched positioner read the factor from here, not from the zoom property. */ :root { --app-zoom: 1; } @media (min-width: 1025px) and (max-width: 1360px) { :root { --app-zoom: 0.67; } body { zoom: 0.67; } } @media (min-width: 1361px) and (max-width: 1441px) { :root { --app-zoom: 0.75; } body { zoom: 0.75; } }