/* ============================================================================ pg-games.info — "The Atlas" ---------------------------------------------------------------------------- Third site, and it has to be unmistakably not the other two. site 1 pgslot-games.io near-black ground, amber, angular sans, portfolio grid of artwork, top navigation site 2 pgsoft-games.org warm stone ground, oxblood, Thai serif display, one wide editorial column, rounded cards, art dissolving into surfaces, scroll animation site 3 THIS ONE paper-white ground, cobalt, IBM Plex, a fixed left rail with the region index always visible, square 3px corners, ruled data tables, and no animation at all The reasoning behind the difference is not just novelty. This site publishes the same catalogue in sixteen languages, so its job is orientation: a reader arriving from Nepal or Laos needs to see immediately that their edition exists. That is why the region index is a permanent column rather than a dropdown, and why the whole design reads as a reference desk rather than a magazine. Every colour below was checked with tools/oklch.py before it was written here; the measured ratios are in the comments. ============================================================================ */ :root { /* ── Ground. Paper, very slightly cool, never pure white: pure white next to white cards leaves the cards with nothing to sit on. ─────────────────── */ /* Second revision. The first ground was near-white, and with white cards on it nothing read as raised -- the owner's word for the result was "plain", and the only thing separating one section from the next was a hairline rule they asked twice to have removed. So the ground went deeper and the sections became surfaces sitting on it. Nothing on this site is divided by a line any more; it is divided by where one surface ends and the next begins, which is how the reference site the owner pointed at does it. */ --paper: oklch(96.5% 0.006 255); /* the page ground */ --rail: oklch(94% 0.008 255); --sheet: oklch(100% 0 0); /* a section surface */ --sheet-tint: oklch(97.5% 0.008 255); /* the alternating band */ --sheet-alt: oklch(98.6% 0.004 255); /* zebra row inside a table */ /* ── Ink. Cool near-black to sit with cobalt; warm ink would fight it. ─── */ --ink: oklch(22% 0.020 260); /* 16.59:1 on paper */ --ink-2: oklch(40% 0.020 260); /* 8.82:1 on paper */ --ink-3: oklch(50% 0.015 260); /* 5.75:1 on paper — the floor, and it is still past AA for 12px text */ /* ── Cobalt: the only accent, and it earns its place by doing one job — showing the reader where they are and where they can go. ─────────────── */ --cobalt: oklch(52% 0.190 255); /* 5.33:1 on paper, white on it 5.56:1 */ --cobalt-deep: oklch(38% 0.160 258); /* 10.20:1 with white on it */ --cobalt-wash: oklch(94% 0.030 255); /* cobalt-deep on it: 8.57:1 */ --cobalt-edge: oklch(52% 0.190 255 / 0.28); /* ── Rules. A hairline for row separation, a darker one for structure. The hairline is deliberately below 3:1 — it is decoration, and the table's meaning is carried entirely by its text, which is 16.59:1. Anything that genuinely conveys structure uses --rule-firm. ────────────────────────── */ --rule: oklch(88% 0.008 255); --rule-firm: oklch(62% 0.014 255); /* 3.42:1 on paper */ --rule-cobalt: oklch(52% 0.190 255); /* ── Payout signal. A tested result and an advertised ceiling must never be mistaken for one another; this is the single most consequential piece of information on the site, so it gets colour AND a word AND a position. ── */ --tested: oklch(38% 0.110 155); /* measured: it really happened */ --tested-wash: oklch(95% 0.030 155); --advert: oklch(45% 0.020 260); /* a claim, so deliberately grey */ --advert-wash: oklch(95% 0.004 260); --caution: oklch(45% 0.130 55); /* disputed / not established */ --caution-wash: oklch(95% 0.030 60); /* ── Type. IBM Plex, which was drawn as an information family and looks nothing like site 1's angular sans or site 2's Thai serif. --face-local is set per page to the Noto Sans cut for that edition's script, so a Khmer page loads Khmer and nothing else. ───────────────────────────────────── */ --face-ui: "IBM Plex Sans", system-ui, -apple-system, sans-serif; --face-local: var(--face-ui); --face-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; --face-body: var(--face-local), var(--face-ui), system-ui, sans-serif; /* Major third (1.25). Site 1 uses a fourth and site 2 a fifth, so the three sites do not even share a vertical rhythm. */ --t-2xs: 0.6875rem; --t-xs: 0.75rem; --t-sm: 0.8125rem; --t-base: 0.9375rem; --t-md: 1.0625rem; --t-lg: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem); --t-xl: clamp(1.5rem, 1.25rem + 1.2vw, 1.95rem); --t-display: clamp(1.85rem, 1.4rem + 2.2vw, 2.9rem); --t-fig: clamp(1.15rem, 1.0rem + 0.6vw, 1.4rem); /* Sixteen scripts share this stylesheet. Thai, Khmer, Lao, Burmese, Bengali, Sinhala and Devanagari all stack marks above and below the baseline, so the leading is set for the tallest of them and simply looks generous in Latin. Never use negative letter-spacing anywhere: in several of these scripts it collides marks with their base characters. */ --lh-body: 1.8; --lh-tight: 1.4; --lh-display: 1.25; --track: 0; --s-3xs: 0.25rem; --s-2xs: 0.4rem; --s-xs: 0.65rem; --s-sm: 1rem; --s-md: 1.5rem; --s-lg: 2.25rem; --s-xl: 3.5rem; --s-2xl: 5rem; /* The reference site runs 100-160px of padding above a section. Sections here are cards rather than full-bleed bands, so they need less, but the old 3.5rem was the main reason the page felt cramped and unfinished. */ --pad-card: clamp(1.5rem, 1rem + 2vw, 2.75rem); --gap-card: clamp(1rem, 0.6rem + 1.4vw, 1.75rem); /* ── Shell. A permanent left rail, a reading column, and a margin for notes. Ninety rems total, which is wider than either other site. ────────────── */ --shell: 90rem; --rail-w: 15.5rem; --note-w: 13.5rem; --measure: 58rem; --pad: clamp(1rem, 3vw, 2rem); /* Square-ish. Site 2 is 16px round; this is 3px, which is close enough to square to read as a form or a table and far enough from it to not look unfinished. */ /* Nudged up from 3/5px. The reference site uses 4 and 6, and at 3px a card the size of a whole section reads as a mistake rather than a choice. Still far tighter than site 2's 16px, so the three sites stay distinct. */ --corner: 4px; --corner-lg: 8px; /* Almost no depth. A reference sheet lies flat on the desk. */ /* Elevation carries the separation that rules used to. Cool-tinted, never grey: a neutral shadow on a blue-tinted ground reads as dirt. */ --lift: 0 1px 2px oklch(40% 0.02 260 / 0.05), 0 1px 1px oklch(40% 0.02 260 / 0.04); --lift-2: 0 1px 2px oklch(40% 0.03 260 / 0.06), 0 6px 16px oklch(40% 0.03 260 / 0.08); --lift-3: 0 2px 4px oklch(38% 0.04 260 / 0.08), 0 14px 36px oklch(38% 0.04 260 / 0.12); --hairline: inset 0 0 0 1px oklch(88% 0.008 255 / 0.9); --focus: 0 0 0 2px var(--paper), 0 0 0 4px var(--cobalt); /* ── Bands and gutters ─────────────────────────────────────────────────── The reference site runs 100-160px above a section. These are full-bleed bands now, so they can carry that. */ --band-y: clamp(2.75rem, 1.5rem + 5vw, 7rem); --gut: clamp(1.15rem, 0.6rem + 2.4vw, 2.75rem); --gap-card: clamp(0.75rem, 0.5rem + 1vw, 1.25rem); --pad-card: clamp(1.25rem, 0.9rem + 1.4vw, 2rem); /* The one warm note on the site, and it exists for a single job: the outbound button. On a page that is entirely cobalt and ink, a cobalt button disappears into its own background. Lime reads as "go" without borrowing site 1's amber. Ink on it measures 12.4:1. */ --lime: oklch(84% 0.17 143); --lime-deep: oklch(72% 0.16 145); --lift-3: 0 3px 8px oklch(38% 0.04 260 / 0.10), 0 18px 44px oklch(38% 0.05 260 / 0.18); --hairline: inset 0 0 0 1px oklch(88% 0.008 255 / 0.85); }