/* Section grounds and their grain. * * The pack paints a ground as a flat palette colour plus one of three grain * textures. The colour stays in the element's own inline `background` * shorthand; the texture is applied from here, keyed on the `data-ground` * attribute the converter writes. * * WHY IT IS NOT INLINE. Only the homepage was ever textured — 25 grounds * there against 1113 flat backgrounds on the other 29 pages — so the site read * as two different designs. Driving it from one place applies the same tone * everywhere, lets the school change or remove it without a deploy, and means * "off" is not a repaint: the rules below simply stop applying and each ground * falls back to the exact flat colour it already declares inline. * * `!important` is load-bearing, not laziness. The colour lives in an INLINE * style, and an inline declaration beats a stylesheet rule; without it the * texture would never paint. It is scoped to [data-ground] so it can only ever * touch an element the converter tagged. * * TWO SYSTEMS PAINT THESE GROUNDS, AND THE ORDER MATTERS. * public/legacy/section-texture.js paints 21 designed background images onto * interior-page sections and marks each one `data-tex`. It writes an INLINE * background-image, and the rules here carry `!important` — which beats an * inline declaration — so without the `:not([data-tex])` below the grain would * win every time and not one of those 21 backgrounds would ever be seen. * So: where section-texture.js has painted, the grain stands down. Where it has * not (the homepage, and any ground whose colour is not in its map), the grain * still applies. The switch below governs BOTH, because a school turning the * texture off means all of it, not half. * * TO TURN THE GRAIN OFF EVERYWHERE: set data-bg="off" on . One * attribute, no rebuild, and every ground returns to flat colour. * TO FORCE ONE TEXTURE EVERYWHERE: data-bg="paper" | "cloth" | "fibre". * The default (no attribute, or "auto") gives each ground the grain the design * pairs with its own palette colour. */ :root { --grain-paper: url("/legacy/assets/textures/grain-paper.webp"); --grain-cloth: url("/legacy/assets/textures/grain-cloth.webp"); --grain-fibre: url("/legacy/assets/textures/grain-fibre.webp"); } /* Auto: the pairing the design itself uses. Tile sizes are the pack's own. */ html:not([data-bg]) [data-ground="paper"]:not([data-tex]), html[data-bg="auto"] [data-ground="paper"]:not([data-tex]), html[data-bg="both"] [data-ground="paper"]:not([data-tex]) { background-image: var(--grain-paper) !important; background-size: 320px !important; background-repeat: repeat !important; } html:not([data-bg]) [data-ground="cloth"]:not([data-tex]), html[data-bg="auto"] [data-ground="cloth"]:not([data-tex]), html[data-bg="both"] [data-ground="cloth"]:not([data-tex]) { background-image: var(--grain-cloth) !important; background-size: 360px !important; background-repeat: repeat !important; } html:not([data-bg]) [data-ground="fibre"]:not([data-tex]), html[data-bg="auto"] [data-ground="fibre"]:not([data-tex]), html[data-bg="both"] [data-ground="fibre"]:not([data-tex]) { background-image: var(--grain-fibre) !important; background-size: 420px !important; background-repeat: repeat !important; } /* One texture on every ground, whatever its colour. */ html[data-bg="paper"] [data-ground], html[data-bg="paper"] [data-tex] { background-image: var(--grain-paper) !important; background-size: 320px !important; background-repeat: repeat !important; } html[data-bg="cloth"] [data-ground], html[data-bg="cloth"] [data-tex] { background-image: var(--grain-cloth) !important; background-size: 360px !important; background-repeat: repeat !important; } html[data-bg="fibre"] [data-ground], html[data-bg="fibre"] [data-tex] { background-image: var(--grain-fibre) !important; background-size: 420px !important; background-repeat: repeat !important; } /* Plain. Stated rather than implied, so a ground that inherited an image from somewhere else still goes flat. section-texture.js clears its own inline backgrounds in this mode too — this covers anything it did not paint. */ html[data-bg="plain"] [data-ground], html[data-bg="plain"] [data-tex] { background-image: none !important; } /* Grain only: the designed backgrounds stand down and every ground takes the grain the design pairs with its colour, homepage included. */ html[data-bg="grain"] [data-ground="paper"] { background-image: var(--grain-paper) !important; background-size: 320px !important; background-repeat: repeat !important; } html[data-bg="grain"] [data-ground="cloth"] { background-image: var(--grain-cloth) !important; background-size: 360px !important; background-repeat: repeat !important; } html[data-bg="grain"] [data-ground="fibre"] { background-image: var(--grain-fibre) !important; background-size: 420px !important; background-repeat: repeat !important; } /* Art only: the designed background carries the section, no grain over it. section-texture.js has already painted it inline; the grain rules above are scoped :not([data-tex]) so they do not reach a painted section. */ /* The homepage's CAPE panel scrolls its ground with the page on purpose. `background-attachment` is not part of what is being swapped, so it is preserved here rather than lost with the rest of the shorthand. */ html [data-ground][data-ground-fixed] { background-attachment: fixed !important; }