/* --------------------------------------------------------------------------- Cabinet desktop scaling — loaded from header2.tpl only, so marketing pages (header.tpl, with its own html.main zoom hack in pages.css) are untouched. The cabinet is drawn on a 1920px canvas: html and .dep-wrapper__body expose 1rem/1em = one design pixel, and below 1920 that base shrinks together with the viewport (font-size: .0520833333vw in style.min.css / style-new.min.css). So everything written in em/rem scales down, while every block written in plain px — modals, cards, gaps, radii, borders — keeps its full size. On a 1366-1900 laptop the px parts end up ~20-30% oversized against the shrunken grid, which is what makes the whole cabinet read as cramped. Fix: stop shrinking the base, and shrink the finished layout instead. font-size: 1px puts em/rem back to 1:1 design pixels, and zoom scales the result down by exactly the factor the base used to carry. Net effect: em/rem blocks keep the physical size they have today, px blocks finally shrink along with them, and the layout always gets the full 1920px canvas it was designed against. Same picture as zooming the browser out by hand. Media queries keep matching the real viewport, so every breakpoint that already exists still fires exactly when it did before. Mobile (<= 1024px) has separate markup and is deliberately left alone. Everything here is !important on purpose. Several cabinet pages pull css/pages.css a second time from inside (tpl/en/oper.tpl, tpl/en/balance/withdraw.tpl, tpl/en/balance/oper.tpl), which re-runs style-new.min.css after this file and would otherwise restore the shrinking base while the zoom below stays on — scaling those pages twice. --------------------------------------------------------------------------- */ /* 1367-1919 — the base was fluid (viewport / 1920) here, so the zoom factor is that same ratio and the canvas stays a full 1920px wide at every width. */ @media (min-width: 1367px) and (max-width: 1919px) { html, .dep-wrapper__body { font-size: 1px !important; } :root { --size: 1px !important; --fontSize: 1px !important; } body.dep-wrapper__body { zoom: calc(100vw / 1920px) !important; } } /* 1025-1366 — style-new.min.css pins the base at .71px instead of letting it shrink further, so the zoom factor is pinned to match. The canvas narrows below 1920 here (1366 -> 1924, 1280 -> 1803, 1100 -> 1549), which is what the existing <= 1366 / <= 1200 / <= 1150 breakpoints are already there for. */ @media (min-width: 1025px) and (max-width: 1366px) { html, .dep-wrapper__body { font-size: 1px !important; } :root { --size: 1px !important; --fontSize: 1px !important; } body.dep-wrapper__body { zoom: .71 !important; } } /* vw/vh inside the zoomed cabinet still resolve against the real viewport and are then scaled down with everything else, so full-bleed decoration would stop short of the edges. Re-tie it to the canvas: 100% for the width (body is the canvas) and the viewport height converted back into design pixels. */ @media (min-width: 1367px) and (max-width: 1919px) { .dep-wrapper__body::before { width: 100% !important; height: calc(100vh * 1920px / 100vw) !important; background-size: 100% !important; } } @media (min-width: 1025px) and (max-width: 1366px) { .dep-wrapper__body::before { width: 100% !important; height: calc(100vh / .71) !important; background-size: 100% !important; } } /* The handful of cabinet blocks measured in vw have the same problem: they were meant as "a share of the canvas", so they get restated here in design pixels (1vw of the 1920 canvas = 19.2rem, and in this band 1rem is one design pixel). Kept here rather than edited in place because the source values are also used by the mobile markup below 1025px, where plain vw is still the right thing. */ @media (min-width: 1025px) and (max-width: 1919px) { .ref__divider-white, .ref-new__divider-white, .ref__table-content { max-width: 1132.8rem !important; /* 59vw */ } .ref__how-it-works { max-width: 1190.4rem !important; /* 62vw */ } .ref__reward-stats { max-width: 403.2rem !important; /* 21vw */ } .ref__withdraw-btn { padding: 8.64rem 17.28rem !important; /* .45vw .9vw */ max-width: 99.84rem !important; /* 5.2vw */ } .tabs-container { width: 1017.6rem !important; /* 53vw */ } .my-dep__buy_val p { margin: 0 2rem 0 8rem !important; /* 0 .104vw 0 .416vw */ } .my-dep__buy .btn__blue { margin: 24rem 0 0 !important; /* 1.249vw */ padding: 14rem !important; /* .729vw */ } .dep-new__top, .withdrawal__top { grid-template-columns: 1fr 499.2rem 1fr !important; /* 26vw */ } } /* same idea, but this one has to stay a percentage: it is the cabinet grid itself, and 100vw would now measure the screen rather than the canvas. The rule it replaces is already !important, hence the extra body class. */ @media (min-width: 1025px) and (max-width: 1340px) { body.dep-wrapper__body .deposit-page { grid-template-columns: 250em calc(100% - 310em) !important; } }