/* Scientific Management Techniques — design tokens * * Values measured out of "Scientific Managament Mock.xd", not invented. * Method: reference/tokens.md. Where a value did not cluster it is kept and * commented rather than rounded into a scale the design was not built on. * * FONTS — Adobe Fonts kit tup5wrc, on Rob's CC account. * * Published (verified 2026-08-21): nimbus-sans 400/700 + italics, * nimbus-sans-extended 300/400/700. Every weight this design uses is in the * kit, so nothing is synthesised. The unused Condensed family was removed * from the web project. * * Domain-locked: every host serving these pages must be on the web project's * domain list, localhost included, or it serves nothing with no error. * * The embed lives in the head partial, not @import here. */ :root { /* -- Space ------------------------------------------------------------ * FLUID. Every step interpolates between 480px and 1440px. * * FULL SIZE IS REACHED AT 1440px AND HOLDS ABOVE IT. Rob's clients view * at 1440 and below, mostly around 1280 — so 1440 is the design width, not * 1920. Anchoring the ramp at 1920 left everything undersized at the width * people actually use. * * The XD is a BLUEPRINT, not a render target: its spacing and type run * significantly larger than a real page wants. Artboard values are kept in * the comments as provenance; the maxima are roughly 0.78x them. * -------------------------------------------------------------------- */ --space-3xs: clamp(0.25rem, 0.1875rem + 0.208vw, 0.375rem); /* 4 -> 6 (xd 8) */ --space-2xs: clamp(0.5rem, 0.375rem + 0.417vw, 0.75rem); /* 8 -> 12 (xd 16) */ --space-xs: clamp(0.75rem, 0.5625rem + 0.625vw, 1.125rem); /* 12 -> 18 (xd 24) */ --space-sm: clamp(1rem, 0.75rem + 0.833vw, 1.5rem); /* 16 -> 24 (xd 32) */ --space-md: clamp(1.25rem, 0.875rem + 1.250vw, 2rem); /* 20 -> 32 (xd 40) */ --space-lg: clamp(1.75rem, 1.25rem + 1.667vw, 2.75rem); /* 28 -> 44 (xd 56) */ --space-xl: clamp(2.25rem, 1.625rem + 2.083vw, 3.5rem); /* 36 -> 56 (xd 88) */ --space-2xl: clamp(2.75rem, 2.125rem + 2.083vw, 4rem); /* 44 -> 64 — the 4rem ceiling */ /* Vertical space BETWEEN blocks is capped at 4rem. Rob's call 2026-08-21: * more than that reads as dead space at the widths his clients browse at. * Its own token rather than an alias, so the ceiling is explicit and cannot * drift when a spacing step is retuned for some other reason. */ --section-pad-y: clamp(2.5rem, 1.75rem + 2.500vw, 4rem); /* 40 -> 64 = the 4rem ceiling */ --section-pad-y-tight: clamp(1.5rem, 1rem + 1.667vw, 2.5rem); /* 24 -> 40 */ /* feature-split is a fixed-height band with its content optically centred, * not a padded box. Fluid so it does not dominate a laptop viewport. */ --band-min-h: clamp(24rem, 19rem + 16.667vw, 34rem); /* 384 -> 544 (xd 661) */ /* -- Measure ---------------------------------------------------------- */ --container-max:1640px; /* 1920 canvas - 140 margins each side */ --content-max: 72ch; /* prose columns; the mockup runs full width and * is uncomfortable to read — see stage 3 note */ --gutter: clamp(1.25rem, -0.625rem + 6.250vw, 5rem); /* 20 -> 80 (xd 140) */ /* card-grid proves the grid: 3 x 536 + 2 x 16 = 1640 exactly */ --grid-gutter: var(--space-2xs); /* -- Colour ----------------------------------------------------------- * Five values in the entire design. #000000 (3 uses) folded into charcoal. * -------------------------------------------------------------------- */ --color-bg: #F7F7F5; /* warm off-white, not pure paper */ --color-surface:#FFFFFF; --color-charcoal:#2C2C2B; --color-hairline: rgb(26 26 25 / 0.08); --color-primary:#900036; /* wine — CTAs, Formal Education band */ --color-accent:#005574; /* teal — Operations, History, testimonials */ --color-text: #1A1A19; --color-text-inv:#FFFFFF; --color-text-mut:#6B6B6A; /* derived, not in the mockup — captions */ --color-border:#D8D8D7; /* derived — card borders read as a light grey */ /* Hero text sits over photography with NO scrim in the mockup, and it * measurably fails there: the h1 came out at 2.49:1 against a 3.0 * requirement and the nav at 1.4:1 against 4.5. Two layers: * --color-scrim horizontal, gives the headline and bullets ground * --color-scrim-top vertical, gives the eyebrow bar ground * * Strengthened again 2026-08-21: centring the hero content moved it up over * a brighter part of the photograph, and the shorter 70vh band changed the * crop. The h1 fell to 2.67 and the bullets to 3.67 before this. * Measured values are in handoff/design-decisions.md. */ --color-scrim: linear-gradient(90deg, rgb(0 0 0 / 0.72) 0%, rgb(0 0 0 / 0.42) 60%, rgb(0 0 0 / 0.12) 100%); --color-scrim-top:linear-gradient(180deg, rgb(0 0 0 / 0.70) 0%, rgb(0 0 0 / 0.36) 55%, transparent 100%); /* -- Type ------------------------------------------------------------- * Adobe Fonts family slugs. If the web project publishes different names, * changing these two lines is the whole fix. * -------------------------------------------------------------------- */ --font-body: "nimbus-sans", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-display:"nimbus-sans-extended", "nimbus-sans", "Helvetica Neue", Arial, sans-serif; --fw-light: 300; --fw-regular: 400; --fw-bold: 700; /* 19 distinct size/weight pairs in the artboard, collapsed to 7 steps. * Fluid from 480px, reaching full size at 1440px. The maxima are ~0.78x the * artboard values — the XD is a blueprint and its type is significantly * larger than a real render wants. The RATIOS between steps are the * artboard's, so the hierarchy is preserved exactly. */ --step-5: clamp(2rem, 1.375rem + 2.083vw, 3.25rem); /* 32 -> 52 (xd 70) */ --step-4: clamp(1.625rem, 1.125rem + 1.667vw, 2.625rem); /* 26 -> 42 (xd 54) */ --step-3: clamp(1.375rem, 1.0312rem + 1.146vw, 2.0625rem); /* 22 -> 33 (xd 42) */ --step-2: clamp(1.25rem, 0.9375rem + 1.042vw, 1.875rem); /* 20 -> 30 (xd 38) */ --step-1: clamp(1.0625rem, 0.9062rem + 0.521vw, 1.375rem); /* 17 -> 22 (xd 28) */ --step-0: clamp(0.9375rem, 0.8438rem + 0.312vw, 1.125rem); /* 15 -> 18 (xd 23) */ --step--1: clamp(0.8125rem, 0.7188rem + 0.312vw, 1rem); /* 13 -> 16 (xd 20) */ /* The testimonial quote is its own step: the card is dimensioned around it. */ --step-quote: clamp(1.125rem, 0.9375rem + 0.625vw, 1.5rem); /* 18 -> 24 (xd 40) */ /* Sub-heading step: footer column headings and intro-duo headings. */ --step-sub: clamp(1.125rem, 0.875rem + 0.833vw, 1.625rem); /* 18 -> 26 (xd 33/34) */ --leading-tight:1.1; --leading-snug:1.3; --leading-body:1.55; --tracking-tight:-0.01em; --tracking-wide:0.02em; /* -- Motion — stage 4 fills these in properly ------------------------- */ --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; --dur-xslow: 700ms; --ease-out: cubic-bezier(0.32, 0.72, 0, 1); /* spring */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* -- Components ------------------------------------------------------- */ /* -- Header ---------------------------------------------------------- * --logo-size drives the nav pill's height, and --header-h is what the * hero pads by to clear it. Both derive from the same value so a change * to the logo cannot leave the hero content colliding with the pill — * which is exactly what happened when they were tuned separately. */ /* How far the next section rides up over the hero. The hero pads its * bottom by at least this much, so the overlap can never clip the CTA — * which it did when the two were tuned independently. */ --hero-overlap: var(--space-xl); /* Nav island geometry. The eyebrow bar shares these so its first and last * items line up with the logo and the end of the nav inside the pill. */ --nav-w: min(88vw, var(--container-max)); --nav-pad-x: 1.5rem; --logo-size: clamp(2.625rem, 2.0625rem + 1.875vw, 3.75rem); /* 42 -> 60 */ --header-h: calc(44px + var(--logo-size) + 1.125rem); --btn-h: clamp(2.75rem, 2.5rem + 0.833vw, 3.25rem); /* 44 -> 52 (xd 62) */ --btn-pad-x: var(--space-sm); --btn-radius: var(--radius-pill); --card-radius: var(--radius-core); /* Enclosure: the "tray and plate" the cards and bands sit in. */ /* -- Elevation -------------------------------------------------------- * Diffused and layered. The artboard has no shadows at all; these exist to * lift the enclosures off the ground without a single harsh drop, which is * what "expensive" reads as versus a stock drop-shadow. */ --shadow-sm: 0 1px 2px rgb(26 26 25 / 0.03), 0 4px 12px rgb(26 26 25 / 0.04); --shadow-md: 0 2px 4px rgb(26 26 25 / 0.03), 0 12px 28px rgb(26 26 25 / 0.06), 0 32px 64px rgb(26 26 25 / 0.05); --shadow-inner: inset 0 1px 0 rgb(255 255 255 / 0.9); /* -- Enclosure — the "tray and plate" the cards and bands sit in ------- * Concentric radii: core = shell minus the tray padding. */ --radius-shell: 32px; --radius-core: 24px; --radius-pill: 999px; --tray-pad: 8px; --enclosure-bg: rgb(26 26 25 / 0.05); }