133 lines
4.2 KiB
CSS
133 lines
4.2 KiB
CSS
/* Design tokens. The only place where colours, sizes and durations are defined.
|
|
Components consume these; a hard-coded hex or px value in a component is a defect. */
|
|
|
|
:root {
|
|
/* Colour: paper, night, image. Nothing else. */
|
|
--paper: #E9E5DF;
|
|
--paper-deep: #DFDAD1;
|
|
--ink: #1A1A18;
|
|
--ink-muted: #57564F;
|
|
--night: #0E100F;
|
|
--line: rgb(26 26 24 / 0.14);
|
|
|
|
/* Logo palette: only for the abstract fields (hero, research cards), never for text or UI. */
|
|
--logo-deep: #284888;
|
|
--logo-mid: #386898;
|
|
--logo-teal: #48A8B8;
|
|
--logo-cyan: #58C8D8;
|
|
/* Neighbours of the logo blues for the research card fields, so the cards vary without leaving
|
|
the brand: same coolness and depth, different hue. Fields only, never text or UI. */
|
|
--field-indigo: #3B4096;
|
|
--field-petrol: #1E5A63;
|
|
--field-sea: #2E7C72;
|
|
--field-steel: #4D6882;
|
|
--field-dusk: #55508F;
|
|
--field-cobalt: #2B56B0;
|
|
--field-ocean: #1F4E86;
|
|
--field-glacier: #7FB4CF;
|
|
--field-aqua: #3EAFB2;
|
|
--field-jade: #3B8C78;
|
|
--field-slate: #3A4862;
|
|
--field-plum: #66508E;
|
|
|
|
/* Signal: the one status tone the brief allows. Used only for a live state (the coming-soon
|
|
page's current phase), at most twice per page. Never for text, links or decoration. */
|
|
--signal: #58C8D8;
|
|
|
|
/* Immutable copies for resetting inside a .night or overlay context */
|
|
--ink-base: #1A1A18;
|
|
--ink-muted-base: #57564F;
|
|
--line-base: rgb(26 26 24 / 0.14);
|
|
|
|
/* Counterparts on night surfaces */
|
|
--ink-on-night: var(--paper);
|
|
--ink-muted-on-night: rgb(233 229 223 / 0.62);
|
|
--line-on-night: rgb(233 229 223 / 0.18);
|
|
|
|
/* Image overlay */
|
|
--overlay: linear-gradient(to top, rgb(14 16 15 / 0.75), rgb(14 16 15 / 0.2));
|
|
|
|
/* Type */
|
|
--font-sans: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
|
|
/* Menu bar only: the tactical HUD labels. */
|
|
--font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
|
|
|
|
--step-display: clamp(2.75rem, 1.2rem + 6.2vw, 7rem);
|
|
/* Home hero headline: about 10% below display, so the image keeps more of the frame. */
|
|
--step-hero: clamp(2.5rem, 1.1rem + 5.6vw, 6.25rem);
|
|
--step-h2: clamp(1.9rem, 1.1rem + 2.6vw, 3.25rem);
|
|
--step-h3: clamp(1.25rem, 1.05rem + 0.7vw, 1.6rem);
|
|
/* Card and footer titles: between h2 and h3, for headings that name rather than claim. */
|
|
--step-title: clamp(1.6rem, 1.2rem + 1.5vw, 2.5rem);
|
|
--step-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
|
|
--step-small: 0.875rem;
|
|
--step-micro: 0.75rem;
|
|
|
|
--weight-regular: 400;
|
|
--weight-medium: 500;
|
|
|
|
--track-display: -0.03em;
|
|
--track-h2: -0.02em;
|
|
--track-h3: -0.01em;
|
|
--track-caps: 0.08em;
|
|
|
|
--leading-display: 1.02;
|
|
--leading-h2: 1.08;
|
|
--leading-h3: 1.2;
|
|
--leading-title: 1.1;
|
|
--leading-body: 1.55;
|
|
--leading-small: 1.4;
|
|
|
|
--measure: 34em;
|
|
|
|
/* Space */
|
|
--space-1: 0.25rem;
|
|
--space-2: 0.5rem;
|
|
--space-3: 0.75rem;
|
|
--space-4: 1rem;
|
|
--space-5: 1.5rem;
|
|
--space-6: 2rem;
|
|
--space-7: 3rem;
|
|
--space-8: 4rem;
|
|
--space-9: 6rem;
|
|
|
|
--section: clamp(6rem, 12vw, 11rem);
|
|
--gutter: clamp(1.25rem, 5vw, 5rem);
|
|
--gap: clamp(1rem, 2vw, 2rem);
|
|
--container: 90rem; /* 1440px */
|
|
|
|
/* Shape */
|
|
--hairline: 1px;
|
|
--radius: 0;
|
|
--radius-sm: 2px;
|
|
|
|
/* Motion */
|
|
--ease: cubic-bezier(0.2, 0, 0, 1);
|
|
--dur-fast: 180ms;
|
|
--dur: 240ms;
|
|
--dur-slow: 320ms;
|
|
--dur-hero: 1400ms;
|
|
|
|
/* Chrome */
|
|
--header-height: 4.5rem;
|
|
|
|
/* HUD frame (menu bar): one line width and colour for every line, borders and crosses alike. */
|
|
--hud-line-width: 1px;
|
|
--hud-arm: 7px;
|
|
--hud-line: rgb(26 26 24 / 0.3);
|
|
--hud-line-on-night: rgb(233 229 223 / 0.3);
|
|
/* Frosted glass behind the bar. One blur, kept small so it stays cheap to composite. */
|
|
--glass: rgb(233 229 223 / 0.76);
|
|
--glass-on-night: rgb(14 16 15 / 0.56);
|
|
--glass-solid: rgb(233 229 223 / 0.96);
|
|
--glass-solid-on-night: rgb(14 16 15 / 0.94);
|
|
--glass-blur: 14px;
|
|
/* Tints mixed from the text colour, so they work on either tone. */
|
|
--tint-hover: 6%;
|
|
--tint-active: 9%;
|
|
|
|
/* Focus */
|
|
--focus-width: 2px;
|
|
--focus-offset: 3px;
|
|
}
|