/* * Ecommerce & Amazon — a third brand on the same Worker. * * It shares nothing visually with either ApplyVerified or Income Accelerator, and that is * the point: this reader has just been sold to by people who all look the same as each * other. IA is cool navy, rounded corners and green ticks. This is a payroll document — * warm paper, near-square corners, ruled rows, tabular figures, one oxblood accent that * reads as a stamp rather than a "buy" colour. * * System fonts only, including the system monospace for figures. The audience is a * mid-range Android on 3G and a webfont is the most expensive thing a landing page can buy * for the least return. */ :root { /* * THE BRAND NAME LIVES HERE AND NOWHERE ELSE. * * It is provisional — the PM's ruling for Sprint 2 was that the pages carry it in one * place so a rename is a one-line change. It is rendered through `content:` on the * wordmark and the footer, so no HTML file contains it and no page title depends on it * (page titles are descriptive on purpose). Renaming the funnel is editing this line. */ --brand: "The Pay Scale"; --ink: #1A1714; --paper: #FFFDFA; --board: #F4EFE7; --slate: #5A5248; --rule: #E2D9CC; /* --rule is decorative and far under the 3:1 WCAG 1.4.11 wants of a control boundary. Anything that bounds an input or a pressable uses this instead: 3.24:1 on --paper. */ --rule-strong: #A2937F; --stamp: #8A1C2B; --stamp-ink: #FFFFFF; --good: #2F6B3D; --danger: #A3121F; --danger-ink: #6B0F18; --danger-bg: #FDF2F1; --danger-line: #F0C9C5; --r: 3px; color-scheme: light; } /* * Dark mode, because not having it is not neutral on this device class. * * Chrome and Samsung Internet on Android ship a force-dark that algorithmically inverts any * page which has not declared a preference, and it is unpredictable in exactly the places * that matter here: the amount on the payment page, the error panel, the ladder figures. * Declaring `color-scheme` is what stops the browser doing that on top of our own theme, * and it themes the native