/* Theme parts: page textures. [data-texture] draws the page behind everything (ThemeTexture): --texture, --texture-size gradient layers and their sizes, as background-image and background-size --texture-mask- a drawing filled with that colour: text, accent, accent-2, accent-3 or border. A mask shorthand list, e.g. url(/themes/drawings/...) 0 0 / 200px 200px --texture-ink- the colour itself, to make it fainter: color-mix(in srgb, var(--text) 6%, transparent) --card-mask-grain, --card-ink-grain paper textures also grain the cards Drawings are black on clear; only their shape and transparency count. Every colour comes from the theme. --texture-lit-mask, --texture-lit-at the drawings that catch an atmosphere's light (a mask list like the texture's own), and the point a turning light turns about --texture-layer-motion a loop for the drawn layers, as a readout rolling upward Drawings are black on clear; only their shape and transparency count. Every colour comes from the theme. [data-texture-strength] fades the whole texture. A drawing that animates itself names a still one beside it: var(--ambient-flow, ), var(--ambient-rest, ), so only the still one shows where nothing may move. */ /* What every texture starts from: a faint light over the whole window where none of its drawings catches it. */ [data-texture] { --texture-lit-mask: linear-gradient(rgba(0, 0, 0, 0.1) 0 0); --texture-lit-at: 50% 50%; --texture-layer-motion: none; } [data-texture-strength="normal"] { --texture-opacity: 1; } [data-texture-strength="soft"] { --texture-opacity: 0.7; } [data-texture-strength="faint"] { --texture-opacity: 0.4; } [data-texture-strength="off"] { --texture-opacity: 0; } [data-texture="none"] { --texture: none; --texture-size: auto; } /* Grain: fine noise over the page and the cards. */ [data-texture="grain"] { --texture: none; --texture-size: auto; --texture-mask-text: url(/themes/drawings/shared/noise.svg) 0 0 / 180px 180px; --texture-ink-text: color-mix(in srgb, var(--text) 8%, transparent); --card-mask-grain: url(/themes/drawings/shared/noise.svg) 0 0 / 180px 180px; --card-ink-grain: color-mix(in srgb, var(--text) 7%, transparent); } [data-scheme="dark"][data-texture="grain"] { --texture-ink-text: color-mix(in srgb, var(--text) 6%, transparent); --card-ink-grain: color-mix(in srgb, var(--text) 5%, transparent); } /* Paper: a grained page darkening toward its edges. */ [data-texture="paper"] { --texture: radial-gradient(ellipse at 50% 40%, transparent 55%, color-mix(in srgb, var(--text) 10%, transparent) 100%); --texture-size: 100% 100%; --texture-mask-text: url(/themes/drawings/shared/noise.svg) 0 0 / 180px 180px; --texture-ink-text: color-mix(in srgb, var(--text) 10%, transparent); --card-mask-grain: url(/themes/drawings/shared/noise.svg) 0 0 / 180px 180px; --card-ink-grain: color-mix(in srgb, var(--text) 7%, transparent); } [data-scheme="dark"][data-texture="paper"] { --texture: radial-gradient(ellipse at 50% 40%, transparent 55%, color-mix(in srgb, var(--text) 18%, transparent) 100%); --texture-ink-text: color-mix(in srgb, var(--text) 7%, transparent); --card-ink-grain: color-mix(in srgb, var(--text) 5%, transparent); } /* Linen: a fine weave of crossed threads; the cards are grained. */ [data-texture="linen"] { --texture: repeating-linear-gradient(0deg, color-mix(in srgb, var(--text) 5%, transparent) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, color-mix(in srgb, var(--text) 5%, transparent) 0 1px, transparent 1px 3px); --texture-size: auto, auto; --card-mask-grain: url(/themes/drawings/shared/noise.svg) 0 0 / 180px 180px; --card-ink-grain: color-mix(in srgb, var(--text) 7%, transparent); } [data-scheme="dark"][data-texture="linen"] { --texture: repeating-linear-gradient(0deg, color-mix(in srgb, var(--text) 3.5%, transparent) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, color-mix(in srgb, var(--text) 3.5%, transparent) 0 1px, transparent 1px 3px); --card-ink-grain: color-mix(in srgb, var(--text) 5%, transparent); } /* Grid: graph paper ruled every 28px. */ [data-texture="grid"] { --texture: linear-gradient(color-mix(in srgb, var(--text) 7%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--text) 7%, transparent) 1px, transparent 1px); --texture-size: 28px 28px, 28px 28px; } [data-scheme="dark"][data-texture="grid"] { --texture: linear-gradient(color-mix(in srgb, var(--text) 4.9%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--text) 4.9%, transparent) 1px, transparent 1px); } /* Stars: a few points of light repeating every 190px, one in the accent. */ [data-texture="stars"] { --texture: radial-gradient(1px 1px at 23px 41px, color-mix(in srgb, var(--text) 55%, transparent), transparent), radial-gradient(1px 1px at 97px 13px, color-mix(in srgb, var(--text) 40%, transparent), transparent), radial-gradient(1.5px 1.5px at 151px 117px, color-mix(in srgb, var(--accent) 60%, transparent), transparent), radial-gradient(1px 1px at 61px 163px, color-mix(in srgb, var(--text) 35%, transparent), transparent); --texture-size: 190px 190px, 190px 190px, 190px 190px, 190px 190px; } /* Parchment: edges browned as if near a flame, stains, and fibres; the cards are grained. */ [data-texture="parchment"] { --texture: radial-gradient(ellipse 75% 70% at 50% 45%, transparent 50%, color-mix(in srgb, var(--accent) 9%, transparent) 85%, color-mix(in srgb, var(--text) 15%, transparent) 100%); --texture-size: 100% 100%; --texture-mask-text: url(/themes/drawings/shared/clouds-500.svg) 0 0 / 100% 100%, url(/themes/drawings/shared/noise.svg) 0 0 / 180px 180px; --texture-ink-text: color-mix(in srgb, var(--text) 10%, transparent); --card-mask-grain: url(/themes/drawings/shared/noise.svg) 0 0 / 180px 180px; --card-ink-grain: color-mix(in srgb, var(--text) 7%, transparent); } [data-scheme="dark"][data-texture="parchment"] { --texture: radial-gradient(ellipse 75% 70% at 50% 45%, transparent 50%, color-mix(in srgb, var(--accent) 12%, transparent) 85%, color-mix(in srgb, var(--text) 20%, transparent) 100%); --texture-ink-text: color-mix(in srgb, var(--text) 7.5%, transparent); --card-ink-grain: color-mix(in srgb, var(--text) 5%, transparent); } /* Foxing: the brown spots of an old book, on a faint weave, browning at the edges; the cards are grained. */ [data-texture="foxing"] { --texture: radial-gradient(ellipse at 50% 45%, transparent 55%, color-mix(in srgb, var(--text) 9%, transparent) 100%), radial-gradient(circle at 40px 70px, color-mix(in srgb, var(--accent) 14%, transparent) 0 2px, transparent 9px), radial-gradient(circle at 210px 30px, color-mix(in srgb, var(--accent) 10%, transparent) 0 3px, transparent 12px), radial-gradient(circle at 270px 240px, color-mix(in srgb, var(--accent) 12%, transparent) 0 1.5px, transparent 7px), radial-gradient(circle at 120px 280px, color-mix(in srgb, var(--accent) 9%, transparent) 0 4px, transparent 14px), repeating-linear-gradient(0deg, color-mix(in srgb, var(--text) 5%, transparent) 0 1px, transparent 1px 3px); --texture-size: 100% 100%, 317px 289px, 411px 373px, 523px 467px, 389px 541px, auto; --texture-mask-text: url(/themes/drawings/shared/noise.svg) 0 0 / 180px 180px; --texture-ink-text: color-mix(in srgb, var(--text) 9%, transparent); --card-mask-grain: url(/themes/drawings/shared/noise.svg) 0 0 / 180px 180px; --card-ink-grain: color-mix(in srgb, var(--text) 7%, transparent); } [data-scheme="dark"][data-texture="foxing"] { --texture: radial-gradient(ellipse at 50% 45%, transparent 55%, color-mix(in srgb, var(--text) 14%, transparent) 100%), radial-gradient(circle at 40px 70px, color-mix(in srgb, var(--accent) 14%, transparent) 0 2px, transparent 9px), radial-gradient(circle at 210px 30px, color-mix(in srgb, var(--accent) 10%, transparent) 0 3px, transparent 12px), radial-gradient(circle at 270px 240px, color-mix(in srgb, var(--accent) 12%, transparent) 0 1.5px, transparent 7px), radial-gradient(circle at 120px 280px, color-mix(in srgb, var(--accent) 9%, transparent) 0 4px, transparent 14px), repeating-linear-gradient(0deg, color-mix(in srgb, var(--text) 3.5%, transparent) 0 1px, transparent 1px 3px); --texture-ink-text: color-mix(in srgb, var(--text) 6%, transparent); --card-ink-grain: color-mix(in srgb, var(--text) 5%, transparent); } /* Blood: the accent pooling from below and the corner, stained and grainy. */ [data-texture="blood"] { --texture: radial-gradient(120% 70% at 50% 115%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 60%), radial-gradient(60% 50% at 100% 100%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%); --texture-size: 100% 100%, 100% 100%; --texture-mask-accent: url(/themes/drawings/shared/clouds-400.svg) 0 0 / 100% 100%; --texture-ink-accent: color-mix(in srgb, var(--accent) 10%, transparent); --texture-mask-text: url(/themes/drawings/shared/noise.svg) 0 0 / 180px 180px; --texture-ink-text: color-mix(in srgb, var(--text) 6%, transparent); } /* Swiss: a layout grid, major lines in the accent every 168px over a fine 28px grid. */ [data-texture="swiss"] { --texture: linear-gradient(color-mix(in srgb, var(--accent) 14%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--accent) 14%, transparent) 1px, transparent 1px), linear-gradient(color-mix(in srgb, var(--text) 6%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--text) 6%, transparent) 1px, transparent 1px); --texture-size: 168px 168px, 168px 168px, 28px 28px, 28px 28px; } [data-scheme="dark"][data-texture="swiss"] { --texture: linear-gradient(color-mix(in srgb, var(--accent) 14%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--accent) 14%, transparent) 1px, transparent 1px), linear-gradient(color-mix(in srgb, var(--text) 4.2%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--text) 4.2%, transparent) 1px, transparent 1px); } /* Scanlines: fine horizontal lines in the accent under a glow from above. */ [data-texture="scanlines"] { --texture: repeating-linear-gradient(0deg, color-mix(in srgb, var(--accent) 4.5%, transparent) 0 1px, transparent 1px 4px), radial-gradient(90% 60% at 50% -10%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%); --texture-size: auto, 100% 100%; } /* Mist: an accent haze from the top left and a faint one in the bottom right. */ [data-texture="mist"] { --texture: radial-gradient(60% 45% at 15% 5%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%), radial-gradient(55% 50% at 95% 95%, color-mix(in srgb, var(--text) 5%, transparent), transparent 70%); --texture-size: 100% 100%, 100% 100%; } [data-scheme="dark"][data-texture="mist"] { --texture: radial-gradient(60% 45% at 15% 5%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%), radial-gradient(55% 50% at 95% 95%, color-mix(in srgb, var(--text) 7%, transparent), transparent 70%); } /* Damask: accent dots on a fine diagonal lattice. */ [data-texture="damask"] { --texture: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 7%, transparent) 0 2px, transparent 3px), repeating-linear-gradient(45deg, color-mix(in srgb, var(--accent) 3%, transparent) 0 1px, transparent 1px 14px), repeating-linear-gradient(-45deg, color-mix(in srgb, var(--accent) 3%, transparent) 0 1px, transparent 1px 14px); --texture-size: 20px 20px, auto, auto; } /* Lace: interlocking accent rings with a dot in each. */ [data-texture="lace"] { --texture: radial-gradient(circle at 0 0, transparent 9px, color-mix(in srgb, var(--accent) 9%, transparent) 10px, transparent 11px), radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 8%, transparent) 0 1.5px, transparent 2px); --texture-size: 20px 20px, 20px 20px; } /* Crushed velvet: a sheen from the top left, a mottled accent nap, and fine grain. */ [data-texture="velvet"] { --texture: radial-gradient(80% 60% at 15% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 65%), radial-gradient(70% 70% at 100% 100%, color-mix(in srgb, var(--text) 5%, transparent), transparent 70%); --texture-size: 100% 100%, 100% 100%; --texture-mask-accent: url(/themes/drawings/shared/clouds-600.svg) 0 0 / 100% 100%; --texture-ink-accent: color-mix(in srgb, var(--accent) 16%, transparent); --texture-mask-text: url(/themes/drawings/shared/noise.svg) 0 0 / 180px 180px; --texture-ink-text: color-mix(in srgb, var(--text) 5%, transparent); } /* Light through venetian blinds over grain, falling off into the dark away from the window (the grain fades with it). */ [data-texture="blinds"] { --texture: radial-gradient(75% 90% at 90% 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0.12) 100%), repeating-linear-gradient(-32deg, transparent 0 34px, color-mix(in srgb, var(--text) 6%, transparent) 34px 58px); --texture-size: 100% 100%, auto; --texture-mask-text: url(/themes/drawings/shared/noise.svg) 0 0 / 180px 180px intersect, radial-gradient(75% 90% at 90% 0%, #000 25%, rgba(0,0,0,0.88) 100%); --texture-ink-text: color-mix(in srgb, var(--text) 8%, transparent); } [data-scheme="dark"][data-texture="blinds"] { --texture: radial-gradient(75% 90% at 90% 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0.6) 100%), repeating-linear-gradient(-32deg, transparent 0 34px, color-mix(in srgb, var(--text) 7.5%, transparent) 34px 58px); --texture-mask-text: url(/themes/drawings/shared/noise.svg) 0 0 / 180px 180px intersect, radial-gradient(75% 90% at 90% 0%, #000 25%, rgba(0,0,0,0.4) 100%); --texture-ink-text: color-mix(in srgb, var(--text) 6%, transparent); } /* Rose petals drifting across the page, under a blush from above. */ [data-texture="petals"] { --texture: radial-gradient(60% 40% at 50% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%); --texture-size: 100% 100%; --texture-mask-accent: url(/themes/drawings/textures/petals-accent.svg) 0 0 / 340px 340px; } /* A mandala drawn in fine lines, rising from the top of the page in a soft light. */ [data-texture="mandala"] { --texture: radial-gradient(50% 45% at 50% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 75%); --texture-size: 100% 100%; --texture-mask-accent: url(/themes/drawings/textures/mandala-accent.svg) 0 0 / 100% 100%; } /* Transformation sparkles: four-point stars and glitter over a pink and lavender wash from two corners. */ [data-texture="sparkles"] { --texture: radial-gradient(55% 45% at 10% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%), radial-gradient(55% 55% at 100% 100%, color-mix(in srgb, var(--accent-2) 18%, transparent), transparent 70%); --texture-size: 100% 100%, 100% 100%; --texture-mask-accent: url(/themes/drawings/textures/sparkles-accent.svg) 0 0 / 300px 300px; --texture-mask-accent-2: url(/themes/drawings/textures/sparkles-accent-2.svg) 0 0 / 300px 300px; } /* Shojo bubbles: a screentone of fine dots behind pale floating bubbles and outlined blossoms in three colours. */ [data-texture="bubbles"] { --texture: radial-gradient(70% 50% at 85% 0%, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 70%), radial-gradient(circle, color-mix(in srgb, var(--text) 7%, transparent) 0 1px, transparent 1.4px); --texture-size: 100% 100%, 7px 7px; --texture-mask-border: url(/themes/drawings/textures/bubbles-light.svg) 0 0 / 460px 460px; --texture-ink-border: rgb(255,255,255); --texture-mask-text: url(/themes/drawings/textures/bubbles-rim.svg) 0 0 / 460px 460px; --texture-mask-accent: url(/themes/drawings/textures/bubbles-accent.svg) 0 0 / 460px 460px; --texture-mask-accent-2: url(/themes/drawings/textures/bubbles-accent-2.svg) 0 0 / 460px 460px; --texture-mask-accent-3: url(/themes/drawings/textures/bubbles-accent-3.svg) 0 0 / 460px 460px; } /* A concert stage: spotlight beams in three colours from the rig, a glow off the floor, glitter in the air. */ [data-texture="spotlights"] { --texture: radial-gradient(90% 40% at 50% 110%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%), radial-gradient(1.5px 1.5px at 30px 40px, color-mix(in srgb, var(--accent) 80%, transparent), transparent), radial-gradient(1.5px 1.5px at 120px 90px, color-mix(in srgb, var(--accent-2) 70%, transparent), transparent), radial-gradient(1.5px 1.5px at 75px 150px, color-mix(in srgb, var(--accent-3) 70%, transparent), transparent); --texture-size: 100% 100%, 170px 170px, 170px 170px, 170px 170px; --texture-mask-accent: url(/themes/drawings/textures/spotlights-accent.svg) 0 0 / 100% 100%; --texture-mask-accent-2: url(/themes/drawings/textures/spotlights-accent-2.svg) 0 0 / 100% 100%; --texture-mask-accent-3: url(/themes/drawings/textures/spotlights-accent-3.svg) 0 0 / 100% 100%; } /* School notebook paper: ruled lines, a double margin line just past the rail and sidebar, and a little grain. */ [data-texture="notebook"] { --texture: linear-gradient(90deg, transparent 0 316px, color-mix(in srgb, var(--link-missing) 30%, transparent) 316px 317px, transparent 317px 320px, color-mix(in srgb, var(--link-missing) 30%, transparent) 320px 321px, transparent 321px), repeating-linear-gradient(180deg, transparent 0 31px, color-mix(in srgb, var(--accent) 20%, transparent) 31px 32px); --texture-size: 100% 100%, auto; --texture-mask-text: url(/themes/drawings/shared/noise.svg) 0 0 / 180px 180px; --texture-ink-text: color-mix(in srgb, var(--text) 6%, transparent); } /* Notebook paper in the dark: fainter rules and grain. */ [data-scheme="dark"][data-texture="notebook"] { --texture: linear-gradient(90deg, transparent 0 316px, color-mix(in srgb, var(--link-missing) 30%, transparent) 316px 317px, transparent 317px 320px, color-mix(in srgb, var(--link-missing) 30%, transparent) 320px 321px, transparent 321px), repeating-linear-gradient(180deg, transparent 0 31px, color-mix(in srgb, var(--accent) 12%, transparent) 31px 32px); --texture-ink-text: color-mix(in srgb, var(--text) 5%, transparent); } /* Manga focus lines converging on the page, over screentone rising from the foot (the tone faded by the last mask layer). */ [data-texture="speedlines"] { --texture: none; --texture-size: auto; --texture-mask-text: url(/themes/drawings/textures/speedlines-lines.svg) 0 0 / 100% 100%, url(/themes/drawings/textures/speedlines-tone.svg) 0 0 / 100% 100% intersect, linear-gradient(rgba(0, 0, 0, 0.22) 0 0); } /* Speedlines on a dark page: the lines at 0.14 and the tone at 0.18. */ [data-scheme="dark"][data-texture="speedlines"] { --texture-ink-text: color-mix(in srgb, var(--text) 70%, transparent); --texture-mask-text: url(/themes/drawings/textures/speedlines-lines.svg) 0 0 / 100% 100%, url(/themes/drawings/textures/speedlines-tone.svg) 0 0 / 100% 100% intersect, linear-gradient(rgba(0, 0, 0, 0.257) 0 0); } /* A court's markings at night, under two floodlights, with a little grain. */ [data-texture="court"] { --texture: radial-gradient(45% 60% at 6% -8%, color-mix(in srgb, var(--text) 20%, transparent), transparent 70%), radial-gradient(45% 60% at 94% -8%, color-mix(in srgb, var(--text) 20%, transparent), transparent 70%); --texture-size: 100% 100%, 100% 100%; --texture-mask-text: url(/themes/drawings/textures/court-lines.svg) 0 0 / 100% 100%, url(/themes/drawings/shared/noise.svg) 0 0 / 180px 180px intersect, linear-gradient(rgba(0, 0, 0, 0.04) 0 0); --texture-mask-accent: url(/themes/drawings/textures/court-centre.svg) 0 0 / 100% 100%; } /* Riveted armour plates under a work light, with a band of hazard stripes (accent-2) along the top. */ [data-texture="hazard"] { --texture: linear-gradient(rgba(0, 0, 0, 0.7) 0 9px, rgba(0, 0, 0, 0) 9px), radial-gradient(70% 55% at 50% 0%, color-mix(in srgb, var(--text) 6%, transparent), transparent 70%), linear-gradient(rgba(0, 0, 0, 0.5) 0 1px, rgba(0, 0, 0, 0) 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0 1px, rgba(0, 0, 0, 0) 1px); --texture-size: 100% 100%, 100% 100%, 240px 160px, 240px 160px; --texture-mask-text: url(/themes/drawings/textures/hazard-plates.svg) 0 0 / 240px 160px, url(/themes/drawings/shared/noise.svg) 0 0 / 180px 180px intersect, linear-gradient(rgba(0, 0, 0, 0.04) 0 0); --texture-mask-accent-2: url(/themes/drawings/textures/hazard-stripes.svg) 0 0 / 2400px 9px repeat-x; } /* A magic circle glowing behind the page, its seals in the accent, with motes of light. */ [data-texture="sigil"] { --texture: radial-gradient(40% 55% at 58% 55%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%), radial-gradient(1.5px 1.5px at 37px 51px, color-mix(in srgb, var(--accent) 55%, transparent), transparent), radial-gradient(1px 1px at 141px 113px, color-mix(in srgb, var(--text) 45%, transparent), transparent); --texture-size: 100% 100%, 173px 173px, 173px 173px; --texture-mask-text: url(/themes/drawings/textures/sigil-rings.svg) 0 0 / 100% 100%; --texture-mask-accent: url(/themes/drawings/textures/sigil-seals.svg) 0 0 / 100% 100%; } /* Sumi: a moon behind bands of mist, lantern light from below, waves along the foot (shaded under them), ink-wash cloud and washi fibres. */ [data-texture="sumi"] { --texture: radial-gradient(55% 45% at 0% 100%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%), linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0) max(23.75%, 15.833vw)); --texture-size: 100% 100%, 100% 100%; --texture-mask-text: url(/themes/drawings/textures/sumi-sky.svg) 0 0 / 100% 100%, url(/themes/drawings/textures/sumi-waves.svg) 0 0 / 100% 100%, url(/themes/drawings/textures/sumi-fibres.svg) 0 0 / 260px 260px, url(/themes/drawings/shared/clouds-800.svg) 0 0 / 800px 800px intersect, linear-gradient(rgba(0, 0, 0, 0.06) 0 0); } /* Ben-Day dots: accent and accent-3 halftone screens on yellowing newsprint, with grain. */ [data-texture="benday"] { --texture: radial-gradient(ellipse at 50% 45%, transparent 60%, color-mix(in srgb, var(--text) 8%, transparent) 100%), radial-gradient(circle at 3px 3px, color-mix(in srgb, var(--accent) 20%, transparent) 0 1.9px, transparent 2.5px), radial-gradient(circle at 8.5px 8.5px, color-mix(in srgb, var(--accent-3) 20%, transparent) 0 1.9px, transparent 2.5px); --texture-size: 100% 100%, 11px 11px, 11px 11px; --texture-mask-text: url(/themes/drawings/shared/noise.svg) 0 0 / 180px 180px; --texture-ink-text: color-mix(in srgb, var(--text) 4.5%, transparent); } /* Film grain: a vignette, scratches and dust over grain held to 11% by the clear gradient under it, and a flicker of low-frequency noise (on the border layer, inked in the text colour). */ [data-texture="filmgrain"] { --texture: radial-gradient(ellipse 80% 75% at 50% 45%, transparent 45%, color-mix(in srgb, var(--text) 42%, transparent) 100%); --texture-size: 100% 100%; --texture-mask-text: url(/themes/drawings/textures/filmgrain-scratches.svg) 0 0 / 700px 820px add, url(/themes/drawings/shared/noise.svg) 0 0 / 160px 160px intersect, linear-gradient(rgba(0,0,0,0.11), rgba(0,0,0,0.11)); --texture-ink-text: var(--text); --texture-mask-border: url(/themes/drawings/shared/clouds-600.svg) 0 0 / 600px 600px; --texture-ink-border: color-mix(in srgb, var(--text) 6%, transparent); } /* Star bursts: a toy-box night sky of sparkles, bursts and a lightning bolt, lit accent-2 and accent-3 from the corners. */ [data-texture="starburst"] { --texture: radial-gradient(60% 50% at 0% 0%, color-mix(in srgb, var(--accent-2) 22%, transparent), transparent 70%), radial-gradient(55% 50% at 100% 100%, color-mix(in srgb, var(--accent-3) 16%, transparent), transparent 70%); --texture-size: 100% 100%, 100% 100%; --texture-mask-text: url(/themes/drawings/textures/starburst-text.svg) 0 0 / 520px 520px; --texture-mask-accent: url(/themes/drawings/textures/starburst-accent.svg) 0 0 / 520px 520px; --texture-mask-accent-2: url(/themes/drawings/textures/starburst-accent-2.svg) 0 0 / 520px 520px; --texture-mask-accent-3: url(/themes/drawings/textures/starburst-accent-3.svg) 0 0 / 520px 520px; } /* Armour panels: pale plating, panel lines (held to 20% by the clear gradient under them) with a lit edge (the border layer, inked white), hatches and decals, an accent-2 stripe and accent-3 caution marks. */ [data-texture="armor-panels"] { --texture: linear-gradient(170deg, rgba(255,255,255,0.55), rgba(255,255,255,0) 45%); --texture-size: 100% 100%; --texture-mask-border: url(/themes/drawings/textures/armor-panels-seams.svg) 1px 1px / 560px 420px; --texture-ink-border: rgba(255,255,255,0.85); --texture-mask-text: url(/themes/drawings/textures/armor-panels-marks.svg) 0 0 / 560px 420px add, url(/themes/drawings/textures/armor-panels-seams.svg) 0 0 / 560px 420px intersect, linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)); --texture-mask-accent: url(/themes/drawings/textures/armor-panels-accent.svg) 0 0 / 560px 420px; --texture-mask-accent-2: url(/themes/drawings/textures/armor-panels-accent-2.svg) 0 0 / 560px 420px; --texture-mask-accent-3: url(/themes/drawings/textures/armor-panels-accent-3.svg) 0 0 / 560px 420px; } /* Armour panels on a dark theme: a fainter sheen and lit edge, stronger panel lines. */ [data-scheme="dark"][data-texture="armor-panels"] { --texture: linear-gradient(170deg, rgba(255,255,255,0.03), rgba(255,255,255,0) 45%); --texture-ink-border: rgba(255,255,255,0.05); --texture-mask-text: url(/themes/drawings/textures/armor-panels-marks.svg) 0 0 / 560px 420px add, url(/themes/drawings/textures/armor-panels-seams.svg) 0 0 / 560px 420px intersect, linear-gradient(rgba(0,0,0,0.24), rgba(0,0,0,0.24)); } /* A finishing-move backdrop: accent, accent-2 and accent-3 rays bursting from below the page round a hot glow (its circle sized as the rays' drawing is), an accent-3 blaze, and drifting embers. */ [data-texture="sunburst-rays"] { --texture: radial-gradient(circle max(35vw, 52.5vh) at 50% calc(100% + max(8.333vw, 12.5vh)), color-mix(in srgb, var(--accent) 55%, transparent), color-mix(in srgb, var(--accent-2) 22%, transparent) 45%, transparent), radial-gradient(110% 70% at 50% 108%, color-mix(in srgb, var(--accent-3) 38%, transparent), transparent 70%); --texture-size: 100% 100%, 100% 100%; --texture-mask-accent: url(/themes/drawings/textures/sunburst-rays-accent.svg) center bottom / 100% 100% no-repeat, url(/themes/drawings/textures/sunburst-rays-embers-accent.svg) 0 0 / 340px 340px; --texture-mask-accent-2: url(/themes/drawings/textures/sunburst-rays-accent-2.svg) center bottom / 100% 100% no-repeat, url(/themes/drawings/textures/sunburst-rays-embers-accent-2.svg) 0 0 / 340px 340px; --texture-mask-accent-3: url(/themes/drawings/textures/sunburst-rays-accent-3.svg) center bottom / 100% 100% no-repeat; } /* Neon city rain: a magenta glow from the street, a cyan sign above and a yellow one below; the rain itself falls in the neon-rain atmosphere. */ [data-texture="rain"] { --texture: radial-gradient(45% 40% at 40% 104%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%), radial-gradient(35% 30% at 96% 4%, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 70%), radial-gradient(18% 10% at 86% 78%, color-mix(in srgb, var(--accent-3) 10%, transparent), transparent 70%); --texture-size: 100% 100%, 100% 100%, 100% 100%; } /* An outrun sunset: a striped sun (accent-2 to accent-3 to accent) sinking behind a neon grid floor. */ [data-texture="outrun"] { --texture-mask-accent: url(/themes/drawings/textures/outrun-accent.svg) 0 0 / 100% 100% no-repeat; --texture-mask-accent-2: url(/themes/drawings/textures/outrun-accent-2.svg) 0 0 / 100% 100% no-repeat; --texture-mask-accent-3: url(/themes/drawings/textures/outrun-accent-3.svg) 0 0 / 100% 100% no-repeat; } /* Deep space: three depths of stars, a faint galactic band, and a planet's lit rim rising from the corner, which hides the stars behind it. */ [data-texture="galaxy"] { --texture: radial-gradient(circle at 112% 128%, var(--bg) 0 34%, color-mix(in srgb, var(--accent-2) 55%, transparent) 34.4%, color-mix(in srgb, var(--accent-2) 16%, transparent) 36%, transparent 42%), linear-gradient(118deg, transparent 32%, color-mix(in srgb, var(--accent-2) 5%, transparent) 44%, color-mix(in srgb, var(--accent-3) 8%, transparent) 50%, color-mix(in srgb, var(--accent-2) 5%, transparent) 56%, transparent 68%); --texture-size: 100% 100%, 100% 100%; --texture-mask-text: radial-gradient(circle at 112% 128%, transparent 34%, #000 34.4%) intersect, url(/themes/drawings/shared/starfield-200.svg) 0 0 / 200px 200px, url(/themes/drawings/shared/starfield-320.svg) 0 0 / 320px 320px, url(/themes/drawings/shared/starfield-530.svg) 0 0 / 530px 530px; } /* A console's quiet readout: segments in the accent, accent-2, peach (warn mixed with link-missing) and accent-3 down the page's right edge, with ticks. */ [data-texture="readout"] { --texture-mask-accent: url(/themes/drawings/textures/readout-accent.svg) 0 0 / 100% 800px repeat-y; --texture-mask-accent-2: url(/themes/drawings/textures/readout-accent-2.svg) 0 0 / 100% 800px repeat-y; --texture-mask-accent-3: url(/themes/drawings/textures/readout-accent-3.svg) 0 0 / 100% 800px repeat-y; --texture-mask-text: url(/themes/drawings/textures/readout-peach.svg) 0 0 / 100% 800px repeat-y; --texture-lit-mask: var(--texture-mask-accent), var(--texture-mask-accent-2), var(--texture-mask-accent-3); --texture-layer-motion: theme-roll-up 90s linear infinite; --texture-ink-text: color-mix(in srgb, var(--warn), var(--link-missing)); } /* Stained glass: a round stained-glass window rising from the foot of the page under a night sky of faint stars: a silver rim, a ring of lancets with a star in each, a blue field of leaded panes, silver scrollwork, and three medallions (accent, accent-2 and accent-3) round a small jewel. Each layer's drawing carries the glass's own shading as its strength, so a pane keeps its light and dark under the theme's colour; the leading is the border layer, nearly black. The pane colours are mottled and streaked like cathedral glass. */ [data-texture="stained-glass"] { --glass-at: left 50% bottom -420px / 1120px 1120px no-repeat; --glass-grain: repeating-conic-gradient(from 3deg at 50% calc(100% - 140px), transparent 0 7deg, rgba(0, 0, 0, 0.2) 7deg 11deg, color-mix(in srgb, var(--text) 6%, transparent) 11deg 16deg, rgba(0, 0, 0, 0.08) 16deg 23deg), repeating-linear-gradient(68deg, color-mix(in srgb, var(--text) 9%, transparent) 0 2px, transparent 2px 11px, rgba(0, 0, 0, 0.14) 11px 13px, transparent 13px 23px), repeating-radial-gradient(circle at 22% 64%, transparent 0 9px, color-mix(in srgb, var(--text) 7%, transparent) 9px 13px, transparent 13px 27px), repeating-radial-gradient(circle at 76% 28%, transparent 0 15px, rgba(0, 0, 0, 0.16) 15px 21px, transparent 21px 37px); --texture: radial-gradient(circle at 50% calc(100% - 140px), color-mix(in srgb, var(--accent-2) 18%, transparent), transparent 75vmax), radial-gradient(1px 1px at 23px 41px, color-mix(in srgb, var(--text) 50%, transparent), transparent), radial-gradient(1px 1px at 131px 97px, color-mix(in srgb, var(--text) 35%, transparent), transparent), radial-gradient(1.5px 1.5px at 171px 17px, color-mix(in srgb, var(--accent) 55%, transparent), transparent); --texture-size: 100% 100%, 210px 210px, 210px 210px, 210px 210px; --texture-mask-border: url(/themes/drawings/textures/stained-glass-border.svg) var(--glass-at); --texture-ink-border: color-mix(in srgb, var(--bg) 55%, #000); --texture-mask-text: url(/themes/drawings/textures/stained-glass-text.svg) var(--glass-at); --texture-ink-text: var(--glass-grain), radial-gradient(circle 580px at 50% calc(100% - 140px), var(--text), color-mix(in srgb, var(--text) 78%, transparent)); --texture-mask-accent-3: url(/themes/drawings/textures/stained-glass-accent-3.svg) var(--glass-at); --texture-ink-accent-3: var(--glass-grain), radial-gradient(circle 580px at 50% calc(100% - 140px), color-mix(in srgb, var(--accent-3) 80%, var(--text)), var(--accent-3) 45%, color-mix(in srgb, var(--accent-3) 70%, #000)); --texture-mask-accent-2: url(/themes/drawings/textures/stained-glass-accent-2.svg) var(--glass-at); --texture-ink-accent-2: var(--glass-grain), radial-gradient(circle 580px at 50% calc(100% - 140px), color-mix(in srgb, var(--accent-2) 80%, var(--text)), var(--accent-2) 45%, color-mix(in srgb, var(--accent-2) 70%, #000)); --texture-mask-accent: url(/themes/drawings/textures/stained-glass-accent.svg) var(--glass-at); --texture-ink-accent: var(--glass-grain), radial-gradient(circle 580px at 50% calc(100% - 140px), color-mix(in srgb, var(--accent) 80%, var(--text)), var(--accent) 45%, color-mix(in srgb, var(--accent) 70%, #000)); } /* Crystal: a great crystal floating right of centre among three small ones, each a four-sided bipyramid turning slowly about its long axis at its own pace (the turning drawings animate themselves; the still ones stand in where nothing may move). Each crystal is clear glass of its own colour, in a layer of its own: amethyst, sapphire, rose and emerald. A face is as strong as the light it catches, the faces turned away stay faint so the stars show through, and the border layer draws the rims (the far ones faintly) and the glint on the brightest faces. A halo sits behind the cluster, an aurora drifts across the top of the page and motes of light rise through the dark. */ [data-texture="crystal"] { --texture: radial-gradient(circle 46vh at 68% 46%, color-mix(in srgb, var(--accent) 22%, transparent), transparent), radial-gradient(ellipse 70% 22% at 30% 0%, color-mix(in srgb, var(--accent-3) 14%, transparent), transparent), radial-gradient(ellipse 50% 16% at 70% 6%, color-mix(in srgb, var(--accent) 10%, transparent), transparent), radial-gradient(1.5px 1.5px at 40px 60px, color-mix(in srgb, var(--accent-2) 70%, transparent), transparent), radial-gradient(1px 1px at 150px 20px, color-mix(in srgb, var(--accent) 60%, transparent), transparent), radial-gradient(2px 2px at 90px 170px, color-mix(in srgb, var(--accent) 35%, transparent), transparent); --texture-size: 100% 100%, 100% 100%, 100% 100%, 190px 230px, 190px 230px, 190px 230px; --texture-mask-accent: var(--ambient-flow, url(/themes/drawings/textures/crystal-turn-accent.svg) left 64% center / auto 96vh no-repeat), var(--ambient-rest, url(/themes/drawings/textures/crystal-accent.svg) left 64% center / auto 96vh no-repeat); --texture-ink-accent: linear-gradient(180deg, color-mix(in srgb, var(--accent) 90%, transparent), color-mix(in srgb, var(--info) 75%, transparent)); --texture-mask-accent-2: var(--ambient-flow, url(/themes/drawings/textures/crystal-turn-accent-2.svg) left 64% center / auto 96vh no-repeat), var(--ambient-rest, url(/themes/drawings/textures/crystal-accent-2.svg) left 64% center / auto 96vh no-repeat); --texture-ink-accent-2: linear-gradient(180deg, color-mix(in srgb, color-mix(in srgb, var(--danger) 70%, var(--accent-3)) 90%, transparent), color-mix(in srgb, var(--danger) 70%, transparent)); --texture-mask-accent-3: var(--ambient-flow, url(/themes/drawings/textures/crystal-turn-accent-3.svg) left 64% center / auto 96vh no-repeat), var(--ambient-rest, url(/themes/drawings/textures/crystal-accent-3.svg) left 64% center / auto 96vh no-repeat); --texture-ink-accent-3: linear-gradient(180deg, color-mix(in srgb, color-mix(in srgb, var(--accent-3) 45%, var(--special)) 90%, transparent), color-mix(in srgb, var(--special) 70%, transparent)); --texture-mask-border: var(--ambient-flow, url(/themes/drawings/textures/crystal-turn-border.svg) left 64% center / auto 96vh no-repeat), var(--ambient-rest, url(/themes/drawings/textures/crystal-border.svg) left 64% center / auto 96vh no-repeat); --texture-ink-border: color-mix(in srgb, var(--text) 80%, transparent); --texture-mask-text: var(--ambient-flow, url(/themes/drawings/textures/crystal-turn-text.svg) left 64% center / auto 96vh no-repeat), var(--ambient-rest, url(/themes/drawings/textures/crystal-text.svg) left 64% center / auto 96vh no-repeat); --texture-ink-text: linear-gradient(180deg, color-mix(in srgb, color-mix(in srgb, var(--success) 70%, var(--text)) 90%, transparent), color-mix(in srgb, var(--success) 75%, transparent)); } /* Dither: a 16-bit sky, accent-2 in hard bands growing stronger toward the foot, with a two-pixel checker dithering the bands together. */ [data-texture="dither"] { --texture: linear-gradient(180deg, transparent 0 40%, color-mix(in srgb, var(--accent-2) 6%, transparent) 40% 55%, color-mix(in srgb, var(--accent-2) 10%, transparent) 55% 70%, color-mix(in srgb, var(--accent-2) 15%, transparent) 70% 85%, color-mix(in srgb, var(--accent-2) 20%, transparent) 85%); --texture-size: 100% 100%; --texture-mask-accent-2: linear-gradient(180deg, transparent 30%, #000); --texture-ink-accent-2: repeating-conic-gradient(color-mix(in srgb, var(--accent-2) 12%, transparent) 0 25%, transparent 0 50%) 0 0 / 4px 4px; } /* Nightfall: a city at night as a phantom thief sees it. A huge moon in the text colour, its lower limb broken into halftone, rises behind two rows of towers: the far row dark red, the near row in the page colour with its windows lit in accent-2. A bright accent band sweeps up across the page at a slant behind them, ruled with fine darker lines and edged by long accent-2 stripes, and accent-2 stars are scattered above. */ [data-texture="nightfall"] { --texture: radial-gradient(circle 46vmax at 74% 62%, color-mix(in srgb, var(--accent) 14%, transparent), transparent), radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.5)); --texture-size: 100% 100%, 100% 100%; --texture-mask-border: linear-gradient(164deg, transparent 0 49%, #000 49% 66%, transparent 66%); --texture-ink-border: repeating-linear-gradient(164deg, var(--accent) 0 26px, color-mix(in srgb, var(--accent) 72%, #000) 26px 28px); --texture-mask-text: url(/themes/drawings/textures/nightfall-text.svg) center bottom / cover no-repeat; --texture-ink-text: radial-gradient(circle 32vmax at 74% 54%, var(--text), color-mix(in srgb, var(--text) 82%, transparent)); --texture-mask-accent-3: url(/themes/drawings/textures/nightfall-accent-3.svg) center bottom / cover no-repeat; --texture-ink-accent-3: linear-gradient(0deg, color-mix(in srgb, var(--accent) 14%, var(--bg)), color-mix(in srgb, var(--accent) 30%, var(--bg)) 55%); --texture-mask-accent-2: url(/themes/drawings/textures/nightfall-accent-2.svg) center bottom / cover no-repeat; --texture-ink-accent-2: color-mix(in srgb, var(--accent-2) 62%, transparent); --texture-mask-accent: url(/themes/drawings/textures/nightfall-accent.svg) center bottom / cover no-repeat; --texture-ink-accent: var(--bg); } /* Overworld: a pixel world map seen from above, as in an old console role-playing game: seas in accent-3 with wave dashes, grassland in accent-2 with pine forests in a darker green, ranges of mountains in the text colour, and beaches, towns and castles in the accent. The map wraps, so it tiles without a seam; it is fainter under the sidebar, so its labels stay easy to read. */ [data-texture="overworld"] { --texture: radial-gradient(ellipse 70% 60% at 50% 40%, color-mix(in srgb, var(--bg) 55%, transparent), transparent), linear-gradient(color-mix(in srgb, #000 18%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, #000 18%, transparent) 1px, transparent 1px); --texture-size: 100% 100%, 16px 16px, 16px 16px; --texture-mask-accent: url(/themes/drawings/textures/overworld-accent.svg) 0 0 / 1024px 640px; --texture-ink-accent: linear-gradient(90deg, color-mix(in srgb, var(--accent) 10%, transparent) 0 300px, color-mix(in srgb, var(--accent) 30%, transparent) 460px); --texture-mask-accent-2: url(/themes/drawings/textures/overworld-accent-2.svg) 0 0 / 1024px 640px; --texture-ink-accent-2: linear-gradient(90deg, color-mix(in srgb, var(--accent-2) 8%, transparent) 0 300px, color-mix(in srgb, var(--accent-2) 22%, transparent) 460px); --texture-mask-accent-3: url(/themes/drawings/textures/overworld-accent-3.svg) 0 0 / 1024px 640px; --texture-ink-accent-3: linear-gradient(90deg, color-mix(in srgb, var(--accent-3) 9%, transparent) 0 300px, color-mix(in srgb, var(--accent-3) 24%, transparent) 460px); --texture-mask-border: url(/themes/drawings/textures/overworld-border.svg) 0 0 / 1024px 640px; --texture-ink-border: linear-gradient(90deg, color-mix(in srgb, var(--accent-2) 12%, transparent) 0 300px, color-mix(in srgb, var(--accent-2) 42%, #000) 460px); --texture-mask-text: url(/themes/drawings/textures/overworld-text.svg) 0 0 / 1024px 640px; --texture-ink-text: linear-gradient(90deg, color-mix(in srgb, var(--text) 8%, transparent) 0 300px, color-mix(in srgb, var(--text) 26%, transparent) 460px); } /* Skyward: a dusk sky over floating islands, as in a modern console role-playing game. The sun sets behind a sea of cloud, its rays fanning up the page in the accent; a far bank of cloud in accent-3, distant islands, an airship and sparkles in the text colour, near islands dark against the sunset with waterfalls of accent-2 pouring from them into the cloud. Under the sidebar the sky is clear and the near islands faint, so its labels stay easy to read. */ [data-texture="skyward"] { --texture: linear-gradient(180deg, var(--bg) 0, color-mix(in srgb, var(--accent-2) 10%, var(--bg)) 45%, color-mix(in srgb, var(--accent-3) 26%, var(--bg)) 78%, color-mix(in srgb, var(--accent) 20%, var(--bg))), radial-gradient(ellipse 40% 30% at 64% 70%, color-mix(in srgb, var(--accent) 22%, transparent), transparent); --texture-size: 100% 100%, 100% 100%; --texture-mask-border: url(/themes/drawings/textures/skyward-border.svg) center bottom / 1600px 900px no-repeat; --texture-ink-border: color-mix(in srgb, var(--accent-3) 34%, transparent); --texture-mask-text: url(/themes/drawings/textures/skyward-text.svg) center bottom / 1600px 900px no-repeat intersect, linear-gradient(90deg, transparent 0 300px, #000 380px); --texture-ink-text: linear-gradient(0deg, color-mix(in srgb, var(--accent-3) 30%, transparent) 0 300px, color-mix(in srgb, var(--accent-2) 22%, transparent) 500px, color-mix(in srgb, var(--text) 55%, transparent) 600px); --texture-mask-accent-3: url(/themes/drawings/textures/skyward-accent-3.svg) center bottom / 1600px 900px no-repeat intersect, linear-gradient(90deg, rgba(0, 0, 0, .3) 0 300px, #000 460px); --texture-ink-accent-3: linear-gradient(180deg, color-mix(in srgb, var(--accent-3) 30%, var(--bg)), var(--bg) 160px) left 0 top calc(100% - 280px) / 100% 100% no-repeat, var(--bg); --texture-mask-accent-2: url(/themes/drawings/textures/skyward-accent-2.svg) center bottom / 1600px 900px no-repeat, url(/themes/drawings/shared/mottle.svg) 0 0 / 1600px 600px intersect, linear-gradient(180deg, transparent 20%, rgba(0, 0, 0, .5) 50%, transparent 75%); --texture-ink-accent-2: color-mix(in srgb, var(--accent-2) 30%, transparent); --texture-mask-accent: repeating-conic-gradient(from -80deg at 64% 72%, #000 0 3deg, transparent 3deg 10deg) intersect, radial-gradient(ellipse 55% 65% at 64% 72%, rgba(0, 0, 0, .8), transparent 72%); --texture-ink-accent: color-mix(in srgb, var(--accent) 12%, transparent); } /* Watercolour: washes of accent-2 and accent-3 bled into the page, darker toward its edges; the cards are grained. Each wash is stretched over the whole window rather than tiled, so it reads as one painted page. */ [data-texture="watercolor"] { --texture: radial-gradient(ellipse at 50% 40%, transparent 60%, color-mix(in srgb, var(--accent-3) 10%, transparent) 100%); --texture-size: 100% 100%; --texture-mask-accent-2: url(/themes/drawings/shared/clouds-600.svg) 0 0 / 100% 100%; --texture-ink-accent-2: color-mix(in srgb, var(--accent-2) 14%, transparent); --texture-mask-accent-3: url(/themes/drawings/shared/clouds-800.svg) 0 0 / 100% 100%; --texture-ink-accent-3: color-mix(in srgb, var(--accent-3) 9%, transparent); --card-mask-grain: url(/themes/drawings/shared/noise.svg) 0 0 / 180px 180px; --card-ink-grain: color-mix(in srgb, var(--text) 6%, transparent); } /* Marble: a page veined like stone, with a band of the rail's slate down the right edge lined in accent-2. */ [data-texture="marble"] { --texture: linear-gradient(90deg, transparent calc(100% - 18px), color-mix(in srgb, var(--accent-2) 70%, transparent) calc(100% - 18px) calc(100% - 16px), color-mix(in srgb, var(--rail-bg) 90%, transparent) calc(100% - 16px)); --texture-size: 100% 100%; --texture-mask-text: url(/themes/drawings/shared/clouds-500.svg) 0 0 / 500px 500px; --texture-ink-text: color-mix(in srgb, var(--text) 5%, transparent); --texture-mask-accent-3: url(/themes/drawings/textures/marble-veins.svg) 0 0 / 600px 600px; --texture-ink-accent-3: color-mix(in srgb, var(--accent-3) 14%, transparent); } /* Spires: a city of gothic spires, a cathedral with a rose window and a gargoyle on its pinnacle, black against a blood-red glow at the foot of the page, its windows lit in the warning colour, a bone moon above and rain. Storm cloud rolls across the top of the page and a red mist lies in the streets. */ [data-texture="spires"] { --texture: repeating-linear-gradient(100deg, transparent 0 13px, color-mix(in srgb, var(--text) 5%, transparent) 13px 14px), radial-gradient(ellipse 80% 45% at 50% 100%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 80%), radial-gradient(ellipse 60% 40% at 50% 0%, color-mix(in srgb, var(--accent-3) 5%, transparent), transparent); --texture-size: 100% 100%, 100% 100%, 100% 100%; --texture-mask-border: url(/themes/drawings/textures/spires-border.svg) left bottom / 1600px 520px repeat-x; --texture-ink-border: linear-gradient(0deg, var(--bg) 0 30%, color-mix(in srgb, var(--accent) 10%, var(--bg))); --texture-mask-text: url(/themes/drawings/textures/spires-text.svg) left bottom / 1600px 520px repeat-x; --texture-ink-text: color-mix(in srgb, var(--warn) 60%, transparent); --texture-mask-accent-3: url(/themes/drawings/textures/spires-accent-3.svg) right 8vw top 6vh / 220px 220px no-repeat; --texture-ink-accent-3: radial-gradient(circle 240px at calc(100% - 8vw - 110px) calc(6vh + 110px), color-mix(in srgb, var(--accent-3) 34%, transparent), color-mix(in srgb, var(--accent-3) 14%, transparent)); --texture-mask-accent-2: url(/themes/drawings/shared/mottle.svg) 0 0 / 1400px 900px intersect, linear-gradient(180deg, rgba(0, 0, 0, .9), transparent 50%); --texture-ink-accent-2: color-mix(in srgb, var(--text) 9%, transparent); --texture-mask-accent: url(/themes/drawings/shared/mottle.svg) 300px 200px / 1100px 700px intersect, linear-gradient(0deg, #000, transparent 300px); --texture-ink-accent: color-mix(in srgb, var(--accent) 24%, transparent); } /* Dragonflight: dragons wheeling across the sky in the accent, accent-2 and accent-3, silver threads falling through them in the text colour, and a ridge of cliffs cut with cave mouths along the foot of the page. The cliffs are banded rock lit from the sky, and clouds drift behind the dragons. */ [data-texture="dragonflight"] { --texture: linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 45%, color-mix(in srgb, var(--warn) 10%, transparent)), radial-gradient(ellipse 70% 50% at 70% 10%, color-mix(in srgb, var(--accent-2) 8%, transparent), transparent); --texture-size: 100% 100%, 100% 100%; --texture-mask-accent: url(/themes/drawings/textures/dragonflight-accent.svg) center bottom / 1600px 1000px no-repeat; --texture-ink-accent: color-mix(in srgb, var(--accent) 34%, transparent); --texture-mask-accent-2: url(/themes/drawings/textures/dragonflight-accent-2.svg) center bottom / 1600px 1000px no-repeat; --texture-ink-accent-2: color-mix(in srgb, var(--accent-2) 30%, transparent); --texture-mask-accent-3: url(/themes/drawings/textures/dragonflight-accent-3.svg) center bottom / 1600px 1000px no-repeat, url(/themes/drawings/shared/mottle.svg) 0 0 / 1500px 1000px intersect, linear-gradient(180deg, rgba(0, 0, 0, .4), transparent 65%); --texture-ink-accent-3: color-mix(in srgb, var(--accent-3) 30%, transparent); --texture-mask-text: url(/themes/drawings/textures/dragonflight-text.svg) center bottom / 1600px 1000px no-repeat; --texture-ink-text: color-mix(in srgb, var(--text) 24%, transparent); --texture-mask-border: url(/themes/drawings/textures/dragonflight-border.svg) center bottom / 1600px 1000px repeat-x intersect, url(/themes/drawings/shared/strata.svg) 0 100% / 900px 260px, linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)); --texture-ink-border: linear-gradient(0deg, color-mix(in srgb, var(--border) 20%, transparent), color-mix(in srgb, var(--accent) 30%, var(--border)) 300px); } /* Plot: a plotting scope in the lower right, range rings and a bearing ring in the border colour, a sweep of the accent, contacts in the accent and friendly ships in accent-2, over a faint chart grid. Scan lines and screen grain run across the whole page, brighter around the scope. */ [data-texture="plot"] { --texture: conic-gradient(from 300deg at calc(100% - 300px) calc(100% - 300px), transparent 0deg, color-mix(in srgb, var(--accent) 20%, transparent) 46deg, transparent 47deg), radial-gradient(circle 460px at calc(100% - 300px) calc(100% - 300px), color-mix(in srgb, var(--accent) 9%, transparent), transparent), repeating-linear-gradient(180deg, transparent 0 2px, rgba(0, 0, 0, .18) 2px 3px), linear-gradient(color-mix(in srgb, var(--text) 4%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--text) 4%, transparent) 1px, transparent 1px), radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0, 0, 0, .35)); --texture-size: 100% 100%, 100% 100%, 100% 100%, 48px 48px, 48px 48px, 100% 100%; --texture-mask-border: url(/themes/drawings/textures/plot-border.svg) right -150px bottom -150px / 900px 900px no-repeat; --texture-ink-border: color-mix(in srgb, var(--accent) 34%, transparent); --texture-mask-accent: url(/themes/drawings/textures/plot-accent.svg) right -150px bottom -150px / 900px 900px no-repeat; --texture-ink-accent: color-mix(in srgb, var(--accent) 75%, transparent); --texture-mask-accent-2: url(/themes/drawings/textures/plot-accent-2.svg) right -150px bottom -150px / 900px 900px no-repeat; --texture-ink-accent-2: color-mix(in srgb, var(--accent-2) 65%, transparent); --texture-mask-text: url(/themes/drawings/shared/grit.svg) 0 0 / 240px 240px intersect, radial-gradient(circle 700px at calc(100% - 300px) calc(100% - 300px), rgba(0, 0, 0, .9), rgba(0, 0, 0, .25)); --texture-ink-text: color-mix(in srgb, var(--accent) 7%, transparent); } /* Seance: a ritual chart on the right of the page, its rings, hexagram and open eye in the accent, a sign in each house in the text colour, ectoplasm rising through it in accent-2, and a gaslight haze in the top left. Smoke curls through the gaslight and the page darkens toward its edges. */ [data-texture="seance"] { --texture: radial-gradient(circle 60vh at 0% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent), radial-gradient(circle 440px at calc(100% - 290px) 50%, color-mix(in srgb, var(--accent-2) 9%, transparent), transparent), radial-gradient(ellipse at 45% 50%, transparent 50%, rgba(0, 0, 0, .4)); --texture-size: 100% 100%, 100% 100%, 100% 100%; --texture-mask-accent: url(/themes/drawings/textures/seance-accent.svg) right -120px center / 820px 820px no-repeat; --texture-ink-accent: color-mix(in srgb, var(--accent) 34%, transparent); --texture-mask-text: url(/themes/drawings/textures/seance-text.svg) right -120px center / 820px 820px no-repeat; --texture-ink-text: color-mix(in srgb, var(--text) 32%, transparent); --texture-mask-accent-2: url(/themes/drawings/textures/seance-accent-2.svg) right -120px center / 820px 820px no-repeat, url(/themes/drawings/shared/mottle.svg) 100% 0 / 900px 1400px intersect, radial-gradient(ellipse 30% 60% at calc(100% - 290px) 60%, rgba(0, 0, 0, .6), transparent); --texture-ink-accent-2: color-mix(in srgb, var(--accent-2) 18%, transparent); --texture-mask-accent-3: url(/themes/drawings/shared/mottle.svg) 0 0 / 1100px 800px intersect, radial-gradient(circle 70vh at 0% 0%, rgba(0, 0, 0, .8), transparent); --texture-ink-accent-3: color-mix(in srgb, var(--accent) 12%, transparent); } /* Dunes: three ridges of dunes, far in accent-3, nearer in the accent and nearest in the border colour, under an accent dusk and two moons in the text colour; the ridges wrap, so they tile across a wide window. The sand is grained and rippled by the wind, each crest catches the light, and a haze of blown sand hangs above them. */ [data-texture="dunes"] { --texture: linear-gradient(180deg, transparent 25%, color-mix(in srgb, var(--accent) 18%, transparent) 72%, transparent), radial-gradient(ellipse 50% 30% at 30% 70%, color-mix(in srgb, var(--warn) 10%, transparent), transparent); --texture-size: 100% 100%, 100% 100%; --texture-mask-accent-3: url(/themes/drawings/textures/dunes-accent-3.svg) left bottom / 1600px 600px repeat-x; --texture-ink-accent-3: linear-gradient(0deg, color-mix(in srgb, var(--accent-3) 8%, transparent), color-mix(in srgb, var(--accent-3) 20%, transparent) 600px); --texture-mask-accent: url(/themes/drawings/textures/dunes-accent.svg) left bottom / 1600px 600px repeat-x intersect, url(/themes/drawings/shared/strata.svg) 0 0 / 700px 90px, linear-gradient(rgba(0, 0, 0, .55), rgba(0, 0, 0, .55)); --texture-ink-accent: linear-gradient(0deg, color-mix(in srgb, var(--accent) 10%, transparent), color-mix(in srgb, var(--accent) 30%, transparent) 420px); --texture-mask-border: url(/themes/drawings/textures/dunes-border.svg) left bottom / 1600px 600px repeat-x intersect, url(/themes/drawings/shared/grit.svg) 0 0 / 240px 240px; --texture-ink-border: linear-gradient(0deg, color-mix(in srgb, var(--border) 55%, var(--bg)), color-mix(in srgb, var(--accent) 30%, var(--border)) 260px); --texture-mask-text: url(/themes/drawings/textures/dunes-text.svg) right 4vw top 2vh / 420px 280px no-repeat; --texture-ink-text: color-mix(in srgb, var(--accent-3) 26%, transparent); --texture-mask-accent-2: url(/themes/drawings/shared/mottle.svg) 0 40% / 1600px 500px intersect, linear-gradient(0deg, transparent 15%, rgba(0, 0, 0, .8) 45%, transparent 75%); --texture-ink-accent-2: color-mix(in srgb, var(--accent) 14%, transparent); } /* Candles: candles floating in a row across the top of the page, their wax in the text colour and their flames in the accent, each in a faint halo, under a ceiling of stars and drifting cloud, with mist along the floor. */ [data-texture="candles"] { --texture: radial-gradient(1px 1px at 30px 40px, color-mix(in srgb, var(--text) 55%, transparent), transparent), radial-gradient(1.5px 1.5px at 110px 150px, color-mix(in srgb, var(--accent) 50%, transparent), transparent), radial-gradient(1px 1px at 170px 90px, color-mix(in srgb, var(--text) 35%, transparent), transparent), linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 45%); --texture-size: 200px 200px, 200px 200px, 200px 200px, 100% 100%; --texture-mask-text: url(/themes/drawings/textures/candles-text.svg) left top / 1600px 460px repeat-x; --texture-ink-text: linear-gradient(180deg, color-mix(in srgb, var(--text) 14%, transparent), color-mix(in srgb, var(--text) 30%, transparent) 300px); --texture-mask-accent: url(/themes/drawings/textures/candles-accent.svg) left top / 1600px 460px repeat-x; --texture-ink-accent: color-mix(in srgb, var(--accent) 80%, transparent); --texture-mask-border: url(/themes/drawings/textures/candles-border.svg) left top / 1600px 460px repeat-x; --texture-ink-border: color-mix(in srgb, var(--accent) 9%, transparent); --texture-mask-accent-3: url(/themes/drawings/shared/mottle.svg) 0 0 / 1400px 900px intersect, linear-gradient(180deg, rgba(0, 0, 0, .5), transparent 40%, transparent 70%, #000); --texture-ink-accent-3: color-mix(in srgb, var(--accent-3) 12%, transparent); } /* Gears: copper gears turning in the lower left and upper right corners with smaller verdigris ones in accent-3, steam pipes in accent-2 along their edges, and a haze of steam. The gears are pitted and lit from above. */ [data-texture="gears"] { --texture: radial-gradient(ellipse 50% 35% at 15% 100%, color-mix(in srgb, var(--text) 8%, transparent), transparent), radial-gradient(ellipse 40% 30% at 90% 0%, color-mix(in srgb, var(--text) 6%, transparent), transparent), repeating-linear-gradient(90deg, transparent 0 79px, color-mix(in srgb, var(--accent) 3%, transparent) 79px 80px); --texture-size: 100% 100%, 100% 100%, 100% 100%; --texture-mask-accent: url(/themes/drawings/shared/grit.svg) 0 0 / 240px 240px intersect, url(/themes/drawings/textures/gears-accent.svg) left calc(var(--rail-w) + var(--side-w) - 200px) bottom -230px / 760px 760px no-repeat, url(/themes/drawings/textures/gears-accent.svg) right -220px top -260px / 560px 560px no-repeat; --texture-ink-accent: linear-gradient(160deg, color-mix(in srgb, var(--accent) 34%, transparent), color-mix(in srgb, var(--accent) 14%, transparent) 55%, color-mix(in srgb, var(--accent) 24%, transparent)); --texture-mask-accent-3: url(/themes/drawings/shared/grit.svg) 0 0 / 240px 240px intersect, url(/themes/drawings/textures/gears-accent-3.svg) left calc(var(--rail-w) + var(--side-w) - 200px) bottom -230px / 760px 760px no-repeat, url(/themes/drawings/textures/gears-accent-3.svg) right -220px top -260px / 560px 560px no-repeat; --texture-ink-accent-3: color-mix(in srgb, var(--accent-3) 22%, transparent); --texture-mask-accent-2: url(/themes/drawings/textures/gears-accent-2.svg) left calc(var(--rail-w) + var(--side-w) - 200px) bottom -230px / 760px 760px no-repeat; --texture-ink-accent-2: color-mix(in srgb, var(--accent-2) 18%, transparent); --texture-mask-text: url(/themes/drawings/shared/mottle.svg) 0 0 / 1200px 800px intersect, radial-gradient(ellipse 45% 55% at 30% 90%, rgba(0, 0, 0, .8), transparent), radial-gradient(ellipse 40% 45% at 92% 8%, rgba(0, 0, 0, .7), transparent); --texture-ink-text: color-mix(in srgb, var(--text) 9%, transparent); } /* Mesa: flat-topped mesas in accent-2 and saguaros in accent-3 along the foot of the page under a low sun of the accent, on sun-faded paper. The mesas are banded rock, and dust clouds trail across the sky. */ [data-texture="mesa"] { --texture: radial-gradient(circle 180px at 72% calc(100% - 210px), color-mix(in srgb, var(--accent) 18%, transparent) 0 70%, transparent 71%), radial-gradient(circle 420px at 72% calc(100% - 210px), color-mix(in srgb, var(--accent) 10%, transparent), transparent), repeating-linear-gradient(180deg, transparent 0 5px, color-mix(in srgb, var(--accent-2) 3%, transparent) 5px 6px); --texture-size: 100% 100%, 100% 100%, 100% 100%; --texture-mask-accent-2: url(/themes/drawings/textures/mesa-accent-2.svg) left bottom / 1600px 500px repeat-x intersect, url(/themes/drawings/shared/strata.svg) 0 100% / 900px 160px, linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .6)); --texture-ink-accent-2: linear-gradient(0deg, color-mix(in srgb, var(--accent-2) 18%, transparent), color-mix(in srgb, var(--accent-2) 34%, transparent) 360px); --texture-mask-accent-3: url(/themes/drawings/textures/mesa-accent-3.svg) left bottom / 1600px 500px repeat-x; --texture-ink-accent-3: color-mix(in srgb, var(--accent-3) 34%, transparent); --texture-mask-text: url(/themes/drawings/shared/grit.svg) 0 0 / 240px 240px, url(/themes/drawings/shared/mottle.svg) 0 0 / 1600px 700px intersect, linear-gradient(180deg, rgba(0, 0, 0, .4), transparent 45%); --texture-ink-text: color-mix(in srgb, var(--accent-2) 7%, transparent); } /* Ruins: the broken skyline of a dead city in accent-3, its windows blown out, bent girders and a fallen overpass in the text colour, under a haze of the accent's yellow dust. The concrete is pitted, smoke rises from the skyline and the dust drifts in banks. */ [data-texture="ruins"] { --texture: linear-gradient(180deg, transparent 20%, color-mix(in srgb, var(--accent) 12%, transparent) 70%, transparent), radial-gradient(1px 1px at 20px 30px, color-mix(in srgb, var(--text) 18%, transparent), transparent), radial-gradient(1px 1px at 80px 110px, color-mix(in srgb, var(--text) 14%, transparent), transparent); --texture-size: 100% 100%, 120px 140px, 120px 140px; --texture-mask-accent-3: url(/themes/drawings/textures/ruins-accent-3.svg) left bottom / 1600px 560px repeat-x intersect, url(/themes/drawings/shared/grit.svg) 0 0 / 240px 240px; --texture-ink-accent-3: linear-gradient(0deg, color-mix(in srgb, var(--accent-3) 14%, transparent), color-mix(in srgb, var(--accent-3) 32%, transparent) 500px); --texture-mask-text: url(/themes/drawings/textures/ruins-text.svg) left bottom / 1600px 560px repeat-x; --texture-ink-text: color-mix(in srgb, var(--text) 14%, transparent); --texture-mask-accent: url(/themes/drawings/shared/mottle.svg) 0 0 / 1500px 1000px intersect, linear-gradient(0deg, transparent 10%, rgba(0, 0, 0, .9) 40%, transparent 85%); --texture-ink-accent: color-mix(in srgb, var(--accent) 11%, transparent); --texture-mask-border: url(/themes/drawings/shared/mottle.svg) 500px 0 / 700px 1300px intersect, linear-gradient(0deg, transparent 25%, #000 60%, transparent); --texture-ink-border: color-mix(in srgb, var(--text) 7%, transparent); } /* Haze: a title screen. Smoke drifting through a room lit from above, a vignette, letterbox bars across the top and bottom of the page (--letterbox-h, drawn by the shell; charcoal in the rail's colour on a light page, pale grey on a dark one, each shading toward the page at its inner edge and ending on a hairline, with a yellow slab and a run of ticks at opposite ends), a faint grid of dots with a register cross, a few printer's marks (one strip of hatching, rules, arrowheads) across a pale diagonal band, and a wireframe shell hanging from the top of the page with a smaller one far off, both in accent-2. The shells turn slowly (haze-wire-turning.svg, one turn in three minutes and in a minute and a half); under reduced motion, the browser's or the player's own, they hold still in haze-wire.svg, the turning drawing's first frame. */ [data-texture="haze"] { --letterbox: color-mix(in srgb, var(--text) 72%, var(--bg)); --letterbox-h: 48px; /* The section sidebar is dense glass over the bars and the page. */ --pagebar-bg: color-mix(in srgb, var(--surface-3) 72%, transparent); --pagebar-glass: blur(16px) saturate(1.3); --letterbox-mark: color-mix(in srgb, var(--accent-2) 62%, #000); --letterbox-ink: color-mix(in srgb, var(--letterbox) 55%, var(--bg)); --letterbox-bg: linear-gradient(var(--letterbox-ink), var(--letterbox-ink)) 0 47px / 100% 1px no-repeat, linear-gradient(var(--letterbox-ink), var(--letterbox-ink)) left 0 bottom 47px / 100% 1px no-repeat, linear-gradient(var(--letterbox-mark), var(--letterbox-mark)) 24px 41px / 112px 4px no-repeat, linear-gradient(var(--letterbox-mark), var(--letterbox-mark)) right 24px bottom 41px / 112px 4px no-repeat, linear-gradient(var(--letterbox-mark), var(--letterbox-mark)) 140px 41px / 4px 4px no-repeat, linear-gradient(var(--letterbox-mark), var(--letterbox-mark)) right 140px bottom 41px / 4px 4px no-repeat, repeating-linear-gradient(90deg, var(--letterbox-ink) 0 2px, transparent 2px 6px) right 24px top 16px / 62px 10px no-repeat, repeating-linear-gradient(90deg, var(--letterbox-ink) 0 2px, transparent 2px 6px) left 24px bottom 16px / 62px 10px no-repeat, linear-gradient(var(--letterbox) 0 26px, color-mix(in srgb, var(--letterbox) 76%, var(--bg)) 47px, transparent 47px calc(100% - 47px), color-mix(in srgb, var(--letterbox) 76%, var(--bg)) calc(100% - 47px), var(--letterbox) calc(100% - 22px)) 0 0 / 100% 100% no-repeat; --texture: radial-gradient(70% 55% at 50% 0%, color-mix(in srgb, var(--text) 7%, transparent), transparent 70%), radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, 0.55) 100%), linear-gradient(115deg, transparent 58%, color-mix(in srgb, var(--text) 3%, transparent) 58% 71%, transparent 71%); --texture-size: 100% 100%, 100% 100%, 100% 100%; --texture-mask-border: url(/themes/drawings/shared/clouds-800.svg) 0 0 / 100% 100%; --texture-ink-border: color-mix(in srgb, var(--text) 9%, transparent); --texture-mask-text: url(/themes/drawings/textures/haze-marks.svg) 0 0 / 240px 240px; --texture-ink-text: var(--border); --texture-mask-accent-2: url(/themes/drawings/textures/haze-hatch.svg) 0 0 / 1440px 720px; --texture-ink-accent-2: color-mix(in srgb, var(--accent-2) 80%, transparent); /* The shells are in accent-2 too, but on a layer of their own: Chrome stops an animated drawing when it is one of several layers of a mask. */ --texture-mask-accent-3: url(/themes/drawings/textures/haze-wire-turning.svg) center top / 1440px 720px no-repeat; --texture-ink-accent-3: var(--texture-ink-accent-2); } @media (prefers-reduced-motion: reduce) { [data-texture="haze"] { --texture-mask-accent-3: url(/themes/drawings/textures/haze-wire.svg) center top / 1440px 720px no-repeat; } } [data-reduce-motion="on"][data-texture="haze"], [data-reduce-motion="on"] [data-texture="haze"] { --texture-mask-accent-3: url(/themes/drawings/textures/haze-wire.svg) center top / 1440px 720px no-repeat; } [data-scheme="light"][data-texture="haze"] { --letterbox: var(--rail-bg); --letterbox-mark: var(--accent-2); --texture: radial-gradient(60% 55% at 50% 30%, color-mix(in srgb, #fff 85%, transparent), transparent 70%), radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, 0.16) 100%), linear-gradient(115deg, transparent 58%, color-mix(in srgb, var(--text) 3%, transparent) 58% 71%, transparent 71%); --texture-ink-border: color-mix(in srgb, var(--text) 5%, transparent); --texture-ink-text: var(--border-soft); --texture-ink-accent-2: var(--accent-2); } /* Archive: a ruled sheet with a fine dot grid, a surveyor's rings and crosshairs in the top right in the text colour, and a strip of data bars along the bottom in accent-3, as on an archive terminal. */ [data-texture="archive"] { --texture: repeating-linear-gradient(0deg, color-mix(in srgb, var(--text) 5%, transparent) 0 1px, transparent 1px 4px), radial-gradient(circle, color-mix(in srgb, var(--text) 10%, transparent) 0 1px, transparent 1.5px), radial-gradient(ellipse 60% 50% at 78% 30%, color-mix(in srgb, var(--surface) 70%, transparent), transparent); --texture-size: 100% 4px, 24px 24px, 100% 100%; --texture-mask-text: url(/themes/drawings/textures/archive-text.svg) right -220px top -200px / 900px 900px no-repeat; --texture-ink-text: color-mix(in srgb, var(--text) 13%, transparent); --texture-mask-accent-3: url(/themes/drawings/textures/archive-accent-3.svg) left 0 bottom 18px / 1200px 60px repeat-x; --texture-ink-accent-3: color-mix(in srgb, var(--accent-3) 34%, transparent); } /* Lobby: a halftone dot field, three chevrons pointing into the page on the left in the text colour, and slanted slash stripes on the right in the second accent, as in a shooter's menu. */ [data-texture="lobby"] { --texture: radial-gradient(circle, color-mix(in srgb, var(--text) 9%, transparent) 0 1px, transparent 1.6px), linear-gradient(115deg, transparent 0 64%, color-mix(in srgb, var(--text) 6%, transparent) 64%), radial-gradient(ellipse 50% 40% at 0% 100%, color-mix(in srgb, var(--accent-2) 10%, transparent), transparent); --texture-size: 14px 14px, 100% 100%, 100% 100%; --texture-mask-text: url(/themes/drawings/textures/lobby-text.svg) left -60px bottom -40px / 620px 520px no-repeat; --texture-ink-text: color-mix(in srgb, var(--text) 5%, transparent); --texture-mask-accent: url(/themes/drawings/textures/lobby-accent.svg) right 6vw top 0 / 440px 100% no-repeat; --texture-ink-accent: color-mix(in srgb, var(--accent-2) 30%, transparent); } /* Cathedral: a ruined arch and broken columns standing in fog on the right, far spires behind, and the warm glow of a fire at the arch's foot; the page darkens toward its edges. */ [data-texture="cathedral"] { --texture: radial-gradient(ellipse 30% 22% at 64% 100%, color-mix(in srgb, var(--warn) 18%, transparent), transparent), radial-gradient(ellipse 70% 60% at 62% 40%, color-mix(in srgb, var(--surface-2) 70%, transparent), transparent), radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.45)); --texture-size: 100% 100%, 100% 100%, 100% 100%; --texture-mask-text: url(/themes/drawings/textures/cathedral-text.svg) right 0 bottom 0 / 1200px 900px no-repeat; --texture-ink-text: linear-gradient(0deg, color-mix(in srgb, var(--text) 3%, transparent), color-mix(in srgb, var(--text) 7%, transparent) 50%, transparent); --texture-mask-border: url(/themes/drawings/textures/cathedral-border.svg) right 0 bottom 0 / 1200px 900px no-repeat; --texture-ink-border: linear-gradient(0deg, color-mix(in srgb, var(--border) 30%, var(--bg)), color-mix(in srgb, var(--border) 60%, var(--bg)) 40%, color-mix(in srgb, var(--border) 25%, var(--bg))); } /* Glyphs: a carved slate with a ring of runes in the accent on the right, grooves of old circuitry in the text colour, and a cold light from within. */ [data-texture="glyphs"] { --texture: radial-gradient(circle 46vmax at 80% 40%, color-mix(in srgb, var(--accent) 10%, transparent), transparent), repeating-linear-gradient(32deg, color-mix(in srgb, var(--text) 2%, transparent) 0 2px, transparent 2px 7px); --texture-size: 100% 100%, 100% 100%; --texture-mask-accent: url(/themes/drawings/textures/glyphs-accent.svg) right -180px top -80px / 1000px 1000px no-repeat; --texture-ink-accent: color-mix(in srgb, var(--accent) 26%, transparent); --texture-mask-text: url(/themes/drawings/textures/glyphs-text.svg) left 0 bottom 0 / 1200px 900px no-repeat; --texture-ink-text: color-mix(in srgb, var(--accent-3) 40%, transparent); } /* Oilpaint: loose strokes of paint in teal, rust and ochre on a dark canvas, with dry-brush trails, under a canvas weave. */ [data-texture="oilpaint"] { --texture: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.08) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.06) 0 1px, transparent 1px 3px), radial-gradient(ellipse at 50% 45%, transparent 50%, rgba(0, 0, 0, 0.5)); --texture-size: 100% 100%, 100% 100%, 100% 100%; --texture-mask-accent-3: url(/themes/drawings/textures/oilpaint-accent-3.svg) right 0 top 0 / 1200px 900px no-repeat; --texture-ink-accent-3: color-mix(in srgb, var(--accent-3) 50%, transparent); --texture-mask-accent-2: url(/themes/drawings/textures/oilpaint-accent-2.svg) right 0 bottom 0 / 1200px 900px no-repeat; --texture-ink-accent-2: color-mix(in srgb, var(--accent-2) 45%, transparent); --texture-mask-accent: url(/themes/drawings/textures/oilpaint-accent.svg) right 0 bottom 0 / 1200px 900px no-repeat; --texture-ink-accent: color-mix(in srgb, var(--accent) 34%, transparent); } /* Gridfloor: a floor grid in the accent running to a glowing horizon three fifths down the window, outlined towers in a faint accent standing on it, black above. Now and then a streak of light runs along a floor line out of the horizon or across the floor, as data moving over the grid; the streaks move inside their drawing, which --ambient-flow takes away where nothing may move. */ [data-texture="gridfloor"] { --texture: linear-gradient(180deg, transparent 0 52%, color-mix(in srgb, var(--accent) 16%, transparent) 60%, color-mix(in srgb, var(--accent) 5%, transparent) 64%, transparent 80%); --texture-size: 100% 100%; --texture-mask-accent: url(/themes/drawings/textures/gridfloor-accent.svg) 0 0 / 100% 100% no-repeat; --texture-ink-accent: linear-gradient(180deg, transparent 58%, color-mix(in srgb, var(--accent) 55%, transparent) 60%, color-mix(in srgb, var(--accent) 22%, transparent) 75%, color-mix(in srgb, var(--accent) 34%, transparent)); --texture-mask-text: url(/themes/drawings/textures/gridfloor-text.svg) left 50% top calc(60% - 104px) / 1600px 260px no-repeat; --texture-ink-text: color-mix(in srgb, var(--accent) 22%, transparent); --texture-mask-accent-3: var(--ambient-flow, url(/themes/drawings/textures/gridfloor-flow.svg) 0 0 / 100% 100% no-repeat); --texture-ink-accent-3: linear-gradient(180deg, transparent 59%, color-mix(in srgb, var(--accent) 70%, #fff) 61%); } /* Orbit: a banded gas giant rising from the lower right, lit from the upper left and sinking into the page on its night side, its soft bands and a storm in accent-3, its limb and a haze of atmosphere lit in the accent on the sun side, its rings in the accent passing behind it and across its face, over a field of stars it hides; a faint accent light at the heart a third of the way down, and accent-3 light at the lower right. */ [data-texture="orbit"] { --texture: radial-gradient(ellipse 55vmax 33vmax at 50% 33%, color-mix(in srgb, var(--accent) 9%, transparent), transparent), radial-gradient(ellipse 70vmax 45vmax at 100% 100%, color-mix(in srgb, var(--accent-3) 10%, transparent), transparent); --texture-size: 100% 100%, 100% 100%; --texture-mask-border: url(/themes/drawings/textures/orbit-border.svg) right 0 bottom 0 / 1400px 900px no-repeat; --texture-ink-border: color-mix(in srgb, color-mix(in srgb, var(--border) 85%, var(--accent-3)) 60%, var(--bg)); --texture-mask-accent-3: url(/themes/drawings/textures/orbit-accent-3.svg) right 0 bottom 0 / 1400px 900px no-repeat; --texture-ink-accent-3: color-mix(in srgb, var(--accent-3) 38%, transparent); --texture-mask-accent: url(/themes/drawings/textures/orbit-accent.svg) right 0 bottom 0 / 1400px 900px no-repeat; --texture-ink-accent: color-mix(in srgb, var(--accent) 60%, transparent); --texture-mask-text: url(/themes/drawings/textures/orbit-text.svg) 0 0 / 600px 600px subtract, url(/themes/drawings/textures/orbit-border.svg) right 0 bottom 0 / 1400px 900px no-repeat; --texture-ink-text: color-mix(in srgb, var(--text) 45%, transparent); } /* Meadow: a sunny route through the grass, as in a game about catching creatures. A sun of accent-2 and puffs of cloud in the surface colour over a far hill, and a near hill of accent-3 with tall grass on its ridge and flowers of the accent dotted down its side, along the foot of the page. */ [data-texture="meadow"] { --texture: radial-gradient(circle 64px at 84% 120px, color-mix(in srgb, var(--accent-2) 75%, transparent) 0 97%, transparent 100%), radial-gradient(circle 150px at 84% 120px, color-mix(in srgb, var(--accent-2) 26%, transparent), transparent), radial-gradient(70px 22px at 32% 90px, var(--surface) 0 96%, transparent 100%), radial-gradient(46px 26px at 35% 76px, var(--surface) 0 96%, transparent 100%), radial-gradient(60px 18px at 62% 170px, var(--surface) 0 96%, transparent 100%), radial-gradient(38px 20px at 64.5% 158px, var(--surface) 0 96%, transparent 100%), linear-gradient(180deg, var(--bg), color-mix(in srgb, var(--surface) 40%, var(--bg)) 60%); --texture-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%; --texture-mask-border: url(/themes/drawings/textures/meadow-border.svg) left bottom / 1600px 500px repeat-x; --texture-ink-border: color-mix(in srgb, var(--accent-3) 26%, var(--bg)); --texture-mask-accent-3: url(/themes/drawings/textures/meadow-accent-3.svg) left bottom / 1600px 500px repeat-x; --texture-ink-accent-3: color-mix(in srgb, var(--accent-3) 52%, var(--bg)); --texture-mask-accent: url(/themes/drawings/textures/meadow-accent.svg) left bottom / 1600px 500px repeat-x; --texture-ink-accent: color-mix(in srgb, var(--accent) 70%, var(--bg)); } /* Wireframe: a world made of data, as in a game about digital monsters. A floor of accent-2 grid lines runs to a horizon lit in accent-2, with towers of data standing on it and outlined cubes of the accent floating above; far behind, columns of ones and zeros in accent-3 fade toward the floor. */ [data-texture="wireframe"] { --texture: radial-gradient(70% 22% at 50% calc(100% - 380px), color-mix(in srgb, var(--accent-2) 16%, transparent), transparent), linear-gradient(180deg, var(--bg), color-mix(in srgb, var(--accent-2) 5%, var(--bg)) calc(100% - 390px), var(--bg) calc(100% - 370px)); --texture-size: 100% 100%, 100% 100%; --texture-mask-accent-2: url(/themes/drawings/textures/wireframe-accent-2.svg) center bottom / 1600px 900px repeat-x intersect, linear-gradient(180deg, transparent calc(100% - 380px), rgba(0, 0, 0, .25) calc(100% - 360px), #000); --texture-ink-accent-2: color-mix(in srgb, var(--accent-2) 40%, transparent); --texture-mask-border: url(/themes/drawings/textures/wireframe-border.svg) center bottom / 1600px 900px repeat-x; --texture-ink-border: linear-gradient(0deg, color-mix(in srgb, var(--accent-2) 18%, transparent) 380px, color-mix(in srgb, var(--accent-2) 4%, transparent) 700px); --texture-mask-accent: url(/themes/drawings/textures/wireframe-accent.svg) center bottom / 1600px 900px repeat-x; --texture-ink-accent: color-mix(in srgb, var(--accent) 38%, transparent); --texture-mask-accent-3: url(/themes/drawings/textures/wireframe-accent-3.svg) 0 0 / 240px 480px intersect, linear-gradient(90deg, transparent 0 300px, rgba(0, 0, 0, .6) 420px, #000) intersect, linear-gradient(180deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, .25) 40%, transparent 60%); --texture-ink-accent-3: color-mix(in srgb, var(--accent-3) 11%, transparent); } /* Eaves: a palace hall on the right, its double roof of glazed tiles in the border colour, columns, walls and hanging lanterns in the accent, painted beams in the second and third accents, on a three-tier terrace drawn in fine lines that runs the width of the window; far roofs, hills and cloud scrolls behind, a bronze censer smoking in the courtyard, and warm haze. */ [data-texture="eaves"] { --texture: radial-gradient(ellipse 40% 34% at 76% 46%, color-mix(in srgb, var(--warn) 14%, transparent), transparent), linear-gradient(180deg, color-mix(in srgb, var(--border) 18%, transparent), transparent 55%); --texture-size: 100% 100%, 100% 100%; --texture-mask-border: url(/themes/drawings/textures/eaves-border.svg) right 0 bottom 0 / 2400px 900px no-repeat; --texture-ink-border: var(--border); --texture-mask-text: url(/themes/drawings/textures/eaves-text.svg) right 0 bottom 0 / 2400px 900px no-repeat; --texture-ink-text: var(--text); --texture-mask-accent-3: url(/themes/drawings/textures/eaves-accent-3.svg) right 0 bottom 0 / 2400px 900px no-repeat; --texture-ink-accent-3: var(--accent-3); --texture-mask-accent-2: url(/themes/drawings/textures/eaves-accent-2.svg) right 0 bottom 0 / 2400px 900px no-repeat; --texture-ink-accent-2: var(--accent-2); --texture-mask-accent: url(/themes/drawings/textures/eaves-accent.svg) right 0 bottom 0 / 2400px 900px no-repeat; --texture-ink-accent: var(--accent); } /* Warbanners: ranges of mountains in the border colour falling to a misty river, three camps' swallowtail banners on a ridge, one in each accent with its emblem cut through, far banners in silhouette, and a beacon burning. */ [data-texture="warbanners"] { --texture: radial-gradient(ellipse 34% 30% at 82% 22%, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent), linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 70%, transparent), transparent 60%); --texture-size: 100% 100%, 100% 100%; --texture-mask-border: url(/themes/drawings/textures/warbanners-border.svg) right 0 bottom 0 / 1200px 900px no-repeat; --texture-ink-border: color-mix(in srgb, var(--border) 70%, var(--bg)); --texture-mask-text: url(/themes/drawings/textures/warbanners-text.svg) right 0 bottom 0 / 1200px 900px no-repeat; --texture-ink-text: var(--text); --texture-mask-accent-3: url(/themes/drawings/textures/warbanners-accent-3.svg) right 0 bottom 0 / 1200px 900px no-repeat; --texture-ink-accent-3: color-mix(in srgb, var(--accent-3) 80%, var(--bg)); --texture-mask-accent-2: url(/themes/drawings/textures/warbanners-accent-2.svg) right 0 bottom 0 / 1200px 900px no-repeat; --texture-ink-accent-2: color-mix(in srgb, var(--accent-2) 80%, var(--bg)); --texture-mask-accent: url(/themes/drawings/textures/warbanners-accent.svg) right 0 bottom 0 / 1200px 900px no-repeat; --texture-ink-accent: color-mix(in srgb, var(--accent) 80%, var(--bg)); } /* Warbanners: the banners ripple slowly in the wind, unless the reader asked for less motion or the theme stands still (the rippling drawings morph their own shapes, so the page's animation switches cannot stop them). */ @media (prefers-reduced-motion: no-preference) { [data-texture="warbanners"]:not([data-motion="still"]) { --texture-mask-accent: url(/themes/drawings/textures/warbanners-wave-accent.svg) right 0 bottom 0 / 1200px 900px no-repeat; --texture-mask-accent-2: url(/themes/drawings/textures/warbanners-wave-accent-2.svg) right 0 bottom 0 / 1200px 900px no-repeat; --texture-mask-accent-3: url(/themes/drawings/textures/warbanners-wave-accent-3.svg) right 0 bottom 0 / 1200px 900px no-repeat; } } /* Senbon: a tunnel of vermilion gates running into the dark on the right, their lit edges in the second accent and the path's stone steps in the border colour, with a glow where the tunnel ends. */ [data-texture="senbon"] { --texture: radial-gradient(ellipse 26% 30% at 80% 44%, color-mix(in srgb, var(--accent) 22%, transparent), transparent), radial-gradient(ellipse 60% 26% at 76% 100%, color-mix(in srgb, var(--warn) 10%, transparent), transparent), radial-gradient(ellipse at 40% 45%, transparent 55%, rgba(0, 0, 0, 0.5)); --texture-size: 100% 100%, 100% 100%, 100% 100%; --texture-mask-accent: url(/themes/drawings/textures/senbon-accent.svg) right 0 bottom 0 / auto 100% no-repeat; --texture-ink-accent: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #fff) 30%, color-mix(in srgb, var(--accent) 62%, var(--bg)) 95%); --texture-mask-accent-2: url(/themes/drawings/textures/senbon-accent-2.svg) right 0 bottom 0 / auto 100% no-repeat; --texture-ink-accent-2: color-mix(in srgb, var(--accent-2) 55%, transparent); --texture-mask-border: url(/themes/drawings/textures/senbon-border.svg) right 0 bottom 0 / auto 100% no-repeat; --texture-ink-border: var(--border); } /* Sansui: ink mountains, a pine and two birds in mist on washi, on the right, with a low pale sun in the accent behind the far ridge; the paper has a fine horizontal fibre. */ [data-texture="sansui"] { --texture: repeating-linear-gradient(0deg, color-mix(in srgb, var(--text) 3%, transparent) 0 1px, transparent 1px 5px), repeating-linear-gradient(0deg, color-mix(in srgb, var(--text) 2%, transparent) 0 2px, transparent 2px 23px), radial-gradient(ellipse 70% 60% at 30% 20%, color-mix(in srgb, var(--surface) 60%, transparent), transparent); --texture-size: 100% 100%, 100% 100%, 100% 100%; --texture-mask-text: url(/themes/drawings/textures/sansui-text.svg) right 0 bottom 0 / auto 100% no-repeat; --texture-ink-text: color-mix(in srgb, var(--text) 85%, transparent); --texture-mask-border: url(/themes/drawings/textures/sansui-border.svg) right 0 bottom 0 / auto 100% no-repeat; --texture-ink-border: color-mix(in srgb, var(--accent) 34%, transparent); } /* Skyline: a pale sky that warms to dusk low down, Fuji, a lit lattice tower in the accent and white, and a city across the whole width: a solid back row and a front row with lit windows. */ [data-texture="skyline"] { --texture: radial-gradient(circle at 82% 66%, color-mix(in srgb, var(--warn) 22%, #fff) 0, transparent 26%), linear-gradient(180deg, var(--bg) 0, var(--bg) 22%, color-mix(in srgb, var(--accent-3) 16%, var(--bg)) 46%, color-mix(in srgb, var(--accent) 20%, var(--bg)) 70%, color-mix(in srgb, var(--warn) 30%, var(--bg)) 92%); --texture-size: 100% 100%, 100% 100%; --texture-mask-border: url(/themes/drawings/textures/skyline-border.svg) right 0 bottom 0 / auto 100% no-repeat; --texture-ink-border: linear-gradient(180deg, color-mix(in srgb, color-mix(in srgb, var(--accent-3) 78%, var(--accent)) 52%, var(--bg)) 45%, color-mix(in srgb, color-mix(in srgb, var(--accent-3) 62%, var(--accent)) 52%, var(--bg))); --texture-mask-text: url(/themes/drawings/textures/skyline-text.svg) right 0 bottom 0 / auto 100% no-repeat; --texture-ink-text: color-mix(in srgb, var(--text) 52%, var(--accent-3)); --texture-mask-accent-3: url(/themes/drawings/textures/skyline-accent-3.svg) right 0 bottom 0 / auto 100% no-repeat; --texture-ink-accent-3: color-mix(in srgb, var(--accent) 80%, #fff); --texture-mask-accent-2: url(/themes/drawings/textures/skyline-accent-2.svg) right 0 bottom 0 / auto 100% no-repeat; --texture-ink-accent-2: linear-gradient(180deg, color-mix(in srgb, var(--text) 80%, var(--accent-3)) 70%, var(--text)); --texture-mask-accent: url(/themes/drawings/textures/skyline-accent.svg) right 0 bottom 0 / auto 100% no-repeat; --texture-ink-accent: color-mix(in srgb, var(--warn) 16%, #fff); } /* Nightline: the same city after dark across the whole width, under a deep sky with a warm glow low down, Fuji dim behind the tower, and more windows lit. */ [data-texture="nightline"] { --texture: radial-gradient(circle, color-mix(in srgb, var(--text) 40%, transparent) 0 0.8px, transparent 1.2px), radial-gradient(circle at 82% 70%, color-mix(in srgb, var(--accent) 20%, transparent) 0, transparent 30%), linear-gradient(180deg, var(--bg) 0, var(--bg) 30%, color-mix(in srgb, var(--accent-3) 14%, var(--bg)) 62%, color-mix(in srgb, var(--accent) 18%, var(--bg)) 90%); --texture-size: 173px 131px, 100% 100%, 100% 100%; --texture-mask-border: url(/themes/drawings/textures/nightline-border.svg) right 0 bottom 0 / auto 100% no-repeat; --texture-ink-border: color-mix(in srgb, var(--accent-3) 26%, var(--bg)); --texture-mask-text: url(/themes/drawings/textures/nightline-text.svg) right 0 bottom 0 / auto 100% no-repeat; --texture-ink-text: color-mix(in srgb, var(--accent-3) 9%, var(--bg)); --texture-mask-accent-3: url(/themes/drawings/textures/nightline-accent-3.svg) right 0 bottom 0 / auto 100% no-repeat; --texture-ink-accent-3: var(--accent); --texture-mask-accent-2: url(/themes/drawings/textures/nightline-accent-2.svg) right 0 bottom 0 / auto 100% no-repeat; --texture-ink-accent-2: color-mix(in srgb, var(--bg) 60%, #000); --texture-mask-accent: url(/themes/drawings/textures/nightline-accent.svg) right 0 bottom 0 / auto 100% no-repeat; --texture-ink-accent: color-mix(in srgb, var(--warn) 35%, #fff); } /* The readout column rolls upward one tile per loop, so it never jumps. */ @keyframes theme-roll-up { from { mask-position: 0 0; } to { mask-position: 0 -800px; } } /* ── What each texture offers an atmosphere's light (--texture-lit-mask), and where a turning light turns (--texture-lit-at). Set after the textures, so they read the texture's own masks. ── */ [data-texture="crystal"] { --texture-lit-mask: var(--texture-mask-accent), var(--texture-mask-accent-2), var(--texture-mask-accent-3), var(--texture-mask-text); } [data-texture="outrun"] { --texture-lit-mask: var(--texture-mask-accent); } [data-texture="spotlights"] { --texture-lit-mask: var(--texture-mask-accent), var(--texture-mask-accent-2), var(--texture-mask-accent-3); } [data-texture="plot"] { --texture-lit-mask: url(/themes/drawings/textures/plot-blips.svg) right -150px bottom -150px / 900px 900px no-repeat; --texture-lit-at: calc(100% - 300px) calc(100% - 300px); } [data-texture="sigil"] { --texture-lit-mask: var(--texture-mask-text), var(--texture-mask-accent); } [data-texture="stained-glass"] { --texture-lit-mask: var(--texture-mask-accent), var(--texture-mask-accent-2), var(--texture-mask-accent-3), var(--texture-mask-text); } [data-texture="armor-panels"] { --texture-lit-mask: var(--texture-mask-border); } [data-texture="starburst"] { --texture-lit-mask: var(--texture-mask-accent), var(--texture-mask-accent-2), var(--texture-mask-accent-3); } [data-texture="hazard"] { --texture-lit-mask: var(--texture-mask-accent-2); } [data-texture="scanlines"] { --texture-lit-mask: repeating-linear-gradient(0deg, #000 0 1px, transparent 1px 4px); } /* Under a turning radar beam the plot's own still beam goes, so only the moving one shows. */ [data-texture="plot"][data-atmosphere="radar"] { --texture: radial-gradient(circle 460px at calc(100% - 300px) calc(100% - 300px), color-mix(in srgb, var(--accent) 9%, transparent), transparent), repeating-linear-gradient(180deg, transparent 0 2px, rgba(0, 0, 0, .18) 2px 3px), linear-gradient(color-mix(in srgb, var(--text) 4%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--text) 4%, transparent) 1px, transparent 1px), radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0, 0, 0, .35)); --texture-size: 100% 100%, 100% 100%, 48px 48px, 48px 48px, 100% 100%; }