/* RPXL / Reactive Pixels design tokens. Source of truth for colour, type and the two graphic devices (ribbon, bars). See README.md in this folder for the rules that go with them. */ :root { /* palette */ --rpxl-cream: #F3E9D6; --rpxl-brown: #3B1D0E; --rpxl-umber: #5B2A0E; --rpxl-deep: #B5410B; --rpxl-burnt: #E0630A; --rpxl-orange: #FF8A00; --rpxl-mustard: #FFC93C; /* roles, light (default). Contrast against --rpxl-ground in brackets. */ --rpxl-ground: var(--rpxl-cream); --rpxl-text: var(--rpxl-brown); /* 12.7:1 */ --rpxl-headline: var(--rpxl-umber); /* 9.8:1 */ --rpxl-action: var(--rpxl-deep); /* 4.7:1 links, eyebrows, button edge */ --rpxl-accent: var(--rpxl-burnt); /* 2.9:1 stripes and large display only, never text */ --rpxl-rule: rgb(59 29 14 / 0.13); --rpxl-neutral: var(--rpxl-umber); /* top bars of barred type, outer ribbon stripe */ /* type */ --rpxl-font-display: "Goldman", sans-serif; /* headlines and logo only, uppercase, 700 */ --rpxl-font-text: "IBM Plex Sans", system-ui, sans-serif; --rpxl-font-mono: "IBM Plex Mono", ui-monospace, monospace; /* product colourways: the four lower bars, top to bottom (light ground) */ --rpxl-ramp-studio: #FFC93C, #FF8A00, #E0630A, #B5410B; --rpxl-ramp-eko: #A99BFF, #6A5CF0, #4A3DC2, #2E2585; --rpxl-ramp-grooveunit: #FF8FA8, #FF3D6E, #C81E5A, #7D1244; /* SparkleBIOS uses all seven bars, no neutral top */ --rpxl-bands-sparklebios: #E0453F, #EF6A1E, #FCB827, #62BB47, #1D9BE3, #4B55C4, #BB62C0; } /* surfaces + the machine's screen, light */ :root { --rpxl-night: #13121A; /* dark ground: cool near-black, not brown */ --rpxl-surface: #E9DDC6; --rpxl-surface-2: #DCCDB0; --rpxl-screen: #F8F3E7; /* paper-white CRT in day mode */ --rpxl-screen-text: #3B1D0E; --rpxl-screen-hi: #B5410B; --rpxl-btn-bg: var(--rpxl-umber); --rpxl-btn-fg: var(--rpxl-cream); } /* roles, dark. Three ways in: the OS asks for it (and the visitor has not chosen Day), or the visitor picked Night or Rainbow on the mode switch (data-mode on ). */ @media (prefers-color-scheme: dark) { :root:not([data-mode="day"]) { --rpxl-ground: var(--rpxl-night); --rpxl-text: #EDE6D8; --rpxl-headline: var(--rpxl-cream); --rpxl-action: var(--rpxl-orange); --rpxl-accent: var(--rpxl-mustard); --rpxl-rule: rgb(243 233 214 / 0.16); --rpxl-neutral: var(--rpxl-cream); --rpxl-surface: #1D1B27; --rpxl-surface-2: #2A2738; --rpxl-screen: #0E0E13; --rpxl-screen-text: #E9E4D6; --rpxl-screen-hi: #FFB84A; --rpxl-btn-bg: var(--rpxl-cream); --rpxl-btn-fg: var(--rpxl-night); --rpxl-ramp-eko: #C3B9FF, #8D7DFF, #6A5CF0, #4A3DC2; --rpxl-ramp-grooveunit: #FFB3C4, #FF6F93, #FF3D6E, #C81E5A; --rpxl-bands-sparklebios: #E0453F, #EF6A1E, #FCB827, #62BB47, #1D9BE3, #6670E0, #BB62C0; } } [data-mode="night"], [data-mode="rainbow"] { --rpxl-ground: var(--rpxl-night); --rpxl-text: #EDE6D8; --rpxl-headline: var(--rpxl-cream); --rpxl-action: var(--rpxl-orange); --rpxl-accent: var(--rpxl-mustard); --rpxl-rule: rgb(243 233 214 / 0.16); --rpxl-neutral: var(--rpxl-cream); --rpxl-surface: #1D1B27; --rpxl-surface-2: #2A2738; --rpxl-screen: #0E0E13; --rpxl-screen-text: #E9E4D6; --rpxl-screen-hi: #FFB84A; --rpxl-btn-bg: var(--rpxl-cream); --rpxl-btn-fg: var(--rpxl-night); --rpxl-ramp-eko: #C3B9FF, #8D7DFF, #6A5CF0, #4A3DC2; --rpxl-ramp-grooveunit: #FFB3C4, #FF6F93, #FF3D6E, #C81E5A; --rpxl-bands-sparklebios: #E0453F, #EF6A1E, #FCB827, #62BB47, #1D9BE3, #6670E0, #BB62C0; } [data-mode="rainbow"] { --rpxl-action: #FCB827; } /* light / dark asset swap, no JS needed. Put both s in the page. */ .on-dark { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-mode="day"]) .on-light { display: none; } :root:not([data-mode="day"]) .on-dark { display: block; } } [data-mode="night"] .on-light, [data-mode="rainbow"] .on-light { display: none; } [data-mode="night"] .on-dark, [data-mode="rainbow"] .on-dark { display: block; } /* Device 1: the ribbon as a straight section rule. Four stripes, hairline gaps, always horizontal. */ .rpxl-ribbon { height: 12px; border: 0; background: linear-gradient( var(--rpxl-neutral) 0 22%, transparent 22% 25%, var(--rpxl-burnt) 25% 47%, transparent 47% 50%, var(--rpxl-orange) 50% 72%, transparent 72% 75%, var(--rpxl-mustard) 75%); } /* Rainbow mode: the ribbon becomes the seven bands. */ [data-mode="rainbow"] .rpxl-ribbon { height: 14px; background: linear-gradient(#E0453F 0 14.28%, #EF6A1E 0 28.57%, #FCB827 0 42.85%, #62BB47 0 57.14%, #1D9BE3 0 71.42%, #6670E0 0 85.71%, #BB62C0 0); } /* Device 2: bars as display type (seven bars over the cap height of one short word). There is deliberately no CSS class for this: bar alignment depends on the font's exact cap height, so barred words are generated as SVGs by src/build_brand.py. */