/* Shared building blocks: fonts, reset, text styles, pixel boxes and tags. */ /* ---------- Fonts (all local, so the app works offline) ---------- */ @font-face { font-family: 'Monster Friend Fore'; src: url('../public/fonts/MonsterFriendFore.otf') format('opentype'); font-weight: 400; font-display: block; } @font-face { font-family: 'Pixelify Sans'; src: url('../public/fonts/pixelify-sans-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Pixelify Sans'; src: url('../public/fonts/pixelify-sans-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; } @font-face { font-family: 'Nunito'; src: url('../public/fonts/nunito-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Nunito'; src: url('../public/fonts/nunito-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; } @font-face { font-family: 'Nunito'; src: url('../public/fonts/nunito-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; } @font-face { font-family: 'Nunito'; src: url('../public/fonts/nunito-latin-800-normal.woff2') format('woff2'); font-weight: 800; font-display: swap; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-weight: 600; } h1, h2, p { margin: 0; } button { -webkit-appearance: none; appearance: none; /* iPad / iPhone Safari: no built-in button look or sizing */ font: inherit; color: inherit; text-align: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } button.px { display: flex; } /* say it outright: Safari must treat these buttons as flex boxes */ button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; } :focus-visible { outline: var(--u) solid var(--purple); outline-offset: var(--u); } /* Sprites: SVG pixel art. Always shown at whole-number sizes (sprite pixels x unit). */ .sprite { display: block; flex-shrink: 0; image-rendering: pixelated; } /* ---------- Text styles ---------- */ /* Monster Friend Fore: screen titles. Caps only, one line. */ .t-title { font-family: var(--font-title); font-weight: 400; font-size: calc(var(--u) * 8); /* 24 / 32 / 40px: always a whole number of units */ line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; font-variant-ligatures: none; white-space: nowrap; } /* Small grey line under a title */ .t-sub { font-weight: 700; font-size: calc(13px * var(--s)); line-height: calc(var(--u) * 6); color: var(--muted); } /* Small caps labels: ENERGY, MAIN QUEST, ... */ .t-label { font-weight: 800; font-size: calc(12px * var(--s)); line-height: calc(var(--u) * 6); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } /* Pixelify Sans: numbers and chips, 16px and up */ .t-ui { font-family: var(--font-ui); font-weight: 700; font-size: calc(16px * var(--s)); line-height: calc(var(--u) * 6); font-variant-ligatures: none; } /* ---------- Pixel box ---------- Three layers, like the prototype: .px casts the hard ink shadow (1 unit down-right) .px__frame the outline, with corners stepped 2 units .px__fill the inside colour, corners stepped 1 unit, light top-left / shade bottom-right Colours come from --frame / --fill / --hi / --shade, set by the modifier classes below. */ .px { --frame: var(--ink); --fill: var(--white); --hi: var(--white); --shade: var(--white-shade); --u1: var(--u); --u2: calc(var(--u) * 2); display: flex; flex-direction: column; filter: drop-shadow(var(--u) var(--u) 0 var(--ink)); } .px__frame { width: 100%; /* explicit width: Safari (iPad, iPhone) shrinks pixel boxes inside