/* Cydora — design tokens. Sampled off cydora-wireframe.pdf rather than guessed, so the bands line up with the design. --ink is the same #252422 the eight scene prototypes use, which is what lets their artwork drop in without a colour change. Everything else in css/ reads from here. Nothing here reads from anywhere. */ /* ================================================================ TOKENS Sampled straight off cydora-wireframe.pdf rather than guessed, so the bands line up with the design. --ink is the same #252422 the eight scene files already use, which is what lets their artwork drop in without a colour change. The scene files carry a dark theme; this page is light only, so their dark tokens simply never activate. If the site wants a dark mode later it belongs here, in one place, and the scenes will follow. ================================================================ */ :root { --ink: #252422; /* text, and every stroke of the artwork */ --paper: #f7f2e8; /* the page */ --sand: #eee6d5; /* alternating bands */ --deep: #e8ddc8; /* the closing call to action */ --wheat: #e5d59a; /* nav bar, primary buttons, accents */ --sage: #b8c4a3; /* use-case detail panel */ --muted: #8a8378; /* secondary text */ --rule: #ddd3c0; /* hairlines and placeholder outlines */ /* illustration placeholders, in wireframe order */ --swatch-blue: #a1abb3; --swatch-brown: #6f6254; --swatch-sand: #b5ab9c; --swatch-grey: #d6d0c4; /* TYPE — the wireframe uses a transitional serif for display and a soft geometric sans for body. Neither is identified yet, so these are stand-ins with the right proportions: swap the two stacks below once the licensed families are settled and the whole page follows. */ --display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; --body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --nav-h: 68px; /* the sticky header's height — pinned sections reserve this much so it never lands on a title */ --wrap: 1280px; /* the wireframe's content width */ --gut: clamp(1.25rem, 4vw, 4rem); /* The dark band (section 05) has to stay dark in both themes, so it gets its own pair rather than borrowing --ink/--paper, which swap. */ --band-dark: #252422; --band-dark-ink: #f7f2e8; /* The plate a service illustration is printed on. The drawings are dark ink and pale colour on a transparent background, so they need light under them in *both* themes — on --paper gone dark they all but vanish. It gives a little in the dark theme so a bright rectangle is not the loudest thing on the screen, but it never crosses over. */ --plate: #f7f2e8; color-scheme: light; } /* ---- dark ------------------------------------------------------------ Asked for, never assumed. This used to be a `prefers-color-scheme: dark` media query, which meant the site changed under anyone whose Mac turns dark in the evening whether they wanted the site to or not. It is a switch now: the theme button in the header sets data-theme on and remembers it, and with no attribute the page is light. Nothing here reads the OS. The artwork needs nothing either way: every drawing fills with var(--ink), so it inverts with the text. The one exception is the mask strokes inside the SVGs, which are #fff because inside a mask white means "show this" — they are not a colour and must not become one. Warm rather than neutral: the light palette is paper and ink, so the dark one is ink and paper too, not a grey dashboard. */ :root[data-theme="dark"] { --ink: #f2ede3; --paper: #17150f; --sand: #211e17; --deep: #2a261d; --wheat: #3a331f; --sage: #4d5a44; --muted: #9c9384; --rule: #332f26; --swatch-blue: #4a5561; --swatch-brown: #4a4036; --swatch-sand: #4f4739; --swatch-grey: #3f3b33; --band-dark: #0e0d0a; --band-dark-ink: #f2ede3; --plate: #ddd6c5; color-scheme: dark; }