/* ============================================================================= Barlin Games — global responsive layer ----------------------------------------------------------------------------- ONE source of truth for how wide the site's content is allowed to get, loaded on every public page before the page's own stylesheet. THE PROBLEM THIS FIXES ---------------------- The site had three container systems, each with a hard pixel ceiling: .bh-wrap (homepage + header) 1450px .gd-wrap (games / companies) 1280px .ba-wrap (articles) 1180px Those ceilings are what made every page stop growing at Full HD: on a 2560 or 3840 display the whole site became a ~1400px column adrift in the middle of the screen. Nothing else was wrong — there is no coordinate-based layout, no 1920px wrapper and no resolution-sniffing JavaScript anywhere in the project. THE FIX ------- Each ceiling becomes a fluid scale expressed as: min(, max(, )) The vw coefficient is chosen so the expression returns EXACTLY the current width at 1920px, which is what keeps the Full HD design untouched: page 1450 / 1920 = 75.5vw wide 1280 / 1920 = 66.7vw read 1180 / 1920 = 61.5vw Below 1920 the max() returns the old pixel value, so every existing breakpoint behaves exactly as it did. Above 1920 the vw term takes over and the container grows with the viewport until it reaches its cap. There is no media query and therefore no jump — the transition is continuous as the window is dragged. Caps differ by CONTENT TYPE, because a directory of cards and a column of prose do not want the same width: --bg-wrap-wide card grids get the most room (more columns, not bigger cards) --bg-wrap-page general page sections --bg-wrap-read an article shell, kept close to a readable measure --bg-read-col running text, capped in ch so it never outruns the eye Components consume these through var() with the old value as the fallback, so a page that somehow loads without this file still renders at its previous width rather than collapsing. ============================================================================= */ :root { /* ── Container scale ─────────────────────────────────────────────────── */ --bg-wrap-page: min(2400px, max(1450px, 75.5vw)); /* Same ceiling as the page container, not a larger one. The header uses the page scale, and content must never grow wider than the header above it — at Full HD a directory (1280) already sits inside the header (1450), and sharing the cap keeps that true at 4K instead of inverting it. Below the cap the wide scale is still the roomier of the two. */ --bg-wrap-wide: min(2400px, max(1280px, 66.7vw)); --bg-wrap-read: min(1500px, max(1180px, 61.5vw)); /* Running text. `ch` follows the font, so the measure stays right whatever the size is set to, and 100% keeps it inside its parent on a phone. */ --bg-read-col: min(100%, 78ch); /* ── Gutters ─────────────────────────────────────────────────────────── */ /* Deliberately NOT fluid at desktop sizes: the container cap already creates the side margins on a large display, and making this scale with vw would change the Full HD design it is not supposed to touch. */ --bg-gutter: 24px; --bg-gutter-sm: 18px; /* ── Fluid type ramp ─────────────────────────────────────────────────── */ /* For headings that would otherwise need a media query per size. Each is a clamp between a comfortable phone size and a large-display size. */ --bg-t-hero: clamp(34px, 6.4vw, 88px); --bg-t-h1: clamp(28px, 3.4vw, 52px); --bg-t-h2: clamp(22px, 2.2vw, 36px); --bg-t-h3: clamp(18px, 1.5vw, 24px); --bg-t-body: clamp(15px, 1.05vw, 17px); } /* ============================================================================= Global safety rules ----------------------------------------------------------------------------- Three classes of bug that no amount of container work prevents on its own. ============================================================================= */ /* 1. Media never forces a container wider than the viewport, and never loses its aspect ratio doing so. `height: auto` is paired with max-width so a constrained image scales instead of squashing. */ img, svg, video, canvas, iframe, embed, object { max-width: 100%; } img, video { height: auto; } /* 2. Long unbroken strings — a URL in a comment, a slug, a German compound — wrap instead of pushing the page sideways. */ body { overflow-wrap: break-word; } /* 3. Zoom and rotation do not silently rescale text on mobile Safari, which is what makes a 200% zoom test meaningful. */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* ============================================================================= Reusable containers ----------------------------------------------------------------------------- For new markup. The existing .bh-wrap / .gd-wrap / .ba-wrap now read the same tokens, so these are equivalents rather than replacements — nothing has to be migrated for a page to be responsive. ============================================================================= */ .bg-wrap, .bg-wrap-wide, .bg-wrap-read { box-sizing: border-box; width: 100%; margin-inline: auto; padding-inline: var(--bg-gutter); } .bg-wrap { max-width: var(--bg-wrap-page); } .bg-wrap-wide { max-width: var(--bg-wrap-wide); } .bg-wrap-read { max-width: var(--bg-wrap-read); } /* A column of prose inside any of the above. */ .bg-read { max-width: var(--bg-read-col); } /* A card grid that answers to the space it is given rather than to a column count: more room means more cards per row, never wider cards. */ .bg-grid { display: grid; gap: clamp(12px, 1.4vw, 22px); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--bg-card, 240px)), 1fr)); } @media (max-width: 620px) { :root { --bg-gutter: var(--bg-gutter-sm); } } /* Reduced motion is a site-wide contract, not a per-component one. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }