/* Theme parts: page and card titles. [data-ornament-glyphs] a glyph either side of page and banner titles: --ornament-before, --ornament-after (a CSS string; write a character by its code point, "\2726") [data-ornament-underline] the line under page titles: --title-underline (a gradient), its height (--title-underline-height) and the space above it (--title-underline-pad) [data-effect-color] the colour titles are set in: --title-color [data-effect-shadow] what is drawn behind them: --title-shadow (a text-shadow list) */ [data-effect-color="text"] { --title-color: var(--text); } [data-effect-color="accent"] { --title-color: var(--accent); } [data-effect-color="warn"] { --title-color: var(--warn); } [data-ornament-glyphs="none"] { --ornament-before: none; --ornament-after: none; } [data-ornament-underline="none"] { --title-underline: none; --title-underline-height: 2px; --title-underline-pad: 0px; } [data-effect-shadow] { --title-glow-under: var(--title-shadow); } [data-effect-shadow="none"] { --title-shadow: none; --title-glow-under: 0 0 transparent; } /* Fleuron: a hedera before, a rotated floral heart after. */ [data-ornament-glyphs="fleuron"] { --ornament-before: "\2619"; --ornament-after: "\2767"; } /* Cross: a dagger either side. */ [data-ornament-glyphs="cross"] { --ornament-before: "\2020"; --ornament-after: "\2020"; } /* Block: a solid square before. */ [data-ornament-glyphs="block"] { --ornament-before: "\25A0"; --ornament-after: none; } /* Diamond: an open diamond either side. */ [data-ornament-glyphs="diamond"] { --ornament-before: "\25C7"; --ornament-after: "\25C7"; } /* Star: a four-pointed star either side. */ [data-ornament-glyphs="star"] { --ornament-before: "\2726"; --ornament-after: "\2726"; } /* Fade: an accent rule fading out to the right. */ [data-ornament-underline="fade"] { --title-underline: linear-gradient(90deg, var(--accent), transparent); --title-underline-height: 2px; --title-underline-pad: 6px; } /* Double: a thick and a thin accent rule. */ [data-ornament-underline="double"] { --title-underline: linear-gradient(180deg, var(--accent) 0 2px, transparent 2px 4px, var(--accent) 4px 5px); --title-underline-height: 5px; --title-underline-pad: 9px; } /* Gilt: a light catching the lower edge (dark: a shadow and a faint accent glow). */ [data-effect-shadow="gilt"] { --title-shadow: 0 1px 0 rgba(255,255,255,0.7); } [data-scheme="dark"][data-effect-shadow="gilt"] { --title-shadow: 0 1px 0 rgba(0,0,0,0.5), 0 0 10px color-mix(in srgb, var(--accent) 22%, transparent); } /* Emboss: a highlight below and a shade above, pressed into the page. */ [data-effect-shadow="emboss"] { --title-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 -1px 0 rgba(0,0,0,0.12); } [data-scheme="dark"][data-effect-shadow="emboss"] { --title-shadow: 0 1px 0 rgba(255,255,255,0.08), 0 -1px 0 rgba(0,0,0,0.6); } /* Ember: a dark drop and an accent glow. */ [data-effect-shadow="ember"] { --title-shadow: 0 1px 0 rgba(0,0,0,0.7), 0 0 10px color-mix(in srgb, var(--accent) 50%, transparent); } /* Glow: an accent glow, tight and wide. */ [data-effect-shadow="glow"] { --title-shadow: 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 12px color-mix(in srgb, var(--accent) 55%, transparent); } /* Heart: an outlined heart either side. */ [data-ornament-glyphs="heart"] { --ornament-before: "\2661"; --ornament-after: "\2661"; } /* Brackets: square brackets either side, as on a readout. */ [data-ornament-glyphs="brackets"] { --ornament-before: "\5B"; --ornament-after: "\5D"; } /* Lotus: a flower either side. */ [data-ornament-glyphs="lotus"] { --ornament-before: "\2741"; --ornament-after: "\2741"; } /* Deco: an art deco diamond either side. */ [data-ornament-glyphs="deco"] { --ornament-before: "\2756"; --ornament-after: "\2756"; } /* Bleed: ink spread into the paper, as from a typewriter. */ [data-effect-shadow="bleed"] { --title-shadow: 0 0 1px color-mix(in srgb, var(--text) 75%, transparent), 0.6px 0.6px 0 color-mix(in srgb, var(--text) 30%, transparent); } /* Twinkles either side of the title. */ [data-ornament-glyphs="twinkle"] { --ornament-before: "\2727"; --ornament-after: "\2727"; } /* An underline running from the accent into lavender and fading out. */ [data-ornament-underline="twinkle"] { --title-underline: linear-gradient(90deg, var(--accent), var(--accent-2) 55%, transparent); --title-underline-height: 2px; --title-underline-pad: 6px; } /* Blossoms either side of the title. */ [data-ornament-glyphs="blossom"] { --ornament-before: "\2740"; --ornament-after: "\2740"; } /* A dotted underline of short dashes. */ [data-ornament-underline="blossom"] { --title-underline: repeating-linear-gradient(90deg, var(--accent) 0 2px, transparent 2px 5px); --title-underline-height: 2px; --title-underline-pad: 6px; } /* Stars either side of the title. */ [data-ornament-glyphs="encore"] { --ornament-before: "\2605"; --ornament-after: "\2605"; } /* An underline in the three stage-light colours. */ [data-ornament-underline="encore"] { --title-underline: linear-gradient(90deg, var(--accent), var(--accent-2) 50%, var(--accent-3)); --title-underline-height: 2px; --title-underline-pad: 6px; } /* A pencil before the title. */ [data-ornament-glyphs="doodle"] { --ornament-before: "\270E"; --ornament-after: none; } /* A dashed underline, as if drawn by hand. */ [data-ornament-underline="doodle"] { --title-underline: repeating-linear-gradient(90deg, var(--accent) 0 9px, transparent 9px 13px); --title-underline-height: 2px; --title-underline-pad: 6px; } /* A glossy highlight above, a lavender edge below and a soft accent glow. */ [data-effect-shadow="shine"] { --title-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 2px 0 color-mix(in srgb, var(--accent-2) 45%, transparent), 0 0 14px color-mix(in srgb, var(--accent) 30%, transparent); } /* A white halo with a faint accent glow beneath. */ [data-effect-shadow="dreamy"] { --title-shadow: 0 0 6px rgba(255,255,255,0.95), 0 0 2px rgba(255,255,255,0.95), 0 3px 12px color-mix(in srgb, var(--accent) 28%, transparent); } /* Glowing like a lightstick in the accent, a second colour offset behind. */ [data-effect-shadow="lightstick"] { --title-shadow: 0 0 3px color-mix(in srgb, var(--accent) 90%, transparent), 0 0 12px color-mix(in srgb, var(--accent) 70%, transparent), 2px 2px 0 color-mix(in srgb, var(--accent-2) 55%, transparent), 0 0 28px color-mix(in srgb, var(--accent-2) 25%, transparent); } /* A faint pencil echo offset down and right. */ [data-effect-shadow="pencil"] { --title-shadow: 1.5px 1.5px 0 color-mix(in srgb, var(--accent) 22%, transparent); } /* Exclaim: a shout after the title, and a bar under most of it. */ [data-ornament-glyphs="exclaim"] { --ornament-before: none; --ornament-after: "\21\21"; } /* Varsity: a star either side. */ [data-ornament-glyphs="varsity"] { --ornament-before: "\2605"; --ornament-after: "\2605"; } /* Warning: corner wedges either side, like a hazard sign. */ [data-ornament-glyphs="warning"] { --ornament-before: "\25E2"; --ornament-after: "\25E3"; } /* Cursor: a menu's pointer before the title. */ [data-ornament-glyphs="cursor"] { --ornament-before: "\25B6"; --ornament-after: none; } /* Hanko: a seal after the title. */ [data-ornament-glyphs="hanko"] { --ornament-before: none; --ornament-after: "\25A3"; } /* Exclaim: a hard bar under the first seven tenths. */ [data-ornament-underline="exclaim"] { --title-underline: linear-gradient(90deg, var(--accent) 0 70%, transparent 70%); --title-underline-height: 2px; --title-underline-pad: 6px; } /* Hanko: a brush stroke laid on in one pass, running dry at its end. */ [data-ornament-underline="hanko"] { --title-underline: linear-gradient(90deg, color-mix(in srgb, var(--accent) 37%, transparent), color-mix(in srgb, var(--accent) 68%, transparent) 7%, color-mix(in srgb, var(--accent) 75%, transparent) 11% 18%, color-mix(in srgb, var(--accent) 88%, transparent) 25% 32%, var(--accent) 39% 54%, color-mix(in srgb, var(--accent) 76%, transparent) 64% 71%, color-mix(in srgb, var(--accent) 35%, transparent) 78.5% 86%, color-mix(in srgb, var(--accent) 10%, transparent) 93%, transparent 97%); --title-underline-height: 2px; --title-underline-pad: 6px; } /* Inked: a hard accent shadow, offset like a misregistered print. */ [data-effect-shadow="inked"] { --title-shadow: 2px 2px 0 color-mix(in srgb, var(--accent) 90%, transparent); } /* Varsity: outlined in the accent, with a drop shadow. */ [data-effect-shadow="varsity"] { --title-shadow: -1px -1px 0 var(--accent), 1px -1px 0 var(--accent), -1px 1px 0 var(--accent), 1px 1px 0 var(--accent), 3px 3px 0 rgba(0, 0, 0, 0.55); } /* Stencil: a hard shadow under sprayed letters. */ [data-effect-shadow="stencil"] { --title-shadow: 0 2px 0 rgba(0, 0, 0, 0.55); } /* Pixel: a hard drop shadow and a soft accent glow. */ [data-effect-shadow="pixel"] { --title-shadow: 2px 2px 0 rgba(0, 0, 0, 0.65), 0 0 12px color-mix(in srgb, var(--accent) 35%, transparent); } /* Lantern: lit from behind in the accent. */ [data-effect-shadow="lantern"] { --title-shadow: 0 1px 0 rgba(0, 0, 0, 0.6), 0 0 14px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 34px color-mix(in srgb, var(--accent) 22%, transparent); } /* Pow: a comic burst either side. */ [data-ornament-glyphs="pow"] { --ornament-before: "\2739"; --ornament-after: "\2739"; } /* Vaudeville: a star either side. */ [data-ornament-glyphs="vaudeville"] { --ornament-before: "\2605"; --ornament-after: "\2605"; } /* Vaudeville: a plain ink rule. */ [data-ornament-underline="vaudeville"] { --title-underline: linear-gradient(var(--text), var(--text)); --title-underline-height: 2px; --title-underline-pad: 6px; } /* Bolt: a zigzag arrow before, an eight-point star after. */ [data-ornament-glyphs="bolt"] { --ornament-before: "\21AF"; --ornament-after: "\2734"; } /* Bolt: accent-2, accent and accent-3 thirds. */ [data-ornament-underline="bolt"] { --title-underline: linear-gradient(90deg, var(--accent-2) 0 33%, var(--accent) 33% 66%, var(--accent-3) 66%); --title-underline-height: 2px; --title-underline-pad: 6px; } /* Tricolor: a cut corner before. */ [data-ornament-glyphs="tricolor"] { --ornament-before: "\25E5"; --ornament-after: none; } /* Tricolor: an accent bar, then shorter accent-2 and accent-3 bars, with gaps. */ [data-ornament-underline="tricolor"] { --title-underline: linear-gradient(90deg, var(--accent) 0 58%, transparent 58% 61%, var(--accent-2) 61% 76%, transparent 76% 79%, var(--accent-3) 79% 90%, transparent 90%); --title-underline-height: 2px; --title-underline-pad: 6px; } /* Battle cry: guillemets pointing in at the title. */ [data-ornament-glyphs="battlecry"] { --ornament-before: "\BB"; --ornament-after: "\AB"; } /* Battle cry: accent, accent-2 and accent-3 bands burning out. */ [data-ornament-underline="battlecry"] { --title-underline: linear-gradient(90deg, var(--accent) 0 34%, var(--accent-2) 34% 62%, var(--accent-3) 62% 86%, transparent); --title-underline-height: 2px; --title-underline-pad: 6px; } /* Ink pop: a thin ink outline and a hard ink drop. */ [data-effect-shadow="inkpop"] { --title-shadow: 0.035em 0 0 var(--text), -0.035em 0 0 var(--text), 0 0.035em 0 var(--text), 0 -0.035em 0 var(--text), 0.035em 0.035em 0 var(--text), -0.035em -0.035em 0 var(--text), 0.035em -0.035em 0 var(--text), -0.035em 0.035em 0 var(--text), 0.07em 0.07em 0 var(--text); } /* Cartoon: a soft accent drop. */ [data-effect-shadow="cartoon"] { --title-shadow: 0.08em 0.08em 0 color-mix(in srgb, var(--accent) 60%, transparent); } /* Toy box: a thick black outline and a deep accent-2 drop. */ [data-effect-shadow="toybox"] { --title-shadow: 0.065em 0 0 #000, -0.065em 0 0 #000, 0 0.065em 0 #000, 0 -0.065em 0 #000, 0.065em 0.065em 0 #000, -0.065em -0.065em 0 #000, 0.065em -0.065em 0 #000, -0.065em 0.065em 0 #000, 0.15em 0.15em 0 var(--accent-2); } /* Decal: an accent-2 offset print. */ [data-effect-shadow="decal"] { --title-shadow: 0.05em 0.05em 0 color-mix(in srgb, var(--accent-2) 85%, transparent); } /* Blazing: a scorched accent-3 extrusion, a black edge, and accent-2 and accent-3 fire behind. */ [data-effect-shadow="blazing"] { --title-shadow: 2px 2px 0 color-mix(in srgb, var(--accent-3) 56%, #000), 3px 3px 0 color-mix(in srgb, var(--accent-3) 56%, #000), 4px 4px 0 #000, 0 0 10px color-mix(in srgb, var(--accent-2) 70%, transparent), 0 0 26px color-mix(in srgb, var(--accent-3) 60%, transparent); } /* Cyberpunk: a double slash before the title. */ [data-ornament-glyphs="slash"] { --ornament-before: "//"; --ornament-after: none; } /* Space opera: a bar and a diamond either side. */ [data-ornament-glyphs="insignia"] { --ornament-before: "\2501\25C6"; --ornament-after: "\25C6\2501"; } /* Starship console: a pill bar before the title. */ [data-ornament-glyphs="segments"] { --ornament-before: "\25AC"; --ornament-after: none; } /* The accent running into accent-2, fading out. */ [data-ornament-underline="slash"] { --title-underline: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent-2) 90%, transparent) 55%, transparent); --title-underline-height: 2px; --title-underline-pad: 6px; } /* A sunset: accent-2 to accent-3 to the accent, fading out. */ [data-ornament-underline="sunset"] { --title-underline: linear-gradient(90deg, var(--accent-2), var(--accent-3) 35%, var(--accent) 70%, transparent); --title-underline-height: 2px; --title-underline-pad: 6px; } /* Console segments: accent, accent-2, peach (warn mixed with link-missing) and accent-3 bars with gaps. */ [data-ornament-underline="segments"] { --title-underline: linear-gradient(90deg, var(--accent) 0 46%, transparent 46% 49%, var(--accent-2) 49% 70%, transparent 70% 73%, color-mix(in srgb, var(--warn), var(--link-missing)) 73% 86%, transparent 86% 89%, var(--accent-3) 89%); --title-underline-height: 2px; --title-underline-pad: 6px; } /* A split signal: accent-2 to the left, the accent to the right, in a glow. */ [data-effect-shadow="rgbsplit"] { --title-shadow: -2px 0 0 color-mix(in srgb, var(--accent-2) 80%, transparent), 2px 0 0 color-mix(in srgb, var(--accent) 80%, transparent), 0 0 16px color-mix(in srgb, var(--accent) 35%, transparent); } /* Chrome-lit retro neon: the accent with an accent-3 drop and glow. */ [data-effect-shadow="retro"] { --title-shadow: 0 0 2px color-mix(in srgb, var(--accent) 90%, transparent), 0 2px 0 var(--accent), 0 3px 0 color-mix(in srgb, var(--accent-3) 70%, transparent), 0 0 14px color-mix(in srgb, var(--accent) 70%, transparent), 0 0 30px color-mix(in srgb, var(--accent-3) 35%, transparent); } /* Crown: a crown either side. */ [data-ornament-glyphs="crown"] { --ornament-before: "\2655"; --ornament-after: "\2655"; } /* Crown: an accent rule bright in the middle, accent-2 at its ends. */ [data-ornament-underline="crown"] { --title-underline: linear-gradient(90deg, transparent, var(--accent-2) 15%, var(--accent) 50%, var(--accent-2) 85%, transparent); --title-underline-height: 2px; --title-underline-pad: 6px; } /* Crystal: a gem either side. */ [data-ornament-glyphs="crystal"] { --ornament-before: "\25C8"; --ornament-after: "\25C8"; } /* Crystal: a fine accent-2 line, brightest at the start. */ [data-ornament-underline="crystal"] { --title-underline: linear-gradient(90deg, var(--accent-2), color-mix(in srgb, var(--accent) 60%, transparent) 40%, transparent); --title-underline-height: 1px; --title-underline-pad: 8px; } /* Glove: a pointing hand before, as a menu cursor. */ [data-ornament-glyphs="glove"] { --ornament-before: "\261E"; --ornament-after: none; } /* Jagged: an accent bar cut at a slant at both ends, with two white nicks through it. */ [data-ornament-underline="jagged"] { --title-underline: linear-gradient(100deg, transparent 0 7px, var(--accent) 7px 64%, var(--accent-2) 64% 67%, var(--accent) 67% 80%, var(--accent-2) 80% 82%, var(--accent) 82% calc(100% - 7px), transparent calc(100% - 7px)); --title-underline-height: 5px; --title-underline-pad: 6px; } /* Pointer: a solid triangle before, as a menu cursor. */ [data-ornament-glyphs="pointer"] { --ornament-before: "\25B6"; --ornament-after: none; } /* Taper: an accent-2 rule thinning to nothing. */ [data-ornament-underline="taper"] { --title-underline: radial-gradient(ellipse 100% 50% at 0% 50%, var(--accent-2) 60%, transparent 62%); --title-underline-height: 4px; --title-underline-pad: 4px; } /* Actions: two action diamonds before. */ [data-ornament-glyphs="actions"] { --ornament-before: "\25C6\25C6"; --ornament-after: none; } /* Bar: a heavy rule in the text colour. */ [data-ornament-underline="bar"] { --title-underline: linear-gradient(var(--text), var(--text)); --title-underline-height: 3px; --title-underline-pad: 6px; } /* Starlit: a dark drop and an accent-2 glow. */ [data-effect-shadow="starlit"] { --title-shadow: 0 1px 0 rgba(0, 0, 0, 0.6), 0 0 12px color-mix(in srgb, var(--accent-2) 45%, transparent); } /* Prism: a cold accent glow split by an accent-3 edge. */ [data-effect-shadow="prism"] { --title-shadow: -1px 0 0 color-mix(in srgb, var(--accent-3) 35%, transparent), 0 0 14px color-mix(in srgb, var(--accent) 45%, transparent); } /* Bevel: a hard black drop, two pixels deep. */ [data-effect-shadow="bevel"] { --title-shadow: 1px 1px 0 #000, 2px 2px 0 #000; } /* Ransom: letters on a hard black drop, as letters cut from a page; the small uppercase labels take the title face too. */ [data-effect-shadow="ransom"] { --title-shadow: 2px 2px 0 #000; --font-kicker: var(--font-display); } /* Dialog: a deep black drop. */ [data-effect-shadow="dialog"] { --title-shadow: 0 2px 0 rgba(0, 0, 0, 0.9); } /* Stamped: pressed into the page, a light edge below. */ [data-effect-shadow="stamped"] { --title-shadow: 0 1px 0 rgba(255, 255, 255, 0.75); } /* Thorn: a cross pattée either side, and a barbed line of the accent. */ [data-ornament-glyphs="thorn"] { --ornament-before: "\2720"; --ornament-after: "\2720"; } [data-ornament-underline="thorn"] { --title-underline: repeating-linear-gradient(90deg, var(--accent) 0 14px, transparent 14px 16px, var(--accent) 16px 18px, transparent 18px 20px); --title-underline-height: 3px; --title-underline-pad: 6px; } /* Wing: a four-club cross either side, and an accent line fading out at both ends. */ [data-ornament-glyphs="wing"] { --ornament-before: "\2725"; --ornament-after: "\2725"; } [data-ornament-underline="wing"] { --title-underline: linear-gradient(90deg, transparent, var(--accent) 25% 75%, transparent); --title-underline-height: 2px; --title-underline-pad: 7px; } /* Chevron: a small triangle before, and a band of accent chevrons. */ [data-ornament-glyphs="chevron"] { --ornament-before: "\25B8"; --ornament-after: none; } [data-ornament-underline="chevron"] { --title-underline: repeating-linear-gradient(135deg, var(--accent) 0 3px, transparent 3px 7px); --title-underline-height: 5px; --title-underline-pad: 6px; } /* Moon: a waxing and a waning moon either side, and an accent line parted in the middle. */ [data-ornament-glyphs="moon"] { --ornament-before: "\263D"; --ornament-after: "\263E"; } [data-ornament-underline="moon"] { --title-underline: linear-gradient(90deg, transparent, var(--accent) 30% 46%, transparent 46% 54%, var(--accent) 54% 70%, transparent); --title-underline-height: 2px; --title-underline-pad: 7px; } /* Sun disc: a fisheye either side, and an accent bar breaking into shorter dashes. */ [data-ornament-glyphs="sun-disc"] { --ornament-before: "\25C9"; --ornament-after: "\25C9"; } [data-ornament-underline="sun-disc"] { --title-underline: linear-gradient(90deg, var(--accent) 0 60%, transparent 60% 64%, var(--accent) 64% 72%, transparent 72% 76%, var(--accent) 76% 80%, transparent 80%); --title-underline-height: 3px; --title-underline-pad: 7px; } /* Wand: a spark either side, and a line running from the accent into accent-2. */ [data-ornament-glyphs="wand"] { --ornament-before: "\2734"; --ornament-after: "\2734"; } [data-ornament-underline="wand"] { --title-underline: linear-gradient(90deg, var(--accent), var(--accent-2) 70%, transparent); --title-underline-height: 2px; --title-underline-pad: 7px; } /* Cog: a gear before, and a toothed accent bar. */ [data-ornament-glyphs="cog"] { --ornament-before: "\2699"; --ornament-after: none; } [data-ornament-underline="cog"] { --title-underline: repeating-linear-gradient(90deg, var(--accent) 0 6px, transparent 6px 9px); --title-underline-height: 4px; --title-underline-pad: 6px; } /* Sheriff: a star either side, and a thick and thin rule of the accent. */ [data-ornament-glyphs="sheriff"] { --ornament-before: "\2605"; --ornament-after: "\2605"; } [data-ornament-underline="sheriff"] { --title-underline: linear-gradient(180deg, var(--accent) 0 3px, transparent 3px 5px, var(--accent) 5px 6px); --title-underline-height: 6px; --title-underline-pad: 8px; } /* Rad: a radiation sign before, and a hazard stripe of the accent. */ [data-ornament-glyphs="rad"] { --ornament-before: "\2622"; --ornament-after: none; } [data-ornament-underline="rad"] { --title-underline: repeating-linear-gradient(-45deg, var(--accent) 0 6px, transparent 6px 12px); --title-underline-height: 6px; --title-underline-pad: 6px; } /* Bloodlet: a black drop and a red glow. */ [data-effect-shadow="bloodlet"] { --title-shadow: 0 2px 0 #000, 0 0 14px color-mix(in srgb, var(--accent) 55%, transparent); } /* Firestone: an ember glow of the warning colour and the accent. */ [data-effect-shadow="firestone"] { --title-shadow: 0 0 6px color-mix(in srgb, var(--warn) 55%, transparent), 0 0 18px color-mix(in srgb, var(--accent) 40%, transparent); } /* Scope: the accent's phosphor glow, as on a scope. */ [data-effect-shadow="scope"] { --title-shadow: 0 0 8px color-mix(in srgb, var(--accent) 45%, transparent); } /* Ectoplasm: a pale accent-2 glow. */ [data-effect-shadow="ectoplasm"] { --title-shadow: 0 0 10px color-mix(in srgb, var(--accent-2) 60%, transparent); } /* Heat: a warm haze and a dark edge. */ [data-effect-shadow="heat"] { --title-shadow: 0 1px 0 #000, 0 0 12px color-mix(in srgb, var(--warn) 45%, transparent); } /* Spellglow: a gold glow inside an accent-2 one. */ [data-effect-shadow="spellglow"] { --title-shadow: 0 0 8px color-mix(in srgb, var(--accent) 50%, transparent), 0 0 22px color-mix(in srgb, var(--accent-2) 30%, transparent); } /* Brass: a lit edge above and a dark one below, as on a stamped plate. */ [data-effect-shadow="brass"] { --title-shadow: 0 -1px 0 #000, 0 1px 0 color-mix(in srgb, var(--text) 35%, transparent), 0 2px 4px rgba(0, 0, 0, 0.6); } /* Woodtype: a light offset of the ink, as from a worn block. */ [data-effect-shadow="woodtype"] { --title-shadow: 1px 1px 0 color-mix(in srgb, var(--text) 25%, transparent); } /* Grime: a hard black drop and a dark smudge. */ [data-effect-shadow="grime"] { --title-shadow: 2px 2px 0 #000, 0 0 10px rgba(0, 0, 0, 0.6); } /* Flank: an em dash either side. */ [data-ornament-glyphs="flank"] { --ornament-before: "\2014"; --ornament-after: "\2014"; } /* Designator: a solid corner triangle before, as on a menu tile's label. */ [data-ornament-glyphs="designator"] { --ornament-before: "\25E2"; --ornament-after: none; } /* Designator: a slab of accent-2 and a tick, then a hairline in the border colour. */ [data-ornament-underline="designator"] { --title-underline: linear-gradient(90deg, var(--accent-2) 0 40px, transparent 40px 46px, var(--accent-2) 46px 50px, transparent 50px 56px, var(--border) 56px); --title-underline-height: 3px; --title-underline-pad: 8px; } /* Capsule: a capsule split down the middle before the title. */ [data-ornament-glyphs="capsule"] { --ornament-before: "\25D6\25D7"; --ornament-after: none; } /* Capsule: a thick bar, the accent's half and accent-2's half. */ [data-ornament-underline="capsule"] { --title-underline: linear-gradient(90deg, var(--accent) 0 50%, var(--accent-2) 50%); --title-underline-height: 5px; --title-underline-pad: 6px; } /* Emblem: a hexagon before the title. */ [data-ornament-glyphs="emblem"] { --ornament-before: "\2B22"; --ornament-after: none; } /* Sticker: an outline in the surface colour all round and a hard drop in the text colour, as a sticker. */ [data-effect-shadow="sticker"] { --title-shadow: 0.04em 0 0 var(--surface), -0.04em 0 0 var(--surface), 0 0.04em 0 var(--surface), 0 -0.04em 0 var(--surface), 0.03em 0.03em 0 var(--surface), -0.03em -0.03em 0 var(--surface), 0.03em -0.03em 0 var(--surface), -0.03em 0.03em 0 var(--surface), 0.07em 0.08em 0 var(--text); } /* Evolve: the title split into accent-2 to the left and the missing-link colour to the right, as a screen changing form. */ [data-effect-shadow="evolve"] { --title-shadow: -0.05em 0 0 color-mix(in srgb, var(--accent-2) 70%, transparent), 0.05em 0 0 color-mix(in srgb, var(--link-missing) 45%, transparent), 0 0 14px color-mix(in srgb, var(--accent) 30%, transparent); } /* Shimenawa: no glyphs, and a twisted straw rope of the second accent under the title. */ [data-ornament-underline="shimenawa"] { --title-underline: repeating-linear-gradient(120deg, var(--accent-2) 0 4px, color-mix(in srgb, var(--accent-2) 45%, transparent) 4px 7px); --title-underline-height: 6px; --title-underline-pad: 9px; } /* Enso: an ink circle before, and a brush stroke that thins out under the title. */ [data-ornament-glyphs="enso"] { --ornament-before: "\25EF"; --ornament-after: none; } [data-ornament-underline="enso"] { --title-underline: linear-gradient(90deg, var(--text), var(--text) 40%, color-mix(in srgb, var(--text) 70%, transparent) 75%, transparent); --title-underline-height: 4px; --title-underline-pad: 10px; } /* Station: a stop on the line before, and the line's stripe in the second accent ending in the accent. */ [data-ornament-glyphs="station"] { --ornament-before: "\25CF"; --ornament-after: none; } [data-ornament-underline="station"] { --title-underline: linear-gradient(90deg, var(--accent-2) 0 78%, var(--accent) 78%); --title-underline-height: 4px; --title-underline-pad: 8px; } /* ── Highlight (data-highlight): light on the page itself. A card never moves: it gets at most a still lit edge (--card-highlight, drawn by KitCard round its border). The page title carries the motion (--title-motion, PageHeader), which pauses with the atmosphere. ── */ [data-highlight="none"] { --card-highlight: none; --title-motion: none; } /* Neon: the page title hums and now and then stutters like a tube; each card's edge is lit in the accent. */ [data-highlight="neon"] { --card-highlight: linear-gradient(color-mix(in srgb, var(--accent) 55%, transparent) 0 0); --title-motion: theme-neon-title 12s linear infinite; } /* Pulse: the page title's glow swells and fades slowly; each card's edge holds a faint accent line. */ [data-highlight="pulse"] { --card-highlight: linear-gradient(color-mix(in srgb, var(--accent) 45%, transparent) 0 0); --title-motion: theme-glow-title 10s ease-in-out infinite; } /* Glitch: the page title tears into the two accents for a moment every few seconds; card edges hold both accents. */ [data-highlight="glitch"] { --card-highlight: linear-gradient(90deg, var(--accent), transparent 30% 70%, var(--accent-2)); --title-motion: theme-glitch-title 12s steps(1) infinite; } /* Firelight: the page title warms and cools as if lit by a flame; card edges hold a warm line along the foot. */ [data-highlight="firelight"] { --card-highlight: linear-gradient(0deg, color-mix(in srgb, var(--warn) 55%, transparent), transparent 60%); --title-motion: theme-flicker-title 7s ease-in-out infinite; } @keyframes theme-neon-title { 0%, 6%, 9%, 100% { text-shadow: var(--title-glow-under), 0 0 10px color-mix(in srgb, var(--accent) 70%, transparent), 0 0 26px color-mix(in srgb, var(--accent) 35%, transparent); opacity: 1; } 7% { text-shadow: var(--title-shadow); opacity: 0.7; } 8% { text-shadow: var(--title-glow-under), 0 0 6px var(--accent); opacity: 0.9; } 50% { text-shadow: var(--title-glow-under), 0 0 14px color-mix(in srgb, var(--accent) 80%, transparent), 0 0 34px color-mix(in srgb, var(--accent) 45%, transparent); } } @keyframes theme-glow-title { 0%, 100% { text-shadow: var(--title-glow-under), 0 0 6px color-mix(in srgb, var(--accent) 30%, transparent); } 50% { text-shadow: var(--title-glow-under), 0 0 16px color-mix(in srgb, var(--accent) 70%, transparent); } } @keyframes theme-glitch-title { 0%, 92%, 100% { text-shadow: var(--title-shadow); translate: 0 0; } 93% { text-shadow: -3px 0 var(--accent), 3px 0 var(--accent-2); translate: 2px 0; } 95% { text-shadow: 3px 0 var(--accent), -2px 0 var(--accent-2); translate: -2px 0; } 97% { text-shadow: -1px 0 var(--accent), 1px 0 var(--accent-2); translate: 0 0; } } @keyframes theme-flicker-title { 0%, 100% { text-shadow: var(--title-glow-under), 0 0 10px color-mix(in srgb, var(--warn) 45%, transparent); } 30% { text-shadow: var(--title-glow-under), 0 0 6px color-mix(in srgb, var(--warn) 30%, transparent); } 55% { text-shadow: var(--title-glow-under), 0 0 14px color-mix(in srgb, var(--warn) 55%, transparent); } 75% { text-shadow: var(--title-glow-under), 0 0 8px color-mix(in srgb, var(--warn) 35%, transparent); } }