/* =========================================================================== professions-backgrounds.css — the ladder backgrounds, three per profession. Loaded after skins.css. Same contract as every background in that file: MATH-DRAWN ONLY — gradients and geometry, never an image — and each sets --app-bg (plus --app-bg-size / -repeat / -pos where the layers need it), which styles.css already paints on with background-attachment: fixed. THEY CARRY THEIR OWN ELEMENT COLOUR rather than the skin's --fx inks, exactly as the Herbalist set does: the whole point is that Forge Mouth reads as the forge on Boneink, on Arcane, and on Lampblack alike. That is also why alpha stays at or under ~0.10 — these are multiplied across a whole viewport, and the note in skins.css about a tasteful 200px swatch reading as a wash at full size applies here with no exceptions. A LADDER, NOT A SET. Each profession's three are a DIFFERENT MOTIF at rising drama, not one motif at rising density: rung 1 the quiet ground — the material, unlit rung 2 the structure — geometry, the craft's own grid rung 3 the lit one — a light source enters, and the ground is layered under it. This is the rung that should feel earned. Herbalist's three (herb-canopy / herb-trellis / herb-rings) already ship in skins.css and are not repeated here. EACH RUNG IS EMITTED TWICE — `html[data-bg="x"]` for the real app, where cosmetics.js sets the attribute on the root, AND a bare `[data-bg="x"]` so the same rung can be worn by an ELEMENT. The second form is what lets a preview tile, a compositor swatch or a profession page show three rungs side by side; with only the html form they resolve to nothing and render blank. Costs one selector per rule and no duplicated values. FOUR TIER-3 IDS CARRY A `-bg` SUFFIX — api-swarm-bg, myco-bloom-bg, alch-transmute-bg, weave-tapestry-bg — because those four professions have an EFFECT of the same name (the Apiarist's swarm ambience, the Mycologist's bloom moment, and so on). Strictly the two live in different attribute namespaces (`data-bg` versus `data-on-`) so nothing would collide, but a shop lists both catalogs to the same reader and an id that means two things is an id somebody will eventually wire to the wrong one. The suffix is the cheap way out; it must match professions-cosmetics.js exactly, and `assertBackgroundIds()` there checks that it does. The host still has to paint it: styles.css applies --app-bg to , so an element wearing a rung needs `background-image: var(--app-bg)` plus the matching --app-bg-size / -repeat / -pos of its own. =========================================================================== */ /* ============ PROSPECTOR — the deep earth ============ */ /* 1 · Strata — diagonal beds of rock. The material, unlit. */ html[data-bg="pros-strata"], [data-bg="pros-strata"] { --app-bg: repeating-linear-gradient(101deg, transparent 0 22px, rgba(232,161,60,0.045) 22px 24px, transparent 24px 54px), repeating-linear-gradient(101deg, transparent 0 9px, rgba(0,0,0,0.14) 9px 10px, transparent 10px 26px); } /* 2 · Veins — ore threading through the beds. The structure. */ html[data-bg="pros-veins"], [data-bg="pros-veins"] { --app-bg: linear-gradient(58deg, transparent 0 46%, rgba(255,210,122,0.075) 47% 48.4%, transparent 49%), linear-gradient(-71deg, transparent 0 40%, rgba(232,161,60,0.06) 41% 42.2%, transparent 43%), linear-gradient(38deg, transparent 0 62%, rgba(232,161,60,0.05) 63% 64%, transparent 65%), repeating-linear-gradient(101deg, transparent 0 22px, rgba(232,161,60,0.035) 22px 24px, transparent 24px 54px); --app-bg-size: 260px 220px, 320px 280px, 210px 300px, auto; } /* 3 · Facets — a cut stone catching the lantern. The lit rung: hard uneven wedges (even ones read as a pie chart) over a warm pool at the floor. */ html[data-bg="pros-facets"], [data-bg="pros-facets"] { --app-bg: conic-gradient(from 24deg at 50% 108%, transparent 0deg 16deg, rgba(255,210,122,0.055) 16deg 27deg, transparent 27deg 52deg, rgba(232,161,60,0.045) 52deg 61deg, transparent 61deg 96deg, rgba(255,210,122,0.04) 96deg 104deg, transparent 104deg 180deg), radial-gradient(120% 62% at 50% 112%, rgba(232,161,60,0.09), transparent 66%), repeating-linear-gradient(101deg, transparent 0 22px, rgba(232,161,60,0.04) 22px 24px, transparent 24px 54px), repeating-linear-gradient(101deg, transparent 0 9px, rgba(0,0,0,0.16) 9px 10px, transparent 10px 26px); --app-bg-size: 100% 100%, 100% 100%, auto, auto; --app-bg-repeat: no-repeat, no-repeat, repeat, repeat; } /* ============ WOODWRIGHT — grain and sawdust ============ */ /* 1 · Grain — long figure in cut timber. Uneven periods on purpose; even ones read as corduroy rather than as wood. */ html[data-bg="wood-grain"], [data-bg="wood-grain"] { --app-bg: repeating-linear-gradient(3deg, transparent 0 13px, rgba(201,138,69,0.05) 13px 14px, transparent 14px 31px), repeating-linear-gradient(3deg, transparent 0 7px, rgba(0,0,0,0.10) 7px 8px, transparent 8px 19px), repeating-linear-gradient(3deg, transparent 0 41px, rgba(201,138,69,0.035) 41px 43px, transparent 43px 96px); } /* 2 · Rings — the end-grain. Three periods stacked, tightening, so the spacing never resolves into a target. */ html[data-bg="wood-rings"], [data-bg="wood-rings"] { --app-bg: repeating-radial-gradient(circle at 22% 30%, transparent 0 26px, rgba(201,138,69,0.05) 26px 27px, transparent 27px 54px), repeating-radial-gradient(circle at 78% 74%, transparent 0 19px, rgba(201,138,69,0.04) 19px 20px, transparent 20px 41px), repeating-linear-gradient(3deg, transparent 0 13px, rgba(0,0,0,0.08) 13px 14px, transparent 14px 31px); } /* 3 · Canopy — the forest above the workshop. Light coming down through the trees, over the grain. */ html[data-bg="wood-canopy"], [data-bg="wood-canopy"] { --app-bg: conic-gradient(from 196deg at 42% -14%, transparent 0deg 12deg, rgba(201,138,69,0.05) 12deg 21deg, transparent 21deg 44deg, rgba(236,214,180,0.04) 44deg 52deg, transparent 52deg 90deg), radial-gradient(96px 130px at 20% 26%, rgba(140,170,90,0.045), transparent 72%), radial-gradient(120px 96px at 74% 52%, rgba(201,138,69,0.05), transparent 72%), repeating-linear-gradient(3deg, transparent 0 13px, rgba(201,138,69,0.04) 13px 14px, transparent 14px 31px); --app-bg-size: 100% 100%, 400px 360px, 400px 360px, auto; --app-bg-repeat: no-repeat, repeat, repeat, repeat; } /* ============ TIDECALLER — salt and tide ============ */ /* 1 · Swell — long slow bands. Open water at rest. */ html[data-bg="tide-swell"], [data-bg="tide-swell"] { --app-bg: repeating-linear-gradient(176deg, transparent 0 30px, rgba(63,169,216,0.05) 30px 32px, transparent 32px 74px), repeating-linear-gradient(176deg, transparent 0 14px, rgba(127,227,224,0.028) 14px 15px, transparent 15px 38px); } /* 2 · Caustics — light broken on the surface. Two crossing rakes at unequal periods, which is what stops it reading as a net. */ html[data-bg="tide-caustics"], [data-bg="tide-caustics"] { --app-bg: repeating-linear-gradient(56deg, transparent 0 24px, rgba(127,227,224,0.05) 24px 26px, transparent 26px 58px), repeating-linear-gradient(-61deg, transparent 0 31px, rgba(63,169,216,0.045) 31px 33px, transparent 33px 69px), repeating-linear-gradient(176deg, transparent 0 30px, rgba(63,169,216,0.03) 30px 32px, transparent 32px 74px); } /* 3 · The deep — the whole water column, lit from far above. */ html[data-bg="tide-deep"], [data-bg="tide-deep"] { --app-bg: conic-gradient(from 96deg at 50% -18%, transparent 0deg 14deg, rgba(127,227,224,0.05) 14deg 23deg, transparent 23deg 46deg, rgba(63,169,216,0.045) 46deg 55deg, transparent 55deg 90deg), radial-gradient(140% 74% at 50% -16%, rgba(127,227,224,0.075), transparent 66%), repeating-linear-gradient(56deg, transparent 0 24px, rgba(127,227,224,0.04) 24px 26px, transparent 26px 58px), repeating-linear-gradient(-61deg, transparent 0 31px, rgba(63,169,216,0.035) 31px 33px, transparent 33px 69px), linear-gradient(180deg, rgba(63,169,216,0.05), transparent 46%, rgba(0,0,0,0.16)); --app-bg-size: 100% 100%, 100% 100%, auto, auto, 100% 100%; --app-bg-repeat: no-repeat, no-repeat, repeat, repeat, no-repeat; } /* ============ BONE-HUNTER — the hunt and the grave ============ */ /* 1 · Ash — fine cold speckle. Nothing structural; just fallout. */ html[data-bg="bone-ash"], [data-bg="bone-ash"] { --app-bg: repeating-radial-gradient(ellipse at 24% 34%, rgba(185,185,196,0.035) 0 1px, transparent 1px 7px), repeating-radial-gradient(ellipse at 71% 66%, rgba(185,185,196,0.028) 0 1px, transparent 1px 9px); --app-bg-size: 140px 110px, 190px 160px; } /* 2 · Tracks — a trail read across the ground. Broken dashes, not lines: a continuous line is a fence, a broken one is a print. */ html[data-bg="bone-tracks"], [data-bg="bone-tracks"] { --app-bg: repeating-linear-gradient(74deg, rgba(185,185,196,0.05) 0 7px, transparent 7px 34px), repeating-linear-gradient(74deg, transparent 0 17px, rgba(185,185,196,0.035) 17px 23px, transparent 23px 51px), repeating-radial-gradient(ellipse at 24% 34%, rgba(185,185,196,0.025) 0 1px, transparent 1px 7px); --app-bg-size: 210px 96px, 210px 96px, 140px 110px; --app-bg-pos: 0 0, 40px 48px, 0 0; } /* 3 · Ossuary — ribs and long bones stacked in a vault, lit from one side. The drama here is COLD, which is the whole read: no warm light anywhere. */ html[data-bg="bone-ossuary"], [data-bg="bone-ossuary"] { --app-bg: repeating-linear-gradient(90deg, transparent 0 13px, rgba(185,185,196,0.055) 13px 15px, transparent 15px 34px), repeating-linear-gradient(0deg, transparent 0 44px, rgba(185,185,196,0.04) 44px 46px, transparent 46px 108px), radial-gradient(90% 60% at 8% 24%, rgba(210,214,224,0.055), transparent 62%), radial-gradient(120% 80% at 92% 96%, rgba(0,0,0,0.24), transparent 64%); --app-bg-size: auto, auto, 100% 100%, 100% 100%; --app-bg-repeat: repeat, repeat, no-repeat, no-repeat; } /* ============ BEASTMASTER — fang, claw and companion ============ */ /* 1 · Pelt — dense soft strokes lying one way. */ html[data-bg="beast-pelt"], [data-bg="beast-pelt"] { --app-bg: repeating-linear-gradient(66deg, transparent 0 5px, rgba(157,106,224,0.04) 5px 6px, transparent 6px 13px), repeating-linear-gradient(66deg, transparent 0 17px, rgba(0,0,0,0.09) 17px 19px, transparent 19px 43px); } /* 2 · Claw — rakes of four, offset. Groups of four is the whole tell; three reads as hatching and five reads as a comb. */ html[data-bg="beast-claw"], [data-bg="beast-claw"] { --app-bg: repeating-linear-gradient(76deg, rgba(157,106,224,0.055) 0 2px, transparent 2px 11px), repeating-linear-gradient(76deg, transparent 0 46px, rgba(0,0,0,0.14) 46px 96px), repeating-linear-gradient(66deg, transparent 0 5px, rgba(157,106,224,0.025) 5px 6px, transparent 6px 13px); --app-bg-size: 96px 240px, 96px 240px, auto; --app-bg-pos: 0 0, 48px 120px, 0 0; } /* 3 · Eyes in the dark — paired lights out in the black, and the pelt under them. Two masses, unequal, because a symmetrical pair reads as headlights. */ html[data-bg="beast-eyes"], [data-bg="beast-eyes"] { --app-bg: radial-gradient(58px 40px at 22% 34%, rgba(255,164,100,0.075), transparent 68%), radial-gradient(44px 32px at 79% 62%, rgba(157,106,224,0.075), transparent 68%), radial-gradient(130% 80% at 50% 118%, rgba(157,106,224,0.06), transparent 62%), repeating-linear-gradient(66deg, transparent 0 5px, rgba(157,106,224,0.03) 5px 6px, transparent 6px 13px), radial-gradient(120% 90% at 50% 50%, transparent 34%, rgba(0,0,0,0.26)); --app-bg-size: 420px 380px, 420px 380px, 100% 100%, auto, 100% 100%; --app-bg-repeat: repeat, repeat, no-repeat, repeat, no-repeat; } /* ============ HOMESTEADER — the hearth and the field ============ */ /* 1 · Furrows — wide ploughed bands, converging very slightly. */ html[data-bg="home-furrows"], [data-bg="home-furrows"] { --app-bg: repeating-linear-gradient(97deg, transparent 0 26px, rgba(82,189,176,0.045) 26px 28px, transparent 28px 62px), repeating-linear-gradient(97deg, transparent 0 13px, rgba(0,0,0,0.08) 13px 14px, transparent 14px 31px); } /* 2 · Fences — posts and two rails, the settled grid. */ html[data-bg="home-fences"], [data-bg="home-fences"] { --app-bg: repeating-linear-gradient(90deg, rgba(82,189,176,0.05) 0 2px, transparent 2px 54px), repeating-linear-gradient(0deg, transparent 0 26px, rgba(82,189,176,0.04) 26px 28px, transparent 28px 40px, rgba(82,189,176,0.04) 40px 42px, transparent 42px 88px), repeating-linear-gradient(97deg, transparent 0 26px, rgba(0,0,0,0.06) 26px 28px, transparent 28px 62px); } /* 3 · Quilt — pieced blocks with the field showing through, under a big sky. The drama is domestic on purpose: this element's top rung is warmth, not spectacle. */ html[data-bg="home-quilt"], [data-bg="home-quilt"] { --app-bg: linear-gradient(45deg, transparent 46%, rgba(82,189,176,0.06) 47% 53%, transparent 54%), linear-gradient(-45deg, transparent 46%, rgba(217,191,133,0.05) 47% 53%, transparent 54%), repeating-linear-gradient(90deg, rgba(82,189,176,0.045) 0 1px, transparent 1px 62px), repeating-linear-gradient(0deg, rgba(82,189,176,0.045) 0 1px, transparent 1px 62px), radial-gradient(150% 70% at 50% -18%, rgba(217,191,133,0.06), transparent 68%); --app-bg-size: 62px 62px, 62px 62px, auto, auto, 100% 100%; --app-bg-repeat: repeat, repeat, repeat, repeat, no-repeat; } /* ============ APIARIST — the hive ============ */ /* 1 · Comb — a true hex lattice from three rakes at 60 degrees, which is the only way to get one without an image. */ html[data-bg="api-comb"], [data-bg="api-comb"] { --app-bg: repeating-linear-gradient(0deg, rgba(242,115,155,0.04) 0 1px, transparent 1px 30px), repeating-linear-gradient(60deg, rgba(242,115,155,0.04) 0 1px, transparent 1px 30px), repeating-linear-gradient(120deg, rgba(242,115,155,0.04) 0 1px, transparent 1px 30px); } /* 2 · Pollen — the comb filling, cell by cell. */ html[data-bg="api-pollen"], [data-bg="api-pollen"] { --app-bg: radial-gradient(6px 6px at 25% 25%, rgba(255,194,122,0.075), transparent 70%), radial-gradient(4px 4px at 68% 58%, rgba(255,194,122,0.06), transparent 70%), radial-gradient(5px 5px at 44% 82%, rgba(242,115,155,0.055), transparent 70%), repeating-linear-gradient(0deg, rgba(242,115,155,0.035) 0 1px, transparent 1px 30px), repeating-linear-gradient(60deg, rgba(242,115,155,0.035) 0 1px, transparent 1px 30px), repeating-linear-gradient(120deg, rgba(242,115,155,0.035) 0 1px, transparent 1px 30px); --app-bg-size: 90px 78px, 130px 112px, 110px 96px, auto, auto, auto; } /* 3 · Swarm — the comb lit from inside and the air full of wings. */ html[data-bg="api-swarm-bg"], [data-bg="api-swarm-bg"] { --app-bg: radial-gradient(3px 3px at 18% 22%, rgba(255,194,122,0.10), transparent 72%), radial-gradient(2px 2px at 62% 44%, rgba(255,222,190,0.085), transparent 72%), radial-gradient(3px 3px at 41% 78%, rgba(242,115,155,0.075), transparent 72%), radial-gradient(2px 2px at 86% 64%, rgba(255,194,122,0.07), transparent 72%), radial-gradient(110% 66% at 50% 114%, rgba(255,194,122,0.085), transparent 64%), repeating-linear-gradient(0deg, rgba(242,115,155,0.04) 0 1px, transparent 1px 30px), repeating-linear-gradient(60deg, rgba(242,115,155,0.04) 0 1px, transparent 1px 30px), repeating-linear-gradient(120deg, rgba(242,115,155,0.04) 0 1px, transparent 1px 30px); --app-bg-size: 120px 104px, 170px 148px, 140px 122px, 200px 174px, 100% 100%, auto, auto, auto; --app-bg-repeat: repeat, repeat, repeat, repeat, no-repeat, repeat, repeat, repeat; } /* ============ MYCOLOGIST — the bloom in the dark ============ */ /* 1 · Litter — damp leaf-mould, no order to it. */ html[data-bg="myco-litter"], [data-bg="myco-litter"] { --app-bg: repeating-conic-gradient(from 14deg at 32% 44%, transparent 0 5deg, rgba(0,0,0,0.13) 5deg 6deg, transparent 6deg 21deg), repeating-radial-gradient(ellipse at 68% 62%, rgba(255,111,97,0.03) 0 1px, transparent 1px 8px); --app-bg-size: 320px 300px, 160px 130px; } /* 2 · Mycelium — the hidden network. Three unequal periods so the threads branch rather than tile. */ html[data-bg="myco-mycelium"], [data-bg="myco-mycelium"] { --app-bg: repeating-linear-gradient(34deg, transparent 0 36px, rgba(192,132,232,0.045) 36px 37px, transparent 37px 87px), repeating-linear-gradient(-41deg, transparent 0 43px, rgba(192,132,232,0.04) 43px 44px, transparent 44px 99px), repeating-linear-gradient(87deg, transparent 0 64px, rgba(255,111,97,0.035) 64px 65px, transparent 65px 141px); } /* 3 · Bloom — the network lit, caps glowing through the dark, spores in the air. The one rung in the app where the light is emitted from BELOW and from several points at once. */ html[data-bg="myco-bloom-bg"], [data-bg="myco-bloom-bg"] { --app-bg: radial-gradient(2.4px 2.4px at 34% 22%, rgba(255,111,97,0.095), transparent 72%), radial-gradient(1.8px 1.8px at 77% 57%, rgba(192,132,232,0.085), transparent 72%), radial-gradient(2.8px 2.8px at 15% 76%, rgba(255,111,97,0.075), transparent 72%), radial-gradient(44% 26% at 22% 104%, rgba(255,111,97,0.085), transparent 66%), radial-gradient(50% 30% at 79% 108%, rgba(192,132,232,0.075), transparent 66%), repeating-linear-gradient(34deg, transparent 0 36px, rgba(192,132,232,0.04) 36px 37px, transparent 37px 87px), repeating-linear-gradient(-41deg, transparent 0 43px, rgba(192,132,232,0.035) 43px 44px, transparent 44px 99px); --app-bg-size: 190px 230px, 250px 300px, 165px 210px, 100% 100%, 100% 100%, auto, auto; --app-bg-repeat: repeat, repeat, repeat, no-repeat, no-repeat, repeat, repeat; } /* ============ ALCHEMIST — the still and the crucible ============ */ /* 1 · Retort — tall vessel walls, the glassware seen edge-on. */ html[data-bg="alch-retort"], [data-bg="alch-retort"] { --app-bg: repeating-linear-gradient(90deg, transparent 0 34px, rgba(123,139,245,0.05) 34px 36px, transparent 36px 78px), repeating-linear-gradient(90deg, transparent 0 16px, rgba(123,139,245,0.025) 16px 17px, transparent 17px 40px); } /* 2 · Sigil — the drawn circle and cross of a working. Concentric rings plus the two diagonals, which is the whole grammar of the diagram. */ html[data-bg="alch-sigil"], [data-bg="alch-sigil"] { --app-bg: radial-gradient(circle at center, transparent 0 7px, rgba(103,224,168,0.05) 8px 9px, transparent 10px), radial-gradient(circle at center, transparent 0 17px, rgba(123,139,245,0.045) 18px 19px, transparent 20px), linear-gradient(45deg, transparent 48%, rgba(123,139,245,0.035) 49% 51%, transparent 52%), linear-gradient(-45deg, transparent 48%, rgba(123,139,245,0.035) 49% 51%, transparent 52%); --app-bg-size: 76px 76px; } /* 3 · Transmutation — the working lit and running: flame under the vessel, strange light above it, and the sigil still drawn through. */ html[data-bg="alch-transmute-bg"], [data-bg="alch-transmute-bg"] { --app-bg: radial-gradient(2px 2px at 30% 66%, rgba(103,224,168,0.09), transparent 72%), radial-gradient(1.6px 1.6px at 71% 38%, rgba(123,139,245,0.08), transparent 72%), conic-gradient(from 214deg at 50% 116%, transparent 0deg 18deg, rgba(103,224,168,0.05) 18deg 28deg, transparent 28deg 56deg, rgba(123,139,245,0.05) 56deg 66deg, transparent 66deg 130deg), radial-gradient(110% 60% at 50% 116%, rgba(255,164,100,0.06), transparent 64%), radial-gradient(circle at center, transparent 0 17px, rgba(123,139,245,0.04) 18px 19px, transparent 20px), linear-gradient(45deg, transparent 48%, rgba(123,139,245,0.03) 49% 51%, transparent 52%); --app-bg-size: 220px 260px, 290px 330px, 100% 100%, 100% 100%, 76px 76px, 76px 76px; --app-bg-repeat: repeat, repeat, no-repeat, no-repeat, repeat, repeat; } /* ============ GLASSWORKER — molten sand to clear light ============ */ /* 1 · Panes — leaded lights. A grid with one long diagonal lead. */ html[data-bg="glass-panes"], [data-bg="glass-panes"] { --app-bg: repeating-linear-gradient(0deg, rgba(69,201,224,0.045) 0 1px, transparent 1px 44px), repeating-linear-gradient(90deg, rgba(69,201,224,0.045) 0 1px, transparent 1px 44px), repeating-linear-gradient(45deg, transparent 0 62px, rgba(69,201,224,0.03) 62px 63px, transparent 63px 126px); } /* 2 · Prism — the fan of split light. Hard thin bands at slightly different angles, which is refraction rather than a rainbow. */ html[data-bg="glass-prism"], [data-bg="glass-prism"] { --app-bg: linear-gradient(113deg, transparent 0 37%, rgba(69,201,224,0.06) 38% 40%, transparent 41%), linear-gradient(107deg, transparent 0 44%, rgba(214,244,252,0.05) 45% 46.6%, transparent 47%), linear-gradient(101deg, transparent 0 51%, rgba(140,232,200,0.045) 52% 54%, transparent 55%), linear-gradient(95deg, transparent 0 59%, rgba(69,201,224,0.04) 60% 61.6%, transparent 62%); --app-bg-size: 84px 96px, 96px 84px, 108px 92px, 120px 100px; } /* 3 · Lens — ground glass gathering the light to a point, with the prism fan still crossing it. The brightest rung in the app, and the only one whose light source is a POINT rather than an edge. */ html[data-bg="glass-lens"], [data-bg="glass-lens"] { --app-bg: radial-gradient(circle at 50% 34%, rgba(214,244,252,0.09) 0 4%, transparent 26%), repeating-radial-gradient(circle at 50% 34%, transparent 0 21px, rgba(69,201,224,0.05) 21px 22px, transparent 22px 44px), linear-gradient(113deg, transparent 0 37%, rgba(69,201,224,0.05) 38% 40%, transparent 41%), linear-gradient(101deg, transparent 0 51%, rgba(140,232,200,0.04) 52% 54%, transparent 55%), radial-gradient(120% 80% at 50% 34%, transparent 40%, rgba(0,0,0,0.20)); --app-bg-size: 100% 100%, 100% 100%, 84px 96px, 108px 92px, 100% 100%; --app-bg-repeat: no-repeat, no-repeat, repeat, repeat, no-repeat; } /* ============ FORGEWRIGHT — anvil and fire ============ */ /* 1 · Anvil — hammered plate. Dense short strikes, cold. */ html[data-bg="forge-anvil"], [data-bg="forge-anvil"] { --app-bg: repeating-linear-gradient(112deg, transparent 0 8px, rgba(0,0,0,0.16) 8px 9px, transparent 9px 21px), repeating-linear-gradient(112deg, transparent 0 25px, rgba(255,106,43,0.04) 25px 27px, transparent 27px 60px); } /* 2 · Embers — coals banked at the foot of the page, and the plate above them. */ html[data-bg="forge-embers"], [data-bg="forge-embers"] { --app-bg: radial-gradient(56% 30% at 16% 106%, rgba(255,106,43,0.075), transparent 70%), radial-gradient(50% 28% at 84% 110%, rgba(255,214,150,0.06), transparent 70%), radial-gradient(120% 56% at 50% 116%, rgba(255,106,43,0.06), transparent 64%), repeating-linear-gradient(112deg, transparent 0 8px, rgba(0,0,0,0.15) 8px 9px, transparent 9px 21px); --app-bg-size: 100% 100%, 100% 100%, 100% 100%, auto; --app-bg-repeat: no-repeat, no-repeat, no-repeat, repeat; } /* 3 · Forge mouth — the furnace open behind everything, sparks in the draught. The hottest rung: a conic throat, a wide glow, and cinders. */ html[data-bg="forge-mouth"], [data-bg="forge-mouth"] { --app-bg: radial-gradient(1.6px 1.6px at 22% 30%, rgba(255,214,150,0.11), transparent 72%), radial-gradient(1.3px 1.3px at 70% 61%, rgba(255,106,43,0.10), transparent 72%), radial-gradient(2.1px 2.1px at 46% 84%, rgba(255,214,150,0.085), transparent 72%), conic-gradient(from 208deg at 50% 122%, transparent 0deg 22deg, rgba(255,106,43,0.075) 22deg 34deg, transparent 34deg 62deg, rgba(255,214,150,0.055) 62deg 74deg, transparent 74deg 140deg), radial-gradient(140% 70% at 50% 122%, rgba(255,106,43,0.085), transparent 66%), repeating-linear-gradient(112deg, transparent 0 8px, rgba(0,0,0,0.18) 8px 9px, transparent 9px 21px); --app-bg-size: 180px 220px, 240px 290px, 200px 250px, 100% 100%, 100% 100%, auto; --app-bg-repeat: repeat, repeat, repeat, no-repeat, no-repeat, repeat; } /* ============ WEAVER — thread and pattern ============ */ /* 1 · Plain weave — warp and weft, equal. Deliberately the most regular background in the app; that regularity IS the material. */ html[data-bg="weave-plain"], [data-bg="weave-plain"] { --app-bg: repeating-linear-gradient(0deg, rgba(226,99,189,0.04) 0 2px, transparent 2px 8px), repeating-linear-gradient(90deg, rgba(226,99,189,0.04) 0 2px, transparent 2px 8px); } /* 2 · Twill — the diagonal rib. Offset rows are what make a twill a twill. */ html[data-bg="weave-twill"], [data-bg="weave-twill"] { --app-bg: repeating-linear-gradient(63deg, rgba(226,99,189,0.05) 0 2px, transparent 2px 9px), repeating-linear-gradient(63deg, transparent 0 22px, rgba(0,0,0,0.09) 22px 24px, transparent 24px 52px), repeating-linear-gradient(0deg, rgba(226,99,189,0.025) 0 1px, transparent 1px 8px); } /* 3 · Tapestry — the pattern becoming a picture. Blocks of figured colour in a repeat, over the weave, with the loom-light behind. */ html[data-bg="weave-tapestry-bg"], [data-bg="weave-tapestry-bg"] { --app-bg: conic-gradient(from 45deg at 50% 50%, rgba(226,99,189,0.055) 0deg 90deg, transparent 90deg 180deg, rgba(147,217,168,0.04) 180deg 270deg, transparent 270deg 360deg), repeating-linear-gradient(0deg, transparent 0 46px, rgba(244,214,238,0.04) 46px 48px, transparent 48px 96px), repeating-linear-gradient(90deg, transparent 0 46px, rgba(244,214,238,0.04) 46px 48px, transparent 48px 96px), repeating-linear-gradient(0deg, rgba(226,99,189,0.03) 0 2px, transparent 2px 8px), repeating-linear-gradient(90deg, rgba(226,99,189,0.03) 0 2px, transparent 2px 8px); --app-bg-size: 96px 96px, auto, auto, auto, auto; } /* ============ COOK — the kitchen fire ============ */ /* 1 · Board — knife marks across the block, all one way. */ html[data-bg="cook-board"], [data-bg="cook-board"] { --app-bg: repeating-linear-gradient(11deg, transparent 0 11px, rgba(0,0,0,0.11) 11px 12px, transparent 12px 27px), repeating-linear-gradient(11deg, transparent 0 34px, rgba(158,207,66,0.04) 34px 35px, transparent 35px 79px); } /* 2 · Spice rack — rows of jars. A grid where the vertical period is much larger than the horizontal, which is what makes it shelves and not tiles. */ html[data-bg="cook-spice"], [data-bg="cook-spice"] { --app-bg: repeating-linear-gradient(90deg, rgba(158,207,66,0.045) 0 1px, transparent 1px 26px), repeating-linear-gradient(0deg, transparent 0 52px, rgba(240,212,136,0.05) 52px 54px, transparent 54px 106px), repeating-linear-gradient(11deg, transparent 0 11px, rgba(0,0,0,0.07) 11px 12px, transparent 12px 27px); } /* 3 · Feast — steam off a laid table, warm from below and green above. The drama is ABUNDANCE rather than danger; it is the only top rung that gets brighter toward the middle of the page. */ html[data-bg="cook-feast"], [data-bg="cook-feast"] { --app-bg: radial-gradient(2px 2px at 28% 62%, rgba(240,212,136,0.075), transparent 72%), radial-gradient(1.6px 1.6px at 66% 40%, rgba(232,244,206,0.065), transparent 72%), conic-gradient(from 206deg at 50% 118%, transparent 0deg 20deg, rgba(232,244,206,0.045) 20deg 32deg, transparent 32deg 60deg, rgba(240,212,136,0.045) 60deg 72deg, transparent 72deg 136deg), radial-gradient(120% 62% at 50% 116%, rgba(240,212,136,0.07), transparent 64%), radial-gradient(90% 50% at 50% 8%, rgba(158,207,66,0.05), transparent 68%), repeating-linear-gradient(11deg, transparent 0 11px, rgba(0,0,0,0.08) 11px 12px, transparent 12px 27px); --app-bg-size: 210px 250px, 280px 320px, 100% 100%, 100% 100%, 100% 100%, auto; --app-bg-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat, repeat; } /* ============ SCRIBE — ink and knowledge ============ */ /* 1 · Ruled — the page. Feint lines and one margin rule, and nothing else. */ html[data-bg="scribe-ruled"], [data-bg="scribe-ruled"] { --app-bg: repeating-linear-gradient(0deg, transparent 0 25px, rgba(139,164,201,0.045) 25px 26px, transparent 26px 26px), linear-gradient(90deg, transparent 0 76px, rgba(221,196,140,0.05) 76px 77px, transparent 77px); --app-bg-size: auto, 100% 100%; --app-bg-repeat: repeat, no-repeat; } /* 2 · Marginalia — the page annotated: rules, a column, and short hands of text running in the margin. */ html[data-bg="scribe-marginalia"], [data-bg="scribe-marginalia"] { --app-bg: repeating-linear-gradient(0deg, transparent 0 25px, rgba(139,164,201,0.04) 25px 26px, transparent 26px 26px), repeating-linear-gradient(90deg, rgba(139,164,201,0.03) 0 34px, transparent 34px 52px), repeating-linear-gradient(0deg, transparent 0 13px, rgba(221,196,140,0.035) 13px 14px, transparent 14px 26px); --app-bg-size: auto, 190px 13px, 240px 26px; --app-bg-pos: 0 0, 0 6px, 84px 0; } /* 3 · Illuminated — the page gilded and lit: a lamp at the top of the leaf, a drawn initial's rings, and the ruling still underneath. The quiet element's loud rung is GOLD, not fire. */ html[data-bg="scribe-illuminated"], [data-bg="scribe-illuminated"] { --app-bg: radial-gradient(circle at 18% 12%, rgba(221,196,140,0.085), transparent 44%), repeating-radial-gradient(circle at 18% 12%, transparent 0 27px, rgba(221,196,140,0.045) 27px 28px, transparent 28px 56px), repeating-conic-gradient(from 22deg at 18% 12%, rgba(139,164,201,0.035) 0deg 4deg, transparent 4deg 30deg), repeating-linear-gradient(0deg, transparent 0 25px, rgba(139,164,201,0.04) 25px 26px, transparent 26px 26px), linear-gradient(90deg, transparent 0 76px, rgba(221,196,140,0.05) 76px 77px, transparent 77px); --app-bg-size: 100% 100%, 100% 100%, 100% 100%, auto, 100% 100%; --app-bg-repeat: no-repeat, no-repeat, no-repeat, repeat, no-repeat; }