/* Nupik Wenpach colour worlds. Generated from brand/brand.json by tools/build-brand.py. Drop this in, stamp data-world and data-theme on , and the tokens below carry the rest. */ /* >>> THEME BLOCK: generated by tools/build-brand.py, do not hand edit */ /* Worlds. The default is stamped on by the head script, which also reads ?world= and localStorage, so a world survives a reload and can be set from a link. Default: shale. */ /* Shale: Split slate under a work light. Graphite, titanium and a copper edge. */ :root, :root[data-world="shale"] { --paper: #eef0f2; --paper-2: #fafbfc; --paper-3: #e1e5e9; --line: #cdd4da; --line-soft: #dce1e6; --ink: #12161a; --ink-2: #394149; --ink-3: #5c656d; --accent: #b0602c; --accent-ink: #8a4316; --second: #4a5f6e; --second-ink: #384a57; /* The five names the stylesheet already uses, folded onto the two above. */ --brand: #b0602c; --brand-ink: #8a4316; --coral: #b0602c; --coral-ink: #8a4316; --teal: #4a5f6e; --teal-ink: #384a57; --amber: #4a5f6e; --amber-ink: #384a57; --magenta: #4a5f6e; --shadow-sm: 0 1px 2px rgba(16, 18, 25, .05), 0 2px 8px rgba(16, 18, 25, .04); --shadow-md: 0 2px 6px rgba(16, 18, 25, .06), 0 14px 32px rgba(16, 18, 25, .09); --shadow-lg: 0 4px 12px rgba(16, 18, 25, .08), 0 28px 60px rgba(16, 18, 25, .13); --wash-alpha: .70; --rail-alpha: 1; --seal-tile: linear-gradient(140deg, #3B434A 0%, #22282E 58%, #111518 100%); --seal-t1: #3B434A; --seal-t2: #22282E; --seal-t3: #111518; --seal-m1: #f7cfad; --seal-m2: #e09a6b; --seal-m3: #b1653a; --seal-m4: #6e391c; color-scheme: light; } :root[data-theme="dark"], [data-world="shale"][data-theme="dark"] { --paper: #111519; --paper-2: #171c21; --paper-3: #1d2329; --line: #2c3339; --line-soft: #222a30; --ink: #efe7da; --ink-2: #bdb6aa; --ink-3: #8e949a; --accent: #d98b5f; --accent-ink: #eba47a; --second: #8fa3b0; --second-ink: #b6c5cf; /* The five names the stylesheet already uses, folded onto the two above. */ --brand: #d98b5f; --brand-ink: #eba47a; --coral: #d98b5f; --coral-ink: #eba47a; --teal: #8fa3b0; --teal-ink: #b6c5cf; --amber: #8fa3b0; --amber-ink: #b6c5cf; --magenta: #8fa3b0; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow-md: 0 2px 6px rgba(0, 0, 0, .45), 0 14px 32px rgba(0, 0, 0, .38); --shadow-lg: 0 4px 12px rgba(0, 0, 0, .5), 0 28px 60px rgba(0, 0, 0, .45); --wash-alpha: .40; --rail-alpha: .9; --seal-tile: linear-gradient(140deg, #3B434A 0%, #22282E 58%, #111518 100%); --seal-t1: #3B434A; --seal-t2: #22282E; --seal-t3: #111518; --seal-m1: #f7cfad; --seal-m2: #e09a6b; --seal-m3: #b1653a; --seal-m4: #6e391c; color-scheme: dark; } /* Oxide: Cut iron left in the weather. Rust, scale and bone. */ [data-world="oxide"] { --paper: #f4efe6; --paper-2: #fffdf8; --paper-3: #ebe3d5; --line: #ded3c0; --line-soft: #e8e0d2; --ink: #1c1611; --ink-2: #4a3e33; --ink-3: #7c6e60; --accent: #c1440e; --accent-ink: #9a360b; --second: #5b5750; --second-ink: #45423c; /* The five names the stylesheet already uses, folded onto the two above. */ --brand: #c1440e; --brand-ink: #9a360b; --coral: #c1440e; --coral-ink: #9a360b; --teal: #5b5750; --teal-ink: #45423c; --amber: #5b5750; --amber-ink: #45423c; --magenta: #5b5750; --shadow-sm: 0 1px 2px rgba(16, 18, 25, .05), 0 2px 8px rgba(16, 18, 25, .04); --shadow-md: 0 2px 6px rgba(16, 18, 25, .06), 0 14px 32px rgba(16, 18, 25, .09); --shadow-lg: 0 4px 12px rgba(16, 18, 25, .08), 0 28px 60px rgba(16, 18, 25, .13); --wash-alpha: .70; --rail-alpha: 1; --seal-tile: linear-gradient(140deg, #C1440E 0%, #8A2B0B 58%, #43180A 100%); --seal-t1: #C1440E; --seal-t2: #8A2B0B; --seal-t3: #43180A; --seal-m1: #f2ece0; --seal-m2: #cfc5b2; --seal-m3: #a19681; --seal-m4: #6f6455; color-scheme: light; } [data-world="oxide"][data-theme="dark"] { --paper: #14100c; --paper-2: #1c1712; --paper-3: #241d16; --line: #352c22; --line-soft: #2a2219; --ink: #f4ece0; --ink-2: #c6b7a4; --ink-3: #948676; --accent: #e05a1f; --accent-ink: #ff8f52; --second: #a89c8c; --second-ink: #c9beac; /* The five names the stylesheet already uses, folded onto the two above. */ --brand: #e05a1f; --brand-ink: #ff8f52; --coral: #e05a1f; --coral-ink: #ff8f52; --teal: #a89c8c; --teal-ink: #c9beac; --amber: #a89c8c; --amber-ink: #c9beac; --magenta: #a89c8c; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow-md: 0 2px 6px rgba(0, 0, 0, .45), 0 14px 32px rgba(0, 0, 0, .38); --shadow-lg: 0 4px 12px rgba(0, 0, 0, .5), 0 28px 60px rgba(0, 0, 0, .45); --wash-alpha: .40; --rail-alpha: .9; --seal-tile: linear-gradient(140deg, #C1440E 0%, #8A2B0B 58%, #43180A 100%); --seal-t1: #C1440E; --seal-t2: #8A2B0B; --seal-t3: #43180A; --seal-m1: #f2ece0; --seal-m2: #cfc5b2; --seal-m3: #a19681; --seal-m4: #6f6455; color-scheme: dark; } /* Voltage: Electric, synthetic, unmistakably a screen colour. */ [data-world="voltage"] { --paper: #faf9fc; --paper-2: #ffffff; --paper-3: #f1f0f6; --line: #e4e2ee; --line-soft: #edecf4; --ink: #12121a; --ink-2: #3b3b4d; --ink-3: #6a6a80; --accent: #4f2ae8; --accent-ink: #4423cc; --second: #b02fd4; --second-ink: #8e22ae; /* The five names the stylesheet already uses, folded onto the two above. */ --brand: #4f2ae8; --brand-ink: #4423cc; --coral: #4f2ae8; --coral-ink: #4423cc; --teal: #b02fd4; --teal-ink: #8e22ae; --amber: #b02fd4; --amber-ink: #8e22ae; --magenta: #b02fd4; --shadow-sm: 0 1px 2px rgba(16, 18, 25, .05), 0 2px 8px rgba(16, 18, 25, .04); --shadow-md: 0 2px 6px rgba(16, 18, 25, .06), 0 14px 32px rgba(16, 18, 25, .09); --shadow-lg: 0 4px 12px rgba(16, 18, 25, .08), 0 28px 60px rgba(16, 18, 25, .13); --wash-alpha: .70; --rail-alpha: 1; --seal-tile: linear-gradient(135deg, #4F2AE8 0%, #B02FD4 55%, #F0451F 100%); --seal-t1: #4F2AE8; --seal-t2: #B02FD4; --seal-t3: #F0451F; --seal-m1: #9aa0ac; --seal-m2: #5f6673; --seal-m3: #3b414d; --seal-m4: #242832; color-scheme: light; } [data-world="voltage"][data-theme="dark"] { --paper: #0d0d14; --paper-2: #15151f; --paper-3: #1b1b27; --line: #262636; --line-soft: #1f1f2c; --ink: #f3f2f8; --ink-2: #b9b7cc; --ink-3: #85839b; --accent: #7c5cff; --accent-ink: #a594ff; --second: #cd5ae8; --second-ink: #dd86f0; /* The five names the stylesheet already uses, folded onto the two above. */ --brand: #7c5cff; --brand-ink: #a594ff; --coral: #7c5cff; --coral-ink: #a594ff; --teal: #cd5ae8; --teal-ink: #dd86f0; --amber: #cd5ae8; --amber-ink: #dd86f0; --magenta: #cd5ae8; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow-md: 0 2px 6px rgba(0, 0, 0, .45), 0 14px 32px rgba(0, 0, 0, .38); --shadow-lg: 0 4px 12px rgba(0, 0, 0, .5), 0 28px 60px rgba(0, 0, 0, .45); --wash-alpha: .40; --rail-alpha: .9; --seal-tile: linear-gradient(135deg, #4F2AE8 0%, #B02FD4 55%, #F0451F 100%); --seal-t1: #4F2AE8; --seal-t2: #B02FD4; --seal-t3: #F0451F; --seal-m1: #9aa0ac; --seal-m2: #5f6673; --seal-m3: #3b414d; --seal-m4: #242832; color-scheme: dark; } /* Verdigris: Copper part way through turning. */ [data-world="verdigris"] { --paper: #f1f0ea; --paper-2: #fdfdf8; --paper-3: #e7e7de; --line: #d8d8cc; --line-soft: #e3e3d8; --ink: #14201c; --ink-2: #3c4a45; --ink-3: #6b7873; --accent: #1f6b5c; --accent-ink: #17564a; --second: #a85a22; --second-ink: #8a4a1c; /* The five names the stylesheet already uses, folded onto the two above. */ --brand: #1f6b5c; --brand-ink: #17564a; --coral: #1f6b5c; --coral-ink: #17564a; --teal: #a85a22; --teal-ink: #8a4a1c; --amber: #a85a22; --amber-ink: #8a4a1c; --magenta: #a85a22; --shadow-sm: 0 1px 2px rgba(16, 18, 25, .05), 0 2px 8px rgba(16, 18, 25, .04); --shadow-md: 0 2px 6px rgba(16, 18, 25, .06), 0 14px 32px rgba(16, 18, 25, .09); --shadow-lg: 0 4px 12px rgba(16, 18, 25, .08), 0 28px 60px rgba(16, 18, 25, .13); --wash-alpha: .70; --rail-alpha: 1; --seal-tile: linear-gradient(135deg, #B4652A 0%, #7C4A20 42%, #2E7D6B 100%); --seal-t1: #B4652A; --seal-t2: #7C4A20; --seal-t3: #2E7D6B; --seal-m1: #f4ecdd; --seal-m2: #d8cbb0; --seal-m3: #a8987a; --seal-m4: #6f6350; color-scheme: light; } [data-world="verdigris"][data-theme="dark"] { --paper: #0b1210; --paper-2: #121a17; --paper-3: #17211d; --line: #24312c; --line-soft: #1b2521; --ink: #eef4f1; --ink-2: #b3c4bd; --ink-3: #82918b; --accent: #2f9e88; --accent-ink: #5fc8b2; --second: #c9762e; --second-ink: #e0954f; /* The five names the stylesheet already uses, folded onto the two above. */ --brand: #2f9e88; --brand-ink: #5fc8b2; --coral: #2f9e88; --coral-ink: #5fc8b2; --teal: #c9762e; --teal-ink: #e0954f; --amber: #c9762e; --amber-ink: #e0954f; --magenta: #c9762e; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow-md: 0 2px 6px rgba(0, 0, 0, .45), 0 14px 32px rgba(0, 0, 0, .38); --shadow-lg: 0 4px 12px rgba(0, 0, 0, .5), 0 28px 60px rgba(0, 0, 0, .45); --wash-alpha: .40; --rail-alpha: .9; --seal-tile: linear-gradient(135deg, #B4652A 0%, #7C4A20 42%, #2E7D6B 100%); --seal-t1: #B4652A; --seal-t2: #7C4A20; --seal-t3: #2E7D6B; --seal-m1: #f4ecdd; --seal-m2: #d8cbb0; --seal-m3: #a8987a; --seal-m4: #6f6350; color-scheme: dark; } /* Cathode: A lit instrument in a dark room. */ [data-world="cathode"] { --paper: #f2f6f8; --paper-2: #ffffff; --paper-3: #e7eef1; --line: #d5e0e5; --line-soft: #e2eaee; --ink: #0a1218; --ink-2: #35464f; --ink-3: #64757e; --accent: #0e7490; --accent-ink: #0b5c73; --second: #1f4a5c; --second-ink: #163846; /* The five names the stylesheet already uses, folded onto the two above. */ --brand: #0e7490; --brand-ink: #0b5c73; --coral: #0e7490; --coral-ink: #0b5c73; --teal: #1f4a5c; --teal-ink: #163846; --amber: #1f4a5c; --amber-ink: #163846; --magenta: #1f4a5c; --shadow-sm: 0 1px 2px rgba(16, 18, 25, .05), 0 2px 8px rgba(16, 18, 25, .04); --shadow-md: 0 2px 6px rgba(16, 18, 25, .06), 0 14px 32px rgba(16, 18, 25, .09); --shadow-lg: 0 4px 12px rgba(16, 18, 25, .08), 0 28px 60px rgba(16, 18, 25, .13); --wash-alpha: .70; --rail-alpha: 1; --seal-tile: radial-gradient(125% 115% at 30% 20%, #12455E 0%, #0A2231 45%, #050C12 100%); --seal-t1: #12455E; --seal-t2: #0A2231; --seal-t3: #050C12; --seal-m1: #ffffff; --seal-m2: #dfe9ee; --seal-m3: #8fa3ad; --seal-m4: #5b6a72; color-scheme: light; } [data-world="cathode"][data-theme="dark"] { --paper: #070b0f; --paper-2: #0d141b; --paper-3: #121b23; --line: #1e2a33; --line-soft: #16202a; --ink: #e8f4f8; --ink-2: #9fb6c2; --ink-3: #71858f; --accent: #22d3ee; --accent-ink: #67e8f9; --second: #3a8fa8; --second-ink: #6fc0d4; /* The five names the stylesheet already uses, folded onto the two above. */ --brand: #22d3ee; --brand-ink: #67e8f9; --coral: #22d3ee; --coral-ink: #67e8f9; --teal: #3a8fa8; --teal-ink: #6fc0d4; --amber: #3a8fa8; --amber-ink: #6fc0d4; --magenta: #3a8fa8; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow-md: 0 2px 6px rgba(0, 0, 0, .45), 0 14px 32px rgba(0, 0, 0, .38); --shadow-lg: 0 4px 12px rgba(0, 0, 0, .5), 0 28px 60px rgba(0, 0, 0, .45); --wash-alpha: .40; --rail-alpha: .9; --seal-tile: radial-gradient(125% 115% at 30% 20%, #12455E 0%, #0A2231 45%, #050C12 100%); --seal-t1: #12455E; --seal-t2: #0A2231; --seal-t3: #050C12; --seal-m1: #ffffff; --seal-m2: #dfe9ee; --seal-m3: #8fa3ad; --seal-m4: #5b6a72; color-scheme: dark; } /* Oxblood: A wax seal. Deep red, brass and handled paper. */ [data-world="oxblood"] { --paper: #f3eee6; --paper-2: #fffcf6; --paper-3: #eae3d7; --line: #dbd0be; --line-soft: #e5dccd; --ink: #1a1013; --ink-2: #4b3a3e; --ink-3: #7a666b; --accent: #6e1420; --accent-ink: #6e1420; --second: #8a6e2a; --second-ink: #6f5820; /* The five names the stylesheet already uses, folded onto the two above. */ --brand: #6e1420; --brand-ink: #6e1420; --coral: #6e1420; --coral-ink: #6e1420; --teal: #8a6e2a; --teal-ink: #6f5820; --amber: #8a6e2a; --amber-ink: #6f5820; --magenta: #8a6e2a; --shadow-sm: 0 1px 2px rgba(16, 18, 25, .05), 0 2px 8px rgba(16, 18, 25, .04); --shadow-md: 0 2px 6px rgba(16, 18, 25, .06), 0 14px 32px rgba(16, 18, 25, .09); --shadow-lg: 0 4px 12px rgba(16, 18, 25, .08), 0 28px 60px rgba(16, 18, 25, .13); --wash-alpha: .70; --rail-alpha: 1; --seal-tile: linear-gradient(140deg, #7A1626 0%, #54101C 55%, #320A12 100%); --seal-t1: #7A1626; --seal-t2: #54101C; --seal-t3: #320A12; --seal-m1: #f6e6b8; --seal-m2: #dcc07a; --seal-m3: #ad8f3f; --seal-m4: #75601f; color-scheme: light; } [data-world="oxblood"][data-theme="dark"] { --paper: #130c0e; --paper-2: #1b1214; --paper-3: #22171a; --line: #322226; --line-soft: #271b1e; --ink: #f4e9e6; --ink-2: #c4aaa8; --ink-3: #94797a; --accent: #a83244; --accent-ink: #d9737f; --second: #c9a227; --second-ink: #dcbf5e; /* The five names the stylesheet already uses, folded onto the two above. */ --brand: #a83244; --brand-ink: #d9737f; --coral: #a83244; --coral-ink: #d9737f; --teal: #c9a227; --teal-ink: #dcbf5e; --amber: #c9a227; --amber-ink: #dcbf5e; --magenta: #c9a227; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow-md: 0 2px 6px rgba(0, 0, 0, .45), 0 14px 32px rgba(0, 0, 0, .38); --shadow-lg: 0 4px 12px rgba(0, 0, 0, .5), 0 28px 60px rgba(0, 0, 0, .45); --wash-alpha: .40; --rail-alpha: .9; --seal-tile: linear-gradient(140deg, #7A1626 0%, #54101C 55%, #320A12 100%); --seal-t1: #7A1626; --seal-t2: #54101C; --seal-t3: #320A12; --seal-m1: #f6e6b8; --seal-m2: #dcc07a; --seal-m3: #ad8f3f; --seal-m4: #75601f; color-scheme: dark; } /* Sodium: A yard under a sodium lamp. */ [data-world="sodium"] { --paper: #f5f1e8; --paper-2: #fffdf7; --paper-3: #ebe5d8; --line: #dcd4c2; --line-soft: #e6dfd0; --ink: #1a1713; --ink-2: #4a4238; --ink-3: #7a7062; --accent: #8a5200; --accent-ink: #6e4100; --second: #4a423a; --second-ink: #37312b; /* The five names the stylesheet already uses, folded onto the two above. */ --brand: #8a5200; --brand-ink: #6e4100; --coral: #8a5200; --coral-ink: #6e4100; --teal: #4a423a; --teal-ink: #37312b; --amber: #4a423a; --amber-ink: #37312b; --magenta: #4a423a; --shadow-sm: 0 1px 2px rgba(16, 18, 25, .05), 0 2px 8px rgba(16, 18, 25, .04); --shadow-md: 0 2px 6px rgba(16, 18, 25, .06), 0 14px 32px rgba(16, 18, 25, .09); --shadow-lg: 0 4px 12px rgba(16, 18, 25, .08), 0 28px 60px rgba(16, 18, 25, .13); --wash-alpha: .70; --rail-alpha: 1; --seal-tile: linear-gradient(150deg, #2E2822 0%, #1A1612 55%, #0E0C0A 100%); --seal-t1: #2E2822; --seal-t2: #1A1612; --seal-t3: #0E0C0A; --seal-m1: #ffd89a; --seal-m2: #ffab3d; --seal-m3: #c9741a; --seal-m4: #8a4a0c; color-scheme: light; } [data-world="sodium"][data-theme="dark"] { --paper: #14120f; --paper-2: #1c1915; --paper-3: #24201b; --line: #332d25; --line-soft: #26221c; --ink: #f5eddf; --ink-2: #bdb0a0; --ink-3: #8d8272; --accent: #ff9f1c; --accent-ink: #ffc46b; --second: #c9741a; --second-ink: #e0954f; /* The five names the stylesheet already uses, folded onto the two above. */ --brand: #ff9f1c; --brand-ink: #ffc46b; --coral: #ff9f1c; --coral-ink: #ffc46b; --teal: #c9741a; --teal-ink: #e0954f; --amber: #c9741a; --amber-ink: #e0954f; --magenta: #c9741a; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow-md: 0 2px 6px rgba(0, 0, 0, .45), 0 14px 32px rgba(0, 0, 0, .38); --shadow-lg: 0 4px 12px rgba(0, 0, 0, .5), 0 28px 60px rgba(0, 0, 0, .45); --wash-alpha: .40; --rail-alpha: .9; --seal-tile: linear-gradient(150deg, #2E2822 0%, #1A1612 55%, #0E0C0A 100%); --seal-t1: #2E2822; --seal-t2: #1A1612; --seal-t3: #0E0C0A; --seal-m1: #ffd89a; --seal-m2: #ffab3d; --seal-m3: #c9741a; --seal-m4: #8a4a0c; color-scheme: dark; } /* Bone and ink: No colour except one, and only where something is urgent. */ [data-world="bone"] { --paper: #f5f2ea; --paper-2: #fffefa; --paper-3: #ebe7dc; --line: #dcd7c8; --line-soft: #e6e2d5; --ink: #14110d; --ink-2: #443f36; --ink-3: #736c60; --accent: #a3231c; --accent-ink: #8c1d17; --second: #443f36; --second-ink: #2c281f; /* The five names the stylesheet already uses, folded onto the two above. */ --brand: #a3231c; --brand-ink: #8c1d17; --coral: #a3231c; --coral-ink: #8c1d17; --teal: #443f36; --teal-ink: #2c281f; --amber: #443f36; --amber-ink: #2c281f; --magenta: #443f36; --shadow-sm: 0 1px 2px rgba(16, 18, 25, .05), 0 2px 8px rgba(16, 18, 25, .04); --shadow-md: 0 2px 6px rgba(16, 18, 25, .06), 0 14px 32px rgba(16, 18, 25, .09); --shadow-lg: 0 4px 12px rgba(16, 18, 25, .08), 0 28px 60px rgba(16, 18, 25, .13); --wash-alpha: .70; --rail-alpha: 1; --seal-tile: #14110d; --seal-t1: #14110d; --seal-t2: #14110d; --seal-t3: #14110d; --seal-m1: #ffffff; --seal-m2: #eae5da; --seal-m3: #c9c2b4; --seal-m4: #a49c8c; color-scheme: light; } [data-world="bone"][data-theme="dark"] { --paper: #0f0e0b; --paper-2: #171510; --paper-3: #1e1b16; --line: #2c2820; --line-soft: #221f19; --ink: #f5f2ea; --ink-2: #bab3a4; --ink-3: #8a8377; --accent: #d94a41; --accent-ink: #ef7f77; --second: #bab3a4; --second-ink: #d8d2c6; /* The five names the stylesheet already uses, folded onto the two above. */ --brand: #d94a41; --brand-ink: #ef7f77; --coral: #d94a41; --coral-ink: #ef7f77; --teal: #bab3a4; --teal-ink: #d8d2c6; --amber: #bab3a4; --amber-ink: #d8d2c6; --magenta: #bab3a4; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow-md: 0 2px 6px rgba(0, 0, 0, .45), 0 14px 32px rgba(0, 0, 0, .38); --shadow-lg: 0 4px 12px rgba(0, 0, 0, .5), 0 28px 60px rgba(0, 0, 0, .45); --wash-alpha: .40; --rail-alpha: .9; --seal-tile: #14110d; --seal-t1: #14110d; --seal-t2: #14110d; --seal-t3: #14110d; --seal-m1: #ffffff; --seal-m2: #eae5da; --seal-m3: #c9c2b4; --seal-m4: #a49c8c; color-scheme: dark; } /* Cobalt and chalk: Blueprint and workwear. */ [data-world="cobalt"] { --paper: #eef1f5; --paper-2: #ffffff; --paper-3: #e3e8ef; --line: #d2dae5; --line-soft: #dfe5ec; --ink: #0b1524; --ink-2: #37455a; --ink-3: #66758c; --accent: #123c8c; --accent-ink: #123c8c; --second: #b8842b; --second-ink: #946722; /* The five names the stylesheet already uses, folded onto the two above. */ --brand: #123c8c; --brand-ink: #123c8c; --coral: #123c8c; --coral-ink: #123c8c; --teal: #b8842b; --teal-ink: #946722; --amber: #b8842b; --amber-ink: #946722; --magenta: #b8842b; --shadow-sm: 0 1px 2px rgba(16, 18, 25, .05), 0 2px 8px rgba(16, 18, 25, .04); --shadow-md: 0 2px 6px rgba(16, 18, 25, .06), 0 14px 32px rgba(16, 18, 25, .09); --shadow-lg: 0 4px 12px rgba(16, 18, 25, .08), 0 28px 60px rgba(16, 18, 25, .13); --wash-alpha: .70; --rail-alpha: 1; --seal-tile: linear-gradient(140deg, #0F3D91 0%, #0A2A66 55%, #061838 100%); --seal-t1: #0F3D91; --seal-t2: #0A2A66; --seal-t3: #061838; --seal-m1: #ffffff; --seal-m2: #dbe3ee; --seal-m3: #9fb0c6; --seal-m4: #67788e; color-scheme: light; } [data-world="cobalt"][data-theme="dark"] { --paper: #080d16; --paper-2: #10161f; --paper-3: #151d29; --line: #212b3a; --line-soft: #18202c; --ink: #eef2f8; --ink-2: #adbaca; --ink-3: #7d8a9c; --accent: #3f6fd8; --accent-ink: #8aa9ee; --second: #d9a13f; --second-ink: #e8bd6e; /* The five names the stylesheet already uses, folded onto the two above. */ --brand: #3f6fd8; --brand-ink: #8aa9ee; --coral: #3f6fd8; --coral-ink: #8aa9ee; --teal: #d9a13f; --teal-ink: #e8bd6e; --amber: #d9a13f; --amber-ink: #e8bd6e; --magenta: #d9a13f; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow-md: 0 2px 6px rgba(0, 0, 0, .45), 0 14px 32px rgba(0, 0, 0, .38); --shadow-lg: 0 4px 12px rgba(0, 0, 0, .5), 0 28px 60px rgba(0, 0, 0, .45); --wash-alpha: .40; --rail-alpha: .9; --seal-tile: linear-gradient(140deg, #0F3D91 0%, #0A2A66 55%, #061838 100%); --seal-t1: #0F3D91; --seal-t2: #0A2A66; --seal-t3: #061838; --seal-m1: #ffffff; --seal-m2: #dbe3ee; --seal-m3: #9fb0c6; --seal-m4: #67788e; color-scheme: dark; } /* The seal reads its colours from the tokens above rather than from hard coded stops, so changing world repaints the mark with the page. SVG stop colours cannot take var() as a presentation attribute, only as a CSS property, which is why these are selectors and not attributes. */ #seal-metal stop:nth-child(1), #wm-metal stop:nth-child(1) { stop-color: var(--seal-m1); } #seal-metal stop:nth-child(2), #wm-metal stop:nth-child(2) { stop-color: var(--seal-m2); } #seal-metal stop:nth-child(3), #wm-metal stop:nth-child(3) { stop-color: var(--seal-m3); } #seal-metal stop:nth-child(4), #wm-metal stop:nth-child(4) { stop-color: var(--seal-m4); } .wordmark__mark stop:nth-child(1) { stop-color: var(--seal-t1); } .wordmark__mark stop:nth-child(2) { stop-color: var(--seal-t2); } .wordmark__mark stop:nth-child(3) { stop-color: var(--seal-t3); } /* Two groups, two treatments. The mark is filled; the initials are stroked and must stay unfilled, and a blanket fill on every path in the tile turns each open glyph into a solid blob, because a CSS declaration beats the fill="none" presentation attribute on the group. */ .wordmark__mark [data-metal="solid"] path { fill: var(--seal-m1); } .wordmark__mark [data-metal="line"] { stroke: var(--seal-m1); } .wordmark__mark [data-metal="line"] path { fill: none; } .wordmark__mark [data-metal="line"] circle { fill: var(--seal-m1); stroke: none; } /* <<< THEME BLOCK */