/* ─── Sleeping Gods theme ────────────────────────────────────────────────────── Red Raven Games gave permission 2026-09-21, artwork included - the first theme licensed with art since Wingspan. Everything here is scoped to [data-theme="sleepinggods"]; base styles stay in site.css. LOAD ORDER IS PART OF THE CONTRACT. _Layout links site.css, then every theme file, then themes/_shared.css. Theme rules carry an extra attribute selector, so they outrank base styles wherever they land - but do not reorder the links without re-reading _shared.css, which wins by POSITION rather than weight. THE ID HAS NO HYPHEN ON PURPOSE. The pre-paint script reads a ?theme= link with an ([a-z]+) capture, so "sleeping-gods" would resolve to "sleeping" and drop the visitor back to the default theme with nothing logged. THREE ZONES, TOP TO BOTTOM, the way Wingspan takes the player mat: a stormy sky over the nav, green mountains across the page, deep teal underwater in the footer (owner 2026-09-21). The palette below is those three zones as colour and the art section at the foot of this file puts the pictures over them - /images/sleepinggods-nav.webp (2400x226, tiles), -page.webp (1600x682, cover + fixed) and -footer.webp (2400x432, cover), each under a measured veil. THE PALETTE ALONE IS STILL A WHOLE THEME: a phone drops the page art, and anyone who blocks images gets the bands as flat colour with the same inks. MEASURED (parchment cut), worst of --bg/--bg2/--bg3/--surface/--amber-bg: text 10.25, mid 5.82, accent ink 5.09 - all AA; --text-dim 4.20 against --bg3 and 4.6 on the page, the same trade every theme here makes (faint text lives on the page and on cards, and darkening it to clear the deepest well collapses the gap to --text-mid that makes it read as a tier). --cyan is INK in fifteen site.css rules, so it is a deep sea-glass here rather than the bright one the dark cuts used. The gold fill stays gold; --amber-text carries a measured darker shade for words, the way light.css does it. THREE CUTS IN ONE DAY, all in git: forest green (54d10239, "dark and dank"), sea blue (49ea3336, "too dark and gloomy"), then this. The lesson the second one taught still holds: lightening a palette moves the WHOLE ladder, and a draft that lifts the page but keeps the old inks fails on the chip well. */ [data-theme="sleepinggods"] { /* ── PAGE (main colour 1): the map. ── THIRD CUT, SAME DAY: PARCHMENT (owner: "This is a medium theme. Right now it's looking too dark and gloomy. Can you lighten the middle section a bit so we can see the greens and some light blues? And for the middle of the page, i'm wondering if a cream parchment background would be suitable"). So the page is now the game's MAP: cream parchment under the content, storm and water still dark above and below, and the valley showing in the gutters under a light veil instead of a dark one. Mechanically this makes it a LIGHT theme (dark ink, light controls) in the Medium bucket - the Brass shape, and the shape Wingspan takes with its meadow. The blue cut this replaces is in git (49ea3336) if the parchment is not the answer. */ --bg: #f1e9d6; --bg2: #f8f2e5; --bg3: #e8ddc4; --surface: #fbf7ee; --border: #cdbf9f; --border2: #b5a37c; --text: #1e2f38; --text-mid: #3e5560; --text-dim: #4f636c; /* ── ACCENT: lamplight, now on paper. The fill stays a true gold; the INK is a measured darker shade of the same hue, because gold on cream is 2.6:1 and every accent-coloured word on the site goes through --amber-text. ── */ --amber: #d4922e; --amber-text: #7f5010; --amber-dim: #a8732a; --amber-bg: #f2e2c2; /* ── SECONDARY: sea glass, deep enough to read as text on cream (fifteen rules in site.css use it as ink). ── */ --cyan: #0d6874; --cyan-dim: rgba(13, 104, 116, 0.22); /* ── NAV chrome (main colour 2): the storm overhead. ── THE INK IS LIGHTER THAN THE PALETTE ALONE WOULD NEED, because the art goes over this band and the storm has pale cloud in it. Measured against the veiled art (see .site-nav below), brightest 5% of the band: fg 4.84, dim 3.57, accent 3.60. Wingspan's shipped band reads 4.60 at the same percentile with its cream ink, so this clears the bar the site already keeps. The first draft used #c2d0da and measured 1.90 - readable over the dark two thirds and not over the clouds, which is the kind of thing that only shows up in a screenshot somebody else takes. */ --nav-bg: #1c2b38; --nav-border: #101d27; --nav-fg: #dfe9f0; --nav-fg-dim: #b8cbd8; --nav-fg-strong: #f4f9fc; --nav-accent: #f2c266; --nav-accent-dim: rgba(242, 194, 102, 0.5); --nav-accent-bg: rgba(255, 255, 255, 0.08); --nav-btn-border: rgba(223, 233, 240, 0.35); /* ── FOOTER chrome: under the waterline, deeper and colder than the sky. ── Same story as the nav: the shaft of surface light through the middle of the art is the brightest thing in the theme, and bare it left footer links at 1.51. Veiled (below) this ink reads 4.61. ── */ --footer-bg: #0e2a35; --footer-border: #06202a; --footer-fg: #cfe2ea; --footer-accent: #93e2ea; /* THE WATER, under a veil. --footer-texture is the site-wide hook (site.css paints the footer with it), so the whole treatment fits in the variable block. The gradient deepens downward on top of the flat veil: the art's light comes from the surface at the top, so the band gets darker as it goes down, the way water does. */ --footer-texture: linear-gradient(to bottom, rgba(6, 28, 32, 0.45) 0%, rgba(6, 28, 32, 0.52) 60%, rgba(6, 28, 32, 0.62) 100%), url("/images/sleepinggods-footer.webp"); --footer-texture-repeat: no-repeat, no-repeat; --footer-texture-position: center, center; --footer-texture-size: auto, cover; /* THE HEX TOKEN as the list bullet (owner 2026-09-21, at a photo of a tray of them: "I want to use these teal hexagons ... make them look slightly 3D. They are chunky tokens"), the way Wingspan's lists take an egg and Calico's a button. Pointy-top like the ones in the tray. Three layers make the chunk: a darker hexagon sat 2.5 units lower is the token's SIDE, the bright face goes over it, then a pale stroke along the two top edges catches the light and a deeper one along the two bottom edges turns the face into a bevel. At 12x13 the offset side reads as thickness; drawn any thinner it reads as a shadow instead, which is a flat token on a table, not a chunky one. The face is the tray's own sky-teal, not --cyan, so the bullet stays a token if the secondary colour is ever retuned. */ --hex-token: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='13' viewBox='0 0 24 26'%3E%3Cpath d='M12 4.5 L20.66 9.5 V19.5 L12 24.5 L3.34 19.5 V9.5 Z' fill='%23217c8c'/%3E%3Cpath d='M12 2 L20.66 7 V17 L12 22 L3.34 17 V7 Z' fill='%234fc6da'/%3E%3Cpath d='M3.34 7 L12 2 L20.66 7' fill='none' stroke='%23b8eef5' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M20.66 17 L12 22 L3.34 17' fill='none' stroke='%232a9cb0' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E"); --hex-bullet: var(--hex-token); } /* Hex tokens on every bulleted list in main. Same exclusion list as Wingspan's eggs, for the same reason: those three lists deliberately show no marker, `list-style: none` loses to this selector, and the carousel is a