/* HOPE THIS HELPS — skins. * * One block per art direction. The layout in style.css never changes; this file * changes everything else. A level declares its theme in levels/index.js and the * shell swaps `data-theme` on at the peak of the glitch. * * Adding a theme: copy a block, change the values, give it a name, point a level * at it. Do not add layout rules here — if you need to move something, the theme * is fighting the shell and one of them is wrong. * * Every "no shadow" value is `0 0 0 0 transparent` rather than `none`, because * these tokens are composed into box-shadow lists and `none` is illegal there. */ :root { /* The four plates' own colours, and they are DATA rather than paint. * * They have to match functions/api/asset/[name].js exactly, because level 29 * prints four words of a note in them and the whole puzzle is that a reader * recognises which plate each word belongs to. If these drift from the SVGs * the level stops working and nothing catches it — so they live here, once, * named, instead of as loose hex in style.css. Not per-skin: a plate is the * same object whatever era the system is pretending to be from. */ --plate-square: #2E6F6F; --plate-diamond: #7A4FB0; --plate-circle: #B0552F; --plate-triangle: #3F7A4A; --stack-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Courier New", monospace; --stack-serif: "Iowan Old Style", Charter, "Palatino Linotype", Palatino, Georgia, serif; --stack-didone: Didot, "Bodoni 72", "Times New Roman", Times, serif; --stack-grotesk: "Helvetica Neue", Helvetica, Arial, sans-serif; /* geometry — shared by every theme so the layout truly cannot drift */ --border-w: 1px; --border-style: solid; --radius: 0; --titlebar-pad: 3px 6px; --titlebar-size: 12px; --titlebar-weight: 400; --titlebar-transform: none; --btn-transform: none; --tracking: 0; --tracking-wide: 0.1em; --font: var(--stack-mono); --font-display: var(--stack-mono); --font-mono: var(--stack-mono); --font-input: var(--stack-mono); --smoothing: auto; --overlay-img: none; --overlay-size: auto; --overlay-blend: normal; --overlay-opacity: 0; --focus-style: dotted; --tbtn-opacity: 1; /* The one colour that is deliberately the same in every skin: the marker that paints the gaps on level 40. It is an annotation on the transmission, not part of the transmission, so it does not take the theme's costume. */ --gap-mark: #39FF14; } /* How hard each world sits on the tube. A phosphor terminal blooms; a printed page being displayed on the same monitor should not pretend it is glowing. */ [data-theme="terminal"] { --crt-scanline: 0.34; --crt-grille: 0.09; } [data-theme="teletext"] { --crt-scanline: 0.30; --crt-grille: 0.10; } [data-theme="void"] { --crt-scanline: 0.26; --crt-grille: 0.06; } [data-theme="archive"] { --crt-scanline: 0.12; --crt-grille: 0.03; } [data-theme="plate"] { --crt-scanline: 0.10; --crt-grille: 0.02; } [data-theme="risograph"] { --crt-scanline: 0.11; --crt-grille: 0.03; } [data-theme="brutalist"] { --crt-scanline: 0.09; --crt-grille: 0.02; --crt-vignette: 0.34; } [data-theme="lab"] { --crt-scanline: 0.12; --crt-grille: 0.03; --crt-vignette: 0.38; } /* ══ 1 · MACHINE ═══════════════════════════════════════════════════════════ An operating system from 1993 that you have no manual for. */ :root, [data-theme="machine"] { --desk: #4E5F5C; --desk-img: repeating-linear-gradient(0deg, rgba(0,0,0,0.045) 0 1px, transparent 1px 3px); --desk-ink: #EFEEE7; --face: #CFCDC2; --face-alt: #B7B5AA; --face-hover: #D8D6CB; --edge: #16161A; --rule: #9A988E; --stripe: rgba(0,0,0,0.04); --bevel-out: inset -1px -1px 0 #7E7C73, inset 1px 1px 0 #EFEEE7; --bevel-in: inset 1px 1px 0 #7E7C73; --win-shadow: 4px 4px 0 rgba(0,0,0,0.32); --ink: #1C1C18; --dim: #5F5D55; --accent: #1E5F5F; --accent-ink: #E6F2F0; --accent-mark: #1E5F5F; --field: #E6E4DA; --field-ink: #1C1C18; --field-edge: #16161A; --alert: #7A2018; --warn: #7A5A10; --ok: #1E5F5F; --focus: #16161A; --scrim: rgba(20,24,22,0.45); --tbtn-bg: #CFCDC2; --tbtn-edge: #16161A; --seg-bg: #14201E; --seg-off: #22332F; --seg-on: #4BE0A8; --seg-glow: 0 0 5px rgba(75,224,168,0.55); --smoothing: none; } /* ══ 2 · TERMINAL ══════════════════════════════════════════════════════════ Green phosphor. Nothing has depth; everything glows a little. */ [data-theme="terminal"] { --desk: #04100A; --desk-img: none; --desk-ink: #4BE0A8; --face: #061409; --face-alt: #0A2415; --face-hover: #0E3020; --edge: #1EE07A; --rule: #1A6B43; --stripe: rgba(30,224,122,0.05); --bevel-out: 0 0 0 0 transparent; --bevel-in: 0 0 0 0 transparent; --win-shadow: 0 0 34px rgba(30,224,122,0.16); --ink: #4BE0A8; --dim: #2A8C63; --accent: #0C2A18; --accent-ink: #8CFFCB; --accent-mark: #4BE0A8; --field: #04150C; --field-ink: #7DFFC4; --field-edge: #1EE07A; --alert: #FF6B5C; --warn: #E0C24B; --ok: #4BE0A8; --focus: #4BE0A8; --focus-style: solid; --scrim: rgba(2,12,7,0.7); --tbtn-bg: transparent; --tbtn-edge: #1EE07A; --seg-bg: #04150C; --seg-off: #103324; --seg-on: #4BE0A8; --seg-glow: 0 0 6px rgba(75,224,168,0.7); --titlebar-transform: uppercase; --tracking-wide: 0.16em; --smoothing: none; --overlay-img: repeating-linear-gradient(0deg, rgba(0,0,0,0.42) 0 1px, transparent 1px 3px); --overlay-opacity: 1; } [data-theme="terminal"] body, [data-theme="terminal"] .win { text-shadow: 0 0 6px rgba(75,224,168,0.4); } /* ══ 3 · BLUEPRINT ═════════════════════════════════════════════════════════ Drafted, not designed. Hairlines, no fills, everything dimensioned. */ [data-theme="blueprint"] { --desk: #0B2350; --desk-img: none; --desk-ink: #BFDBFF; --face: #123566; --face-alt: #0E2B55; --face-hover: #17407A; --edge: #8FC6FF; --rule: #3D6DA8; --stripe: rgba(143,198,255,0.05); --bevel-out: 0 0 0 0 transparent; --bevel-in: 0 0 0 0 transparent; --win-shadow: 0 10px 30px rgba(0,0,0,0.35); --ink: #E4F0FF; --dim: #8FB4E0; --accent: #0A1C3D; --accent-ink: #BFE0FF; --accent-mark: #8FC6FF; --field: #0C2A55; --field-ink: #E4F0FF; --field-edge: #8FC6FF; --alert: #FFAE4D; --warn: #FFD98A; --ok: #7DFFB0; --focus: #8FC6FF; --focus-style: dashed; --scrim: rgba(4,16,38,0.6); --tbtn-bg: transparent; --tbtn-edge: #8FC6FF; --seg-bg: #081C3D; --seg-off: #14335C; --seg-on: #8FC6FF; --seg-glow: 0 0 0 transparent; --border-style: solid; --titlebar-transform: uppercase; --tracking-wide: 0.2em; --smoothing: antialiased; --overlay-img: repeating-linear-gradient(0deg, rgba(143,198,255,0.09) 0 1px, transparent 1px 26px), repeating-linear-gradient(90deg, rgba(143,198,255,0.09) 0 1px, transparent 1px 26px); --overlay-opacity: 1; } [data-theme="blueprint"] .lv-files thead th, [data-theme="blueprint"] .statusbar { border-style: dashed; } /* ══ 4 · ARCHIVE ═══════════════════════════════════════════════════════════ Institutional paper. Nobody is talking to you; you are reading a file. */ [data-theme="archive"] { --desk: #4A4335; --desk-img: none; --desk-ink: #E9E5DA; --face: #E9E5DA; --face-alt: #DAD4C4; --face-hover: #F1EEE5; --edge: #1A1712; --rule: #A79E88; --stripe: rgba(26,23,18,0.045); --bevel-out: 0 0 0 0 transparent; --bevel-in: 0 0 0 0 transparent; --win-shadow: 7px 7px 0 rgba(0,0,0,0.22); --ink: #1A1712; --dim: #6A6252; --accent: #A32A1E; --accent-ink: #F7EFE1; --accent-mark: #A32A1E; --field: #F5F2E9; --field-ink: #1A1712; --field-edge: #1A1712; --alert: #A32A1E; --warn: #8A6410; --ok: #3D6B3A; --focus: #1A1712; --scrim: rgba(28,24,18,0.5); --tbtn-bg: #E9E5DA; --tbtn-edge: #1A1712; --seg-bg: #DAD4C4; --seg-off: #C6BEA8; --seg-on: #1A1712; --seg-glow: 0 0 0 transparent; --font-display: var(--stack-serif); --titlebar-size: 13px; --titlebar-pad: 5px 8px; --titlebar-transform: uppercase; --tracking-wide: 0.22em; --smoothing: antialiased; --overlay-img: repeating-linear-gradient(37deg, rgba(120,105,80,0.05) 0 1px, transparent 1px 4px), repeating-linear-gradient(-51deg, rgba(120,105,80,0.04) 0 1px, transparent 1px 6px); --overlay-opacity: 1; } /* ══ 5 · PLATE ═════════════════════════════════════════════════════════════ A field guide to a taxonomy that does not exist. */ [data-theme="plate"] { --desk: #241F18; --desk-img: none; --desk-ink: #ECE7DB; --face: #ECE7DB; --face-alt: #E1DACA; --face-hover: #F4F0E7; --edge: #16130D; --rule: #B5AB93; --stripe: rgba(22,19,13,0.035); --bevel-out: 0 0 0 0 transparent; --bevel-in: 0 0 0 0 transparent; --win-shadow: 0 18px 40px rgba(0,0,0,0.45); --ink: #16130D; --dim: #6E6553; --accent: #16130D; --accent-ink: #ECE7DB; --accent-mark: #B03A1E; --field: #F6F2E8; --field-ink: #16130D; --field-edge: #16130D; --alert: #B03A1E; --warn: #8A6A18; --ok: #4A6B2E; --focus: #B03A1E; --focus-style: solid; --scrim: rgba(20,17,12,0.55); --tbtn-bg: transparent; --tbtn-edge: #ECE7DB; --tbtn-opacity: 0.55; --seg-bg: #E1DACA; --seg-off: #CDC3AB; --seg-on: #16130D; --seg-glow: 0 0 0 transparent; --font: var(--stack-serif); --font-display: var(--stack-didone); --titlebar-size: 15px; --titlebar-pad: 7px 10px; --titlebar-transform: uppercase; --tracking-wide: 0.3em; --smoothing: antialiased; } /* ══ 6 · TELETEXT ══════════════════════════════════════════════════════════ Solid colour blocks on pure black. Broadcast, not printed. */ [data-theme="teletext"] { --desk: #000000; --desk-img: none; --desk-ink: #3FE0E0; --face: #000000; --face-alt: #00229E; --face-hover: #0033CC; --edge: #FFFFFF; --rule: #2A46B5; --stripe: rgba(255,255,255,0.05); --bevel-out: 0 0 0 0 transparent; --bevel-in: 0 0 0 0 transparent; --win-shadow: 0 0 0 0 transparent; --ink: #FFE94D; --dim: #3FE0E0; --accent: #C21F1F; --accent-ink: #FFFFFF; --accent-mark: #3FE060; --field: #00229E; --field-ink: #FFFFFF; --field-edge: #FFFFFF; --alert: #FF5A5A; --warn: #FFE94D; --ok: #3FE060; --focus: #FFFFFF; --focus-style: solid; --scrim: rgba(0,0,0,0.75); --tbtn-bg: #FFE94D; --tbtn-edge: #FFFFFF; --seg-bg: #000000; --seg-off: #1B1B1B; --seg-on: #3FE060; --seg-glow: 0 0 0 transparent; --border-w: 2px; --titlebar-size: 14px; --titlebar-weight: 700; --titlebar-pad: 5px 8px; --titlebar-transform: uppercase; --btn-transform: uppercase; --tracking: 0.06em; --tracking-wide: 0.18em; --smoothing: none; } [data-theme="teletext"] body { font-weight: 700; } [data-theme="teletext"] .lv-dim { color: var(--dim); } /* ══ 9 · SYSTEM 7 ══════════════════════════════════════════════════════════ The same idea as MACHINE, executed cleanly: crisp black hairlines on white with a pinstriped title bar, instead of putty on olive. */ [data-theme="system7"] { --desk: #8E8E93; --desk-img: repeating-conic-gradient(#84848A 0 25%, #98989E 0 50%); --desk-ink: #FFFFFF; --face: #FFFFFF; --face-alt: #EDEDED; --face-hover: #F6F6F6; --edge: #000000; --rule: #B4B4B8; --stripe: rgba(0,0,0,0.035); --bevel-out: 0 0 0 0 transparent; --bevel-in: 0 0 0 0 transparent; --win-shadow: 2px 2px 0 rgba(0,0,0,0.55); --ink: #000000; --dim: #6E6E73; --accent: #FFFFFF; --accent-ink: #000000; --accent-mark: #000000; --field: #FFFFFF; --field-ink: #000000; --field-edge: #000000; --alert: #A81E12; --warn: #8A6410; --ok: #12662F; --focus: #000000; --scrim: rgba(60,60,64,0.5); --tbtn-bg: #FFFFFF; --tbtn-edge: #000000; --seg-bg: #EDEDED; --seg-off: #D2D2D6; --seg-on: #000000; --seg-glow: 0 0 0 transparent; --font: Geneva, Verdana, "Helvetica Neue", sans-serif; --font-display: Geneva, Verdana, "Helvetica Neue", sans-serif; --titlebar-weight: 700; --titlebar-size: 11px; --tracking-wide: 0.04em; --smoothing: none; } /* the pinstripes that made a window look active */ [data-theme="system7"] .titlebar { background-image: repeating-linear-gradient( 180deg, #000 0 1px, transparent 1px 2px ); background-clip: padding-box; } [data-theme="system7"] .titlebar > span:nth-child(2) { background: #FFFFFF; padding: 0 8px; } /* ══ 10 · VOID ═════════════════════════════════════════════════════════════ Almost nothing. One hairline, small type, and an enormous amount of dark. The password field ends up being the only thing on the screen. */ [data-theme="void"] { --desk: #08080A; --desk-img: none; --desk-ink: #4A4A53; --face: #0D0D10; --face-alt: #0D0D10; --face-hover: #16161B; --edge: #2C2C34; --rule: #1E1E24; --stripe: rgba(255,255,255,0.02); --bevel-out: 0 0 0 0 transparent; --bevel-in: 0 0 0 0 transparent; --win-shadow: 0 0 0 0 transparent; --ink: #CBCBD4; --dim: #55555E; --accent: #0D0D10; --accent-ink: #6E6E78; --accent-mark: #CBCBD4; --field: #08080A; --field-ink: #EDEDF2; --field-edge: #2C2C34; --alert: #9E6A6A; --warn: #9E8F6A; --ok: #6A9E82; --focus: #CBCBD4; --focus-style: solid; --scrim: rgba(4,4,6,0.8); --tbtn-bg: transparent; --tbtn-edge: #2C2C34; --tbtn-opacity: 0.45; --seg-bg: #08080A; --seg-off: #1A1A20; --seg-on: #CBCBD4; --seg-glow: 0 0 0 transparent; --titlebar-size: 10px; --titlebar-transform: uppercase; --tracking-wide: 0.34em; --smoothing: antialiased; } /* the title bar is a caption, not a bar */ [data-theme="void"] .titlebar { border-bottom-color: var(--rule); } [data-theme="void"] .win { border-color: var(--rule); } [data-theme="void"] .lv-count .grp { border-color: var(--rule); background: transparent; } /* ══ 11 · LAB ══════════════════════════════════════════════════════════════ Clinical. White ground, cool hairlines, one cobalt. Everything measured. */ [data-theme="lab"] { --desk: #D6D9DD; --desk-img: none; --desk-ink: #2A2F36; --face: #FFFFFF; --face-alt: #F1F3F5; --face-hover: #E8EBEF; --edge: #C0C6CD; --rule: #DDE1E6; --stripe: rgba(35,64,200,0.035); --bevel-out: 0 0 0 0 transparent; --bevel-in: 0 0 0 0 transparent; --win-shadow: 0 12px 32px rgba(30,40,60,0.16); --ink: #14181D; --dim: #6B7480; --accent: #2340C8; --accent-ink: #FFFFFF; --accent-mark: #2340C8; --field: #FBFCFD; --field-ink: #14181D; --field-edge: #C0C6CD; --alert: #C0392B; --warn: #9A6A00; --ok: #1D7A4D; --focus: #2340C8; --focus-style: solid; --scrim: rgba(20,24,29,0.35); --tbtn-bg: #FFFFFF; --tbtn-edge: #C0C6CD; --seg-bg: #F1F3F5; --seg-off: #DDE1E6; --seg-on: #2340C8; --seg-glow: 0 0 0 transparent; --titlebar-size: 11px; --titlebar-transform: uppercase; --tracking-wide: 0.2em; --smoothing: antialiased; } /* ══ 12 · SANCTUM ═════════════════════════════════════════════════════════ Not a period. A condition. Only level 11 uses this. */ [data-theme="sanctum"] { --desk: #060204; --desk-img: none; --desk-ink: #C4423A; --face: #0B0305; --face-alt: #140508; --face-hover: #1B070B; --edge: #7E1A18; --rule: #46100F; --stripe: rgba(196,66,58,0.05); --bevel-out: 0 0 0 0 transparent; --bevel-in: 0 0 0 0 transparent; --win-shadow: 0 0 60px rgba(190, 30, 26, 0.30); --ink: #E4574C; --dim: #8A2A26; --accent: #120406; --accent-ink: #E4574C; --accent-mark: #FF2A2A; --field: #060204; --field-ink: #FF6A5E; --field-edge: #7E1A18; --alert: #FF3B2E; --warn: #C8802A; --ok: #C4423A; --focus: #FF2A2A; --focus-style: solid; --scrim: rgba(6,2,4,0.8); --tbtn-bg: transparent; --tbtn-edge: #7E1A18; --seg-bg: #060204; --seg-off: #2A0A0C; --seg-on: #FF2A2A; --seg-glow: 0 0 8px rgba(255, 42, 42, 0.8); --titlebar-transform: none; --tracking-wide: 0.4em; --smoothing: antialiased; --crt-scanline: 0.30; --crt-grille: 0.08; } [data-theme="sanctum"] body, [data-theme="sanctum"] .win { text-shadow: 0 0 10px rgba(255, 42, 42, 0.45); } /* ══ 7 · RISOGRAPH ═════════════════════════════════════════════════════════ Two inks on cheap stock, slightly out of register. */ [data-theme="risograph"] { --desk: #D9D3C4; --desk-img: none; --desk-ink: #1F2B6B; --face: #F2EDE0; --face-alt: #E6DFCD; --face-hover: #FAF6EC; --edge: #1F2B6B; --rule: #8E93BE; --stripe: rgba(255,64,129,0.07); --bevel-out: 0 0 0 0 transparent; --bevel-in: 0 0 0 0 transparent; --win-shadow: 3px 3px 0 rgba(255,64,129,0.55); --ink: #1F2B6B; --dim: #6C74A8; --accent: #FF4081; --accent-ink: #FFF4F8; --accent-mark: #FF4081; --field: #FAF6EC; --field-ink: #1F2B6B; --field-edge: #1F2B6B; --alert: #E5245F; --warn: #B4700F; --ok: #1F2B6B; --focus: #FF4081; --focus-style: solid; --scrim: rgba(31,43,107,0.4); --tbtn-bg: #F2EDE0; --tbtn-edge: #1F2B6B; --seg-bg: #E6DFCD; --seg-off: #CFC7B2; --seg-on: #FF4081; --seg-glow: 0 0 0 transparent; --border-w: 2px; --titlebar-transform: uppercase; --tracking-wide: 0.18em; --smoothing: antialiased; --overlay-img: radial-gradient(rgba(31,43,107,0.05) 1px, transparent 1px); --overlay-size: 4px 4px; --overlay-opacity: 1; } /* ══ 8 · BRUTALIST ═════════════════════════════════════════════════════════ No ornament whatsoever. Hairlines and one weight of one face. */ [data-theme="brutalist"] { --desk: #E4E4E4; --desk-img: none; --desk-ink: #111111; --face: #FFFFFF; --face-alt: #FFFFFF; --face-hover: #F2F2F2; --edge: #111111; --rule: #111111; --stripe: transparent; --bevel-out: 0 0 0 0 transparent; --bevel-in: 0 0 0 0 transparent; --win-shadow: 0 0 0 0 transparent; --ink: #111111; --dim: #767676; --accent: #FFFFFF; --accent-ink: #111111; --accent-mark: #111111; --field: #FFFFFF; --field-ink: #111111; --field-edge: #111111; --alert: #111111; --warn: #767676; --ok: #111111; --focus: #111111; --focus-style: solid; --scrim: rgba(228,228,228,0.85); --tbtn-bg: #FFFFFF; --tbtn-edge: #111111; --seg-bg: #FFFFFF; --seg-off: #DDDDDD; --seg-on: #111111; --seg-glow: 0 0 0 transparent; --font: var(--stack-grotesk); --font-display: var(--stack-grotesk); --font-input: var(--stack-grotesk); --titlebar-transform: uppercase; --titlebar-size: 11px; --tracking-wide: 0.24em; --smoothing: antialiased; }