/* bryce.today — shared theme definitions. THE single source of truth for the three visitor settings and the webfonts. Loaded by the homepage, /game/ and /forum/ alike, BEFORE each app's own stylesheet, so a setting can never mean one thing on one app and something else on another. Anything that varies per visitor belongs in this file. Settings live in localStorage and are applied to before first paint (see /game/prepaint.js, which the forum reuses; the homepage, /404 and /sys carry inline twins): cover ∈ oxblood | forest | midnight | jet | plum | saddle | slate | teal → html.cover- desk ∈ walnut | oak | mahogany | ebony → html.desk- page ∈ vellum | linen | bone | foxed → html.page- The mode/accent/override/deskdark settings exist too, but their token blocks live at the end of /styles.css, NOT here: the forum loads this file and has no dark styling of its own yet. The four mastery inks live here too. They are NOT a visitor setting — they are fixed — but they have to be readable on every page above, so they are defined next to the thing that constrains them. */ /* ---- type ---------------------------------------------------------------- */ /* Self-hosted: Android ships none of the serifs a system stack would ask for, so without these the whole identity degrades to a generic serif there. */ @font-face { font-family: 'Cinzel'; src: url('/fonts/cinzel.woff2') format('woff2'); font-weight: 400 600; font-display: swap; } @font-face { font-family: 'EB Garamond'; src: url('/fonts/garamond.woff2') format('woff2'); font-weight: 400 600; font-display: swap; } @font-face { font-family: 'EB Garamond'; src: url('/fonts/garamond-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } /* ---- the cover ----------------------------------------------------------- */ /* Each is a leather colour plus the darker tone its edges take. */ :root, html.cover-oxblood { --leather: #5c2124; --leather-dark: #3a1315; } html.cover-forest { --leather: #22392c; --leather-dark: #14231a; } html.cover-midnight { --leather: #1e2a44; --leather-dark: #121a2b; } html.cover-jet { --leather: #241f1c; --leather-dark: #14110f; } html.cover-plum { --leather: #3a2440; --leather-dark: #251531; } html.cover-saddle { --leather: #6b4a2a; --leather-dark: #46301a; } html.cover-slate { --leather: #3a4046; --leather-dark: #24282d; } html.cover-teal { --leather: #1f3d3b; --leather-dark: #122624; } /* ---- the desk ------------------------------------------------------------ */ /* Tiling SVGs; --desk-base is the measured mean of each tile, so a slow or failed load never flashes a colour the texture doesn't actually have. */ :root, html.desk-walnut { --desk-base: #493628; --desk: url("/desk-walnut.jpg?v=2"); } html.desk-oak { --desk-base: #5c4326; --desk: url("/desk-oak.jpg?v=2"); } html.desk-mahogany { --desk-base: #4d2c23; --desk: url("/desk-mahogany.jpg?v=2"); } html.desk-ebony { --desk-base: #2a2725; --desk: url("/desk-ebony.jpg?v=2"); } /* ---- the page ------------------------------------------------------------ */ /* Four ages of paper, palest to most foxed. Each is three tones: the sheet, the tone it takes where it's shaded, and the deepest edge. --parchment-rgb is the same colour as a bare triplet, because Bootstrap (in the forum) and every rgba() wash need components rather than a hex. Constraints every one of these has to keep, since --parchment is used BOTH as a background and as text on leather: ink on page >= 7:1 (body copy, AAA) page on leather >= 4.5:1 (the mark, tab labels, quotes) every mastery ink >= 4.5:1 (see below — foxed is the binding case) Darkening a page further will start breaking the inks before it breaks the body copy. Re-run the palette check before adding a fifth. */ :root, html.page-vellum { --parchment: #f2e8d2; --parchment-shade: #e4d6b6; --parchment-deep: #d6c49c; --parchment-rgb: 242, 232, 210; } html.page-linen { --parchment: #f6f1e4; --parchment-shade: #e9e1cc; --parchment-deep: #dbd0b4; --parchment-rgb: 246, 241, 228; } html.page-bone { --parchment: #e9e0cd; --parchment-shade: #dbcfb4; --parchment-deep: #cbbc9c; --parchment-rgb: 233, 224, 205; } html.page-foxed { --parchment: #e6d9ba; --parchment-shade: #d7c6a0; --parchment-deep: #c5b186; --parchment-rgb: 230, 217, 186; } /* ---- the four inks ------------------------------------------------------- */ /* One pigment per axis of the Schools of Mastery. Colour belongs to the AXIS, never to the school: Force is this red in Wizardry and the same red in The World. That is what makes sixteen attributes four things to learn. Dried pigments rather than screen primaries — vermilion, woad, raw sienna, verdigris — so they read as something written on the page. All four sit above every leather in luminance and below the contrast ceiling the palest page allows, which is a narrow band; they are deliberately deeper than they look in isolation. Named for the axis, never the colour, so a future repigmenting is not a rename. Do not add --red/--green: --gold already exists as the metallic rule-and-border accent and is a DIFFERENT thing from --axis-endurance. MANDATORY REDUNDANT ENCODING. Under deuteranopia, Force and Endurance are very nearly the same colour (measured separation ~2/255 — indistinguishable, not merely close), and Force/Precision are weak. This is not fixable by repigmenting: any red and any ochre both readable on parchment collapse together. So colour may never be the ONLY carrier of which axis something is. Every axis-coloured element also takes its --mark. Ship the mark. */ :root { --axis-force: #9a3630; /* vermilion — 5.1:1 on the most foxed page */ --axis-understanding: #35557d; /* woad — 5.5:1 */ --axis-endurance: #78582a; /* raw sienna — 4.7:1 */ --axis-precision: #3a6449; /* verdigris — 4.8:1 */ --axis-force-rgb: 154, 54, 48; --axis-understanding-rgb: 53, 85, 125; --axis-endurance-rgb: 120, 88, 42; --axis-precision-rgb: 58, 100, 73; /* The non-colour half of the encoding. Distinct in silhouette, so they survive greyscale, colour blindness and a 12px favicon alike. */ --axis-force-mark: '\25CF'; /* ● circle */ --axis-understanding-mark: '\25C6'; /* ◆ diamond */ --axis-endurance-mark: '\25A0'; /* ■ square */ --axis-precision-mark: '\25B2'; /* ▲ triangle */ /* Washes and rules composite onto whichever page is active, so they stay correct across all four parchments without a 4×4 table. */ --axis-force-wash: rgba(var(--axis-force-rgb), 0.10); --axis-understanding-wash: rgba(var(--axis-understanding-rgb), 0.10); --axis-endurance-wash: rgba(var(--axis-endurance-rgb), 0.10); --axis-precision-wash: rgba(var(--axis-precision-rgb), 0.10); --axis-force-rule: rgba(var(--axis-force-rgb), 0.38); --axis-understanding-rule: rgba(var(--axis-understanding-rgb), 0.38); --axis-endurance-rule: rgba(var(--axis-endurance-rgb), 0.38); --axis-precision-rule: rgba(var(--axis-precision-rgb), 0.38); } /* ---- system states ------------------------------------------------------- */ /* Error, warning and success KEEP red, amber and green — they are not ceded to the axes. They are separated by shade instead: every state is a markedly deeper, graver version of the ink that shares its hue, which is also why they read as "the system speaking" rather than as gameplay. The separation is measured, not assumed. Against its same-hue ink each state is 16–19 L* darker (CIEDE2000 12.7–14.9) — the earlier pairing was ~3, i.e. the same colour twice. They also stay clear of body ink (dE00 >= 13), or an error would just look like slightly-off body copy. If any of these six values is ever retuned, re-check BOTH gaps: an ink and its state converge from either direction. This is the single definition. styles.css and the forum's grimoire.css both point here; they used to carry their own copies, which had already drifted (the forum's warning existed as two different browns). */ :root { --state-error: #571610; /* deep blood red — 9.8:1 on the most foxed page */ --state-warning: #4a3007; /* deep bronze — 8.7:1 */ --state-success: #173620; /* deep viridian — 9.5:1 */ --state-info: #1b3049; /* deep slate blue — 9.6:1 */ --state-error-rgb: 87, 22, 16; --state-warning-rgb: 74, 48, 7; --state-success-rgb: 23, 54, 32; --state-info-rgb: 27, 48, 73; }