/* Blanc -- paper, hairlines, one red. * * The first light skin, and the proof that the contract is not secretly a * dark-skin contract: every bevel token here carries the same hairline, so the * borders that extrude under Llama lie flat, and the display inverts -- black * blocks punched out of the paper rather than a lit screen in a dark room. * Source: TheLine.dc.html (direction B). * * Four values are chosen rather than sampled, because they answer questions the * artboard never had to: * * --ink-on-accent the artboard only ever writes in vermillion, it never * fills with it. Paper on #e3452f is 3.64:1, so this is * the same near-black as everything else, at 4.53:1 -- * a margin of +0.03 over the floor, and the reason the * accent cannot be lightened without failing * contrast_test. * --surface-row-active the artboard tints the held row #faf9f5, which is * 1.06:1 against the resting row and fails * MIN_SURFACE_STEP. Inverted to the display's black * instead, which is how the artboard marks anything * that matters. * --positive there is no green in the artboard at any value, and * nothing else in the palette can mean "healthy" * without also meaning "live". * --accent-secondary black for the same reason it is gold under Llama: it * is the ornament that carries emphasis, and here that * is a solid block, not a warm metal. */ [data-skin="blanc"] { /* page */ --bg-page: #f4f2ed; --bg-page-texture: none; --bg-page-lights: none; --surface-blur: none; --surface-panel: #ffffff; --surface-raised: #e7e3da; --surface-sunken: #ddd9d0; --surface-row: #f4f2ed; --surface-row-active: #141414; --ink-on-row: #141414; --ink-on-row-dim: #6d6961; /* ink */ --ink-primary: #141414; --ink-secondary: #5a564f; --ink-muted: #625e57; --ink-on-accent: #141414; --ink-on-active-row: #f4f2ed; /* accent */ --accent: #e3452f; --focus-shadow: 0 0 14px rgba(227, 69, 47, 0.42); --accent-secondary: #141414; --danger: #b62f1e; --positive: #2f7d4f; /* readout -- the room display, inverted out of the paper */ --readout-bg: #141414; --readout-ink: #f4f2ed; --readout-ink-dim: #a8a39a; --readout-glow: none; --readout-texture: none; /* chrome -- a black bar with a mono wordmark, no window furniture */ --chrome-bg: #141414; --chrome-shadow: none; --chrome-ink: #f4f2ed; --chrome-height: 34px; --chrome-font: "IBM Plex Mono", ui-monospace, monospace; --chrome-size: 12px; --chrome-tracking: 0.24em; --chrome-transform: uppercase; --chrome-text-align: left; --chrome-buttons: none; --chrome-close-display: none; --chrome-button-size: 16px; --chrome-button-pad: var(--space-2); --chrome-button-bg: transparent; --chrome-rail: none; --chrome-rail-display: none; --chrome-title-bg: transparent; --chrome-title-border: 0 solid transparent; --chrome-title-padding: 0; --chrome-title-radius: 0; --chrome-button-border-width: 0px; --chrome-button-minimize-image: none; --chrome-button-maximize-image: none; --chrome-button-close-image: none; --chrome-button-ink: #f4f2ed; --chrome-close-bg: transparent; /* edge -- one hairline, four sides, zero radius */ --edge-width: 1px; --edge-radius: 0px; --edge-radius-sm: 0px; --edge-radius-pill: 999px; --edge-top: #d8d4cb; --edge-left: #d8d4cb; --edge-right: #d8d4cb; --edge-bottom: #d8d4cb; --edge-inset-top: #ddd9d0; --edge-inset-left: #ddd9d0; --edge-inset-right: #ddd9d0; --edge-inset-bottom: #ddd9d0; --edge-hairline: #d8d4cb; --device-radius: 40px; --edge-shadow: none; --edge-shadow-float: 0 24px 48px rgba(20, 20, 20, 0.10); /* control -- white face, hairline outline, no bevel to reverse */ --control-height: 56px; --control-radius: 0px; --control-face: #ffffff; --control-texture: none; --control-frame-image: none; --control-frame-image-active: none; --control-frame-slice: 100%; --control-frame-width: 1; --control-frame-outset: 0; --control-face-active: #f4f2ed; --control-ghost-hover-face: rgba(20, 20, 20, 0.05); --control-border-width: var(--edge-width); --control-icon-border-width: var(--edge-width); --control-decrement-icon: url("/llama/icons/remove.svg"); --control-increment-icon: url("/llama/icons/add.svg"); --control-ink: #141414; --control-font: "Space Grotesk", system-ui, sans-serif; --control-size: 15px; --control-tracking: 0.02em; --control-transform: none; --control-light: #d8d4cb; --control-dark: #d8d4cb; --control-shadow: none; --control-shadow-hover: none; --control-shadow-active: none; --control-icon-shadow: none; --control-icon-shadow-active: none; --control-content-shadow: 0 0 0 transparent; --control-content-shadow-active: 0 0 0 transparent; --control-hover-filter: none; --control-pad: var(--space-4); /* room actions -- the pause/skip row under the player, and the rule that closes it off from the search field below */ --action-lift: var(--space-2); --action-icon-display: block; --action-divider-width: var(--edge-width); --action-divider-gap: var(--space-4); /* meter -- a 2px rule with a red run along it */ --meter-track: #e7e3da; --meter-fill: #e3452f; --meter-height: 2px; --meter-radius: 0px; --meter-thumb: #141414; --meter-thumb-width: 8px; --meter-thumb-height: 22px; /* visualizer -- graphite, not red: the artboard spends vermillion only on thin marks, never on a field this size */ --viz-gradient: linear-gradient(#141414, #3d3a34); --viz-gap: 2px; --viz-radius: 0px; --viz-floor: 0.18; /* art -- a black tile, ruled like the lists, no record underneath */ --art-radius: 0px; --art-bg: #141414; --art-ink: #f4f2ed; --art-texture: repeating-linear-gradient(0deg, rgba(244, 242, 237, 0.10) 0 1px, rgba(244, 242, 237, 0) 1px 12px); --art-label: transparent; --art-spindle: transparent; --art-hole: transparent; --art-spin: none; /* type */ --font-display: "Space Grotesk", system-ui, sans-serif; --font-body: "Space Grotesk", system-ui, sans-serif; --font-readout: "IBM Plex Mono", ui-monospace, monospace; --font-label: "IBM Plex Mono", ui-monospace, monospace; --label-size: 12px; --label-tracking: 0.16em; --label-transform: uppercase; --label-weight: 500; --title-tracking: -0.03em; --title-transform: none; --title-weight: 700; --body-line: 1.5; /* motion */ --viz-period: 840ms; --marquee-duration: 26s; --bg-lights-drift: none; --ease: cubic-bezier(0.2, 0, 0, 1); }