/* ============================================================================= HisaBooks — Laptop viewport scaling layer ----------------------------------------------------------------------------- The public pages were composed on a 1920x1080 screen. Every layout in the system stops growing well before that: the shell caps at 1200px (1380px wide), and every fluid clamp reaches its maximum somewhere between 1250px and 1650px. So the "1920 look" is really the "~1600px look" with wider gutters, and a 1280x1024 or 1440x900 laptop was not seeing a smaller version of that design — it was seeing a *different* one, with the fluid values caught mid-scale and the shell pressed against the window edge. This layer removes that difference. Between 1200px and 1600px the whole page is scaled down with `zoom` so the browser lays it out as if the window were about 1600px wide and then paints the result at the window's real size. A 1280px laptop gets the same composition a 1920px screen gets, drawn at 80%. ----------------------------------------------------------------------------- How the bands work >= 1600px zoom 1 untouched, exactly as before 1280 - 1599px zoom .80-.975 effective width pinned to ~1600px 1200 - 1279px zoom .80 effective width 1500px - 1599px < 1200px zoom 1 the existing responsive breakpoints take over Below 1200px nothing here applies. That is deliberate: reflowing to the tablet and phone layouts is the right answer at those widths, shrinking is not, and 1199px is already where `css/hisabooks.css` drops the desktop layout. Nothing in the public stylesheets has a breakpoint between 1200px and 1599px, so no media query can fire against the real window width while the layout is being built at the larger effective width. The steps are 40px wide rather than continuous because `zoom` needs a plain number and CSS cannot divide one length by another to produce one. Inside a step the effective width drifts by at most ~50px, which only widens the gutters either side of the capped shell. ----------------------------------------------------------------------------- Why `zoom` and not a transform `zoom` participates in layout: applied to the root element it divides the initial containing block, so the document really is laid out at the larger width. `transform: scale()` does not — it would leave the document its original size, break `position: fixed` on the navigation, and produce phantom scrollbars. The whole band is wrapped in `@supports (zoom: 1)` so a browser without `zoom` is left on the current behaviour rather than getting the compensation below without the scaling it compensates for. ----------------------------------------------------------------------------- The compensation tokens `zoom` does not move the viewport, so `vw` and `vh` keep resolving against the real window and then get painted at the reduced scale. Left alone, `8vw` of section padding on a 1280px window would come out 20% short of the value the same section shows at 1920px, which is exactly the difference this layer exists to remove. The public stylesheets therefore spell viewport units as calc(8 * var(--hb-vw, 1vw)) and this file redefines `--hb-vw` / `--hb-vh` per band as `1vw / zoom`, so the fluid values resolve against the effective width instead of the real one. The `1vw` fallback keeps those declarations valid on pages that never load this file, such as the signed-in application. `--hb-zoom` carries the same factor to JavaScript. Scripts that measure an element and write the measurement back as a pixel value have to divide by it: `getBoundingClientRect()` reports painted pixels, but a length written into the scaled subtree gets multiplied by the zoom again. See `hbViewportZoom()` in `js/marketing_home.js` and `js/marketing_workspace.js`. Loaded by `includes/public_marketing_shell.php` for every page on the marketing shell, and linked directly by the public pages that do not use the shell. ============================================================================= */ :root { --hb-zoom: 1; --hb-vw: 1vw; --hb-vh: 1vh; } @supports (zoom: 1) { /* `screen` only: a printed page is nowhere near 1200px wide, but keeping the band off print media entirely means a future print stylesheet cannot be surprised by a scaled root. */ @media screen and (min-width: 1200px) and (max-width: 1319.98px) { :root { --hb-zoom: .8; --hb-vw: 1.25vw; --hb-vh: 1.25vh; } html { zoom: .8; } } @media screen and (min-width: 1320px) and (max-width: 1359.98px) { :root { --hb-zoom: .825; --hb-vw: 1.2121vw; --hb-vh: 1.2121vh; } html { zoom: .825; } } @media screen and (min-width: 1360px) and (max-width: 1399.98px) { :root { --hb-zoom: .85; --hb-vw: 1.1765vw; --hb-vh: 1.1765vh; } html { zoom: .85; } } @media screen and (min-width: 1400px) and (max-width: 1439.98px) { :root { --hb-zoom: .875; --hb-vw: 1.1429vw; --hb-vh: 1.1429vh; } html { zoom: .875; } } @media screen and (min-width: 1440px) and (max-width: 1479.98px) { :root { --hb-zoom: .9; --hb-vw: 1.1111vw; --hb-vh: 1.1111vh; } html { zoom: .9; } } @media screen and (min-width: 1480px) and (max-width: 1519.98px) { :root { --hb-zoom: .925; --hb-vw: 1.0811vw; --hb-vh: 1.0811vh; } html { zoom: .925; } } @media screen and (min-width: 1520px) and (max-width: 1559.98px) { :root { --hb-zoom: .95; --hb-vw: 1.0526vw; --hb-vh: 1.0526vh; } html { zoom: .95; } } @media screen and (min-width: 1560px) and (max-width: 1599.98px) { :root { --hb-zoom: .975; --hb-vw: 1.0256vw; --hb-vh: 1.0256vh; } html { zoom: .975; } } }