/* The palette, in one place, so a client can have its own. * * Every value under :root is exactly the colour that was written into the * pages before this file existed. Chevron therefore renders identically - that * was checked by resolving each replaced declaration in the browser and * comparing it to the value it had before. * * Only the colours that carry a client's identity are here: the brand, the * surfaces, the text ramp, the lines. The status colours are deliberately left * written into the pages, because they are not identity - a bounce is red and a * delivery is green for every client, and making them themeable would invite * someone to make "failed" look reassuring. * * A client is selected by data-client on , set by clients.js from the * address. An unknown value simply keeps the defaults. */ :root { /* Brand. The one colour that most makes the screen look like someone's. */ --brand: oklch(68% 0.17 45); --brand-strong: oklch(50% 0.16 45); --brand-wash: oklch(94% 0.04 45); --brand-ink: #ffffff; /* Surfaces, from the page behind everything up to the palest card. */ --surface: oklch(93% 0.01 70); --surface-2: oklch(96% 0.01 70); --surface-3: oklch(97.5% 0.006 75); --panel: #ffffff; /* Lines. */ --line: oklch(89% 0.012 70); --line-soft: oklch(90% 0.008 70); /* Text, darkest to faintest. */ --ink: oklch(24% 0.02 55); --ink-2: oklch(30% 0.02 55); --muted: oklch(50% 0.02 55); --muted-2: oklch(48% 0.02 55); --muted-3: oklch(45% 0.02 55); --faint: oklch(55% 0.02 55); /* A second colour, used for links and highlights that are not the brand. */ --accent: oklch(62% 0.11 195); /* The public join form. A separate palette on purpose: it is the one page a subscriber sees, and it has always looked different from the dashboard. These defaults are Chevron's current colours, unchanged. */ --join-bg: #ede4d3; --join-card: #ffffff; --join-ink: #3a2417; --join-muted: #6b6259; --join-line: #e8e2d8; --join-accent: #8a5a2a; --join-strong: #642a19; --join-highlight: #faf3e4; --join-head: #f7f0e3; --join-head-ink: #3a2417; --join-head-sub: #6b6259; } /* פריימן. - navy and gold, taken from his own newsletter and converted from * the hex it is written in there, rather than eyeballed. * * The brand slot gets the gold: it is what his eye reads as "his", and it is * what sits on the buttons. The navy is the ink, the way it is the header in * his letter. Gold is bright, so --brand-ink goes dark or the text on a button * would be white on yellow. */ :root[data-client="nekuda"] { --brand: oklch(76.7% 0.139 91); --brand-strong: oklch(62% 0.125 89); --brand-wash: oklch(98.5% 0.007 89); --brand-ink: oklch(27.9% 0.037 249); --surface: oklch(96.0% 0.005 258); --surface-2: oklch(97.5% 0.004 258); --surface-3: oklch(98.6% 0.003 258); --line: oklch(95.9% 0.009 248); --line-soft: oklch(97% 0.006 248); --ink: oklch(27.9% 0.037 249); --ink-2: oklch(35% 0.036 255); --muted: oklch(44.7% 0.034 261); --muted-2: oklch(49.1% 0.014 240); --muted-3: oklch(52% 0.038 259); --faint: oklch(55.4% 0.041 257); /* His navy. It is the sign-in panel and it is the links, the way it is the masthead of his letter. */ --accent: oklch(27.9% 0.037 249); /* טופס ההצטרפות שלו — הנייבי והזהב, כמו במכתב. */ --join-bg: #f0f2f5; --join-card: #ffffff; --join-ink: #1a2a3a; --join-muted: #5a6268; --join-line: #e2e8f0; --join-accent: #d4af37; --join-strong: #1a2a3a; --join-highlight: #fcfaf5; --join-head: #1a2a3a; --join-head-ink: #ffffff; --join-head-sub: #d4af37; } /* הפלטפורמה — הכתום והפחם של פריימן, בדיוק כפי שהם באתר ובדף הנחיתה. * * הערכים כאן בהקסה ולא ב-oklch כמו השאר, כי אלה המספרים שכבר כתובים * במסכי ההרשמה של האתר. המרה שלהם רק היתה מוסיפה הזדמנות להחטיא גוון * בין שני מסכים שהמשתמש עובר ביניהם ברצף. * * --accent הוא הפחם ולא צבע שלישי: בפריימן הכתום הוא הפעולה והפחם הוא * הכל השאר, ופאנל הכניסה נצבע ב-accent. */ :root[data-client="platform"] { --brand: #F26936; --brand-strong: #C24A1E; --brand-wash: #FFF3EE; --brand-ink: #ffffff; --surface: #ECEAE4; --surface-2: #F5F4F0; --surface-3: #FAF9F5; --panel: #ffffff; --line: #E6E3DC; --line-soft: #EFEDE7; --ink: #1C1C1E; --ink-2: #2A2A2C; --muted: #6B6B70; --muted-2: #77777C; --muted-3: #85858A; --faint: #9A9A9F; --accent: #1C1C1E; }