/* * tomeTheme.css * The colours of the "Tome" look (parchment pages, ink, red-ink links), * chosen by the owner in October 2026. Every page in the Tome style uses * these names instead of typing the colours out, so the checked colours * stay the same everywhere and can be changed in one place. * * It is in /css/ (public), because signed-out pages (sign-in, privacy * notice, guidelines) use it too, not only the members pages. * * CONTRAST (WCAG 2.2 AA needs 4.5:1 for text, 3:1 for borders and icons). * Measured against the parchment (#f6f0e1) / the light parchment (#fbf7ec): * ink #2b2117 body text 13.9:1 / 14.7:1 * brown #5e4c34 details, dates 7.2:1 / 7.7:1 * red ink #7a2e1d links, headings, focus 8.3:1 / 8.8:1 * leather #5b3a1e "pressed" buttons (light text on it: 9.5:1) * ornament #8a6a3a BORDERS AND ORNAMENTS ONLY 4.4:1 (too pale for small text) * rules #c9a86a, #d8c9a6, #b9a67d: decoration only (lines), never meaning */ :root { /* Paper */ /* The page background behind everything (owner's choice, 5 October 2026): a dark brown "leather" fade, lightest at the top. The colour is the fallback while the fade is drawn. Decoration only: no text sits directly on it (header, sheets and boxes have their own colours). */ --tome-desk-colour: #2e1f12; --tome-desk-fade: linear-gradient(to bottom, #4e3621 0%, #2e1f12 60%, #170f08 100%); --tome-parchment-colour: #f6f0e1; /* the page */ --tome-parchment-light-colour: #fbf7ec; /* quiet buttons, notes, pop-ups */ --tome-input-colour: #fffdf7; /* text boxes: the lightest, so they stand out */ --tome-highlight-colour: #efdcc4; /* chosen items (e.g. your vote) */ --tome-edge-colour: #cdbf9d; /* the page's outer edge */ --tome-shadow: 0 2px 10px rgba(60, 40, 10, 0.12); /* The parchment drawn round (and filling) sheets, pop-ups and the header: a picture, so the dark look swaps it for its own (tomeThemeDark.css). */ --tome-parchment-picture: url('/css/parchment-border.svg?v=af3bc5e04f5adfda'); /* The channel a scroll bar runs in, on the dark brown (owner, 19 Oct 2026): a faint parchment wash rather than a colour, because the brown behind it fades from light to near black; a wash lifts it by the same small step everywhere. */ --tome-scroll-track-on-leather: rgba(246, 240, 225, 0.1); /* The same channel as ONE solid colour (the wash over the middle of the fade), for Firefox: with a see-through channel it hid its scroll bar arrows until hovered (owner, 19 Oct 2026). */ --tome-scroll-track-on-leather-solid: #423427; /* Duality's own scroll bars on the dark brown (tomeScrollbars.css): an arrow's square when hovered (a stronger wash), and the grip and arrows when hovered (a lighter gold than the gold rule). */ --tome-scroll-hover-on-leather: rgba(246, 240, 225, 0.2); --tome-scroll-hover-gold-colour: #e0c58c; /* Laid over a game display while it is frozen between sessions ("Session ended"). */ --tome-frozen-veil-colour: rgba(23, 15, 8, 0.6); /* Fog of war over the battle map (members/js/play/board/boardFog.js; owner, 26 Oct 2026: soft-edged, near black, not brown). The GM sees what it hides in black and white instead. */ --tome-fog-colour: #060606; /* Vision and explored areas (members/js/play/vision/visionLayer.js; map building, phase 2, owner 2 Nov 2026): laid over the parts of the map a player's tokens have explored but can't see now, so the map shows there DIMMED (unexplored parts are --tome-fog-colour). The same in both looks. */ --tome-vision-explored-colour: rgba(6, 6, 6, 0.55); /* Scotopic Vision (members/js/play/vision/visionLayer.js; owner, 2 Nov 2026): the squares a player sees ONLY thanks to it are shown in black and white. This grey is laid over them with the canvas's "saturation" blend, which takes the colour out and keeps the lightness (only its lack of colour counts, as for the GM's fog). Tokens are drawn after it, in colour. The same in both looks. */ --tome-scotopic-grey-colour: #808080; /* Exalted and humbled d20s in the roll log (owner's choice A, 31 Oct 2026: gold and bronze; rollLog.css). A 20 is exalted, a 1 humbled; the log also says so in words. */ --tome-exalted-side-colour: #d9ad3c; /* the die's side faces */ --tome-exalted-face-colour: #f8e6a8; /* its front face, under the number */ --tome-exalted-line-colour: #7a5a12; /* its outline and facet lines */ --tome-exalted-ink-colour: #4a3508; /* its number, and the word "Exalted" */ --tome-humbled-side-colour: #a8693a; --tome-humbled-face-colour: #e6bf98; --tome-humbled-line-colour: #5e3417; --tome-humbled-ink-colour: #3d200c; /* Ink */ --tome-ink-colour: #2b2117; /* body text and headings */ --tome-brown-colour: #5e4c34; /* details and dates */ --tome-red-ink-colour: #7a2e1d; /* links, accents, keyboard focus */ --tome-leather-colour: #5b3a1e; /* "pressed" / main buttons */ --tome-unavailable-colour: #8a8070; /* greyed-out "coming soon" items (3.4:1; unavailable controls need no minimum) */ --tome-greyed-text-colour: #504c46; /* greyed-out words that are still content, e.g. defeated or hidden creatures in the turn order (8.0:1 on light parchment, 4.7:1 on the edge colour) */ /* Words on LEATHER (pressed / main buttons) and on the dark page background (the desk): light in BOTH looks, because leather and the desk stay dark in the dark look too (owner, 31 Oct 2026: light/dark setting). Never use the parchment colours for these: they turn dark in the dark look. */ --tome-on-leather-colour: #fbf7ec; /* 9.5:1 on leather */ --tome-on-leather-soft-colour: #f6f0e1; /* the slightly warmer one some labels on the desk use */ --tome-on-leather-muted-colour: #cdbf9d; /* quieter notes on the desk (e.g. "Players are on this map.") */ /* The GOLD fill of a pressed "Tokens" layer button, and its words: fixed too (the gold rule colour darkens in the dark look, for lines on dark paper). */ --tome-gold-fill-colour: #c9a86a; --tome-on-gold-colour: #2b2117; /* Fixed colours for words and outlines drawn ON THE BATTLE MAP (canvas): the map is a picture, so they don't change with the look. */ --tome-map-light-colour: #fbf7ec; --tome-map-dark-colour: #2b2117; --tome-map-red-ink-colour: #7a2e1d; /* Green ink on the map: a bar's number going UP floating from a token ("+3 Life", tokenBarFloats.js; owner, 2 Nov 2026), outlined in --tome-map-light-colour (about 7.7:1 against it). */ --tome-map-green-ink-colour: #1f5a24; /* Leather buttons' shades (every "pressed" / main button: tomeComponents.css and the pop-ups) */ --tome-leather-dark-colour: #4a2e16; /* their outline, and while pressed down */ --tome-leather-hover-colour: #6d4624; /* under the pointer */ /* The sign-in cover's quieter leather buttons (cover.css) */ --tome-leather-soft-colour: #4c3018; --tome-leather-soft-hover-colour: #5f3d20; --tome-leather-deep-colour: #3b220d; /* their outline, and while pressed down */ /* Outlines and decoration (see the contrast notes above) */ --tome-ornament-colour: #8a6a3a; /* button and text-box outlines, the ✦ flourish */ --tome-gold-rule-colour: #c9a86a; /* margin rules */ --tome-pale-rule-colour: #d8c9a6; /* lines between items */ --tome-dark-rule-colour: #b9a67d; /* double rules, link underlines (never text-box edges: too pale) */ /* The GM's own notes inside a player's backstory (owner's choice, 11 Oct 2026): "GM ink". 6.0:1 on the parchment, 6.7:1 on text boxes (AA needs 4.5:1). Always shown with a "GM only" label too, never colour alone (WCAG 1.4.1). */ --tome-gm-ink-colour: #1f5f8b; /* Each person's colour in a campaign is chosen by them (owner, 25 Oct 2026): the nine starting colours are in members/js/shared/personColours.js, which also picks white or near-black words for whatever colour is chosen. */ /* The in-game clock (members/css/gameClock.css): the part-of-day icons... */ --tome-sun-colour: #e9b04a; /* the sun, with brown (ornament) outlines */ --tome-setting-sun-colour: #d9784a; /* the deeper sun at dusk */ --tome-moon-colour: #dcd8f0; /* the moon, with night-ink outlines */ --tome-night-ink-colour: #3c3489; /* ...and the LIGHTING: gentle washes over the Session table and the scene shown in Scenery (none by day). Kept light, so text stays readable. */ --tome-light-dawn: rgba(255, 190, 120, 0.14); --tome-light-dusk: rgba(214, 104, 52, 0.2); --tome-light-night: rgba(16, 24, 72, 0.38); /* The colour a new LIGHT on a battle map starts with (map building, phase 3, owner 2 Nov 2026: each light has a colour the placer chooses): a warm torch. The same code is lightRules.js defaultLightColour, as the server gives it to lights from before then. Drawn on the map, so the same in the light and dark looks. */ --tome-light-torch-colour: #ffb347; /* The WHITE-HOT middle of a light's glowing ball and of Blinding glare (owner, 2 Nov 2026: light should feel "neon", not a flat colour; members/js/play/lighting/lightPictures.js, lightLayer.js). Drawn on the map, so the same in the light and dark looks. */ --tome-light-hot-core-colour: #fffdf4; /* MAGICAL DARKNESS on a battle map (owner, 2 Nov 2026; members/js/play/lighting/darknessDrawing.js): the GM's shading over the squares it darkens, the dark orb where it is (edged in --tome-map-light-colour so it shows on dark maps), and the soft dark haze round the orb. Drawn on the map, so the same in the light and dark looks. */ --tome-darkness-area-colour: rgba(8, 4, 20, 0.5); --tome-darkness-orb-colour: #120a24; --tome-darkness-haze-colour: rgba(8, 4, 20, 0.55); --tome-darkness-haze-clear-colour: rgba(8, 4, 20, 0); /* The WEATHER drawn over a battle map (map building, phase 6, owner 2 Nov 2026; members/js/play/weather/weatherDrawing.js, which makes them see-through). Drawn on the map, so the same in the light and dark looks. */ --tome-weather-rain-colour: #a9bfd2; /* rain streaks: a pale blue-grey */ --tome-weather-storm-colour: #7d93a8; /* a thunderstorm's heavier, darker rain */ --tome-weather-storm-shade-colour: #141a24; /* the storm cloud's slight darkening of the map */ --tome-weather-ice-colour: #f4f8fb; /* snowflakes and hailstones */ --tome-weather-ice-edge-colour: #3c4752; /* their faint edge, so they show on pale maps */ --tome-weather-fog-colour: #b9bcbe; /* fog's veil and its lighter, thicker patches */ --tome-weather-fog-dark-colour: #4e5255; /* fog's darker patches (owner, 2 Nov 2026: a mottled grey) */ --tome-weather-lightning-colour: #eef2ff; /* the soft brightening of a thunderstorm's rare lightning */ } /* THE PLAIN LOOK under the Tome styles (main.css: the base page, the "glass" panels and pop-ups, help tips, form messages; the My Account layout; the site owner's moderation marks) and the sign-in cover's banner. Moved here from the stylesheets on 29 Oct 2026, so that every colour on the site is in this one file. (The colour picker's hue strip and shade square, sceneryColourPicker.css, are colour maths, not theme colours, so they keep their own codes.) */ :root { /* main.css's base palette (behind the Tome pages) */ --background-colour: #16161d; --surface-colour: #20202b; --border-colour: #3a3a4a; --text-colour: #e8e6f0; --muted-text-colour: #a9a6b8; --accent-colour: #9b87f5; --accent-text-colour: #16161d; --error-colour: #ff9b9b; /* Text and lines on the light "glass" panels and plain pages */ --plain-ink-colour: #16161d; /* text */ --plain-black-colour: #000000; /* headings */ --plain-white-colour: #ffffff; /* text on dark or coloured fills (also when a person's colour hasn't loaded) */ --plain-muted-text-colour: #4a4a55; /* hints and details */ --plain-grey-border-colour: #767680; /* text boxes and quiet buttons */ --plain-link-colour: #1d5f8f; /* links, the (?) tips, ticks */ --plain-error-colour: #b3261e; /* problems, danger buttons, "suspended" */ --plain-success-colour: #1e6b2f; /* "acceptable", "active" */ --plain-dark-red-colour: #8b1a1a; /* the site owner's marks on removed content */ --plain-pale-grey-colour: #e4e4e7; /* removed content's background */ --plain-warm-grey-colour: #ebe8e2; /* Play: a joined campaign not yet started */ --plain-light-blue-colour: #8fd0ff; /* the light blue button */ --plain-light-blue-ink-colour: #0b2a3d; /* its words */ /* The sign-in cover's "In active development" banner (cover.css) */ --cover-banner-colour: #a8e6a3; --cover-banner-ink-colour: #10240f; /* very dark green: high contrast on the light green */ }