/* ========================================================================== ADVASA — Design Tokens -------------------------------------------------------------------------- Single source of truth. Nothing elsewhere in the codebase may introduce a raw colour, size, or spacing value. If a value is needed and not defined here, it gets added here first. Replaces the previous system: 17 font sizes -> 7 30 spacing values -> 8 9 radii -> 2 4 shadows -> 2 11+ ad-hoc greys -> one 10-step ramp ========================================================================== */ :root { /* ---------------------------------------------------------------------- COLOUR — Neutral ramp A single WARM grey ramp. Every grey on the site comes from here. Warmed from the previous cool-leaning ramp in August 2026: a cool grey beside orange reads as a blue cast, which is what prompted the note that the site felt "too blue overall". These greys carry a trace of the brand hue instead, so neutral surfaces sit under the orange rather than fighting it. ---------------------------------------------------------------------- */ --n-0: #ffffff; --n-50: #faf8f6; --n-100: #f2efec; --n-200: #e5e0da; --n-300: #c9c1b8; --n-400: #9c9289; --n-500: #78706a; --n-600: #57514c; --n-700: #3e3935; --n-800: #2a2624; --n-900: #1a1715; --n-950: #0d0b0a; /* ---------------------------------------------------------------------- COLOUR — Brand: corporate orange August 2026. Royal navy is withdrawn as the brand colour at the client's instruction: the site read as too blue overall, and the company name is to carry the logo orange for continuity with the existing mark. There is now ONE ramp. The brand and the accent are the same colour, so defining them separately would only invite the two to drift. --brand-400 is #ff9317 — the corporate hex, unaltered — and the --orange-* names below are aliases onto this ramp, kept so existing markup keeps working. The two darkest steps carry no counterpart in the accent ramp. They exist because large dark surfaces (footer, inverse bands) cannot be saturated orange without the page reading as a promotion, and a cool dark would reintroduce exactly the blue that was objected to. They are the brand hue taken down to near-black, so dark surfaces stay in the same family. See DESIGN-RATIONALE.md §4 for the reasoning this supersedes, which is retained rather than deleted. ---------------------------------------------------------------------- */ --brand-50: #fff7ef; --brand-100: #ffeedd; --brand-200: #ffd4a8; --brand-300: #ffb267; --brand-400: #ff9317; /* THE corporate hex. Do not alter. */ --brand-500: #d97400; --brand-600: #a85400; --brand-700: #7d3d00; --brand-800: #3f2712; /* dark surfaces */ --brand-900: #2b1a0c; /* footer, inverse bands */ /* ---------------------------------------------------------------------- COLOUR — Accent aliases Aliases onto the brand ramp above, not a second palette. Kept so markup written against --orange-* keeps working, and so the intent of a given declaration stays readable: --brand-* where a component means "the company's colour", --orange-* where it means "the accent". The contrast rule survives from the accent-only version and still governs every use. #ff9317 measures 2.2:1 on white, under the 4.5:1 floor for body text, so: 400 the corporate hex — rules, marks, dots, diagram fills, and now the wordmark and primary buttons, where it is a background or a logotype rather than body text 600 the colour wherever it is READ AS TEXT on a light ground (5.3:1) 300 the colour wherever it is read as text on a dark ground (12:1) ---------------------------------------------------------------------- */ --orange-50: var(--brand-50); --orange-100: var(--brand-100); --orange-200: var(--brand-200); --orange-300: var(--brand-300); --orange-400: var(--brand-400); --orange-500: var(--brand-500); --orange-600: var(--brand-600); --orange-700: var(--brand-700); /* Semantic aliases — components reference these, not the ramps above. */ --bg: var(--n-0); --bg-subtle: var(--n-50); --bg-sunken: var(--n-100); --bg-inverse: var(--brand-900); --text: var(--n-900); --text-muted: var(--n-600); --text-subtle: var(--n-500); --text-inverse: var(--n-0); --border: var(--n-200); --border-strong: var(--n-300); --accent: var(--orange-400); /* marks and rules — the brand hex */ --accent-text: var(--orange-600); /* the accent wherever it is read as text */ --brand: var(--brand-600); /* Form feedback. The palette is warm, so the failure red is warm too rather than the usual blue-leaning one, which reads as foreign next to the brand. */ --danger-text: #a32b1c; --danger-bg: #fdf3f1; --danger-border: #f0cfc9; /* ---------------------------------------------------------------------- TYPEFACES Headings — Source Serif 4. A transitional serif. Serif headlines are the strongest single signal of institutional seriousness; they carry an association with record and permanence that no geometric sans can supply. Replaces Outfit, whose geometric roundness reads consumer-tech. Body — Inter. Neutral, high legibility, no personality of its own. Japanese — Noto Sans JP. NOTE the correct name: the previous stylesheet asked for "Noto Sans Ja", which does not exist, so every Japanese page fell back to the OS default font. Numerals — tabular figures for all financial and date data. ---------------------------------------------------------------------- */ --font-display: "Source Serif 4", Georgia, "Times New Roman", serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-jp: "Noto Sans JP", var(--font-body); /* Hero face for Japanese. Source Serif 4 carries no CJK glyphs, so a Japanese headline set in it falls through to whatever the operating system supplies. Noto Serif JP is what goldmansachs.com/japan uses for its hero, at weight 300; everything else on that site, and on this one, is Noto Sans JP. */ --font-jp-display: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif; --font-mono: ui-monospace, "SF Mono", Menlo, monospace; /* ---------------------------------------------------------------------- TYPE SCALE — 7 steps on a 1.25 ratio (major third), 17px base. Display sizes are fluid so they never need a viewport-unit one-off like the previous stylesheet's 14.54vw. ---------------------------------------------------------------------- */ --fs-xs: 0.8125rem; /* 13px — eyebrows, captions, legal */ --fs-sm: 0.9375rem; /* 15px — secondary text, table cells */ --fs-base: 1.0625rem; /* 17px — body */ --fs-lg: 1.3125rem; /* 21px — lead paragraphs */ --fs-xl: clamp(1.5rem, 1.1rem + 1.6vw, 2rem); --fs-2xl: clamp(2rem, 1.5rem + 2.2vw, 2.875rem); --fs-display: clamp(2.5rem, 1.6rem + 4vw, 4.25rem); /* LEADING — scales inversely with size. The previous stylesheet defined three line-heights for seventeen sizes, so headings inherited body leading and looked cramped. */ --lh-display: 1.05; --lh-heading: 1.18; --lh-snug: 1.4; --lh-body: 1.65; --lh-loose: 1.75; /* TRACKING — tightens as size increases. */ --ls-display: -0.028em; --ls-heading: -0.018em; --ls-body: 0; --ls-eyebrow: 0.14em; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; /* ---------------------------------------------------------------------- SPACING — 8px base. 8 permitted steps, no exceptions. Replaces 30 hand-typed values including 31px, 75px, 130px, 175px. ---------------------------------------------------------------------- */ --s-1: 0.25rem; /* 4px */ --s-2: 0.5rem; /* 8px */ --s-3: 1rem; /* 16px */ --s-4: 1.5rem; /* 24px */ --s-5: 2.5rem; /* 40px */ --s-6: 4rem; /* 64px */ --s-7: 6rem; /* 96px */ --s-8: 8rem; /* 128px */ /* Vertical rhythm between major page sections. */ --section-y: clamp(var(--s-6), 5vw + 1rem, var(--s-8)); /* ---------------------------------------------------------------------- RADIUS — 2 values. Tight radii read institutional; generous radii read consumer-friendly. Replaces 9 values (3/4/5/6/8/10/20/30/50px). ---------------------------------------------------------------------- */ --r-control: 3px; --r-container: 6px; /* ---------------------------------------------------------------------- PORTRAIT CROP — every director/officer photograph on the site, in one place. Source files are 500x740 (0.68). Cropping narrower than that trims the sides and reads as a tall formal portrait rather than a headshot tile. One token so the homepage grid, the bio pages and the CEO masthead can never drift apart. 13/25 reproduces the 260x500 proportion of the bio photographs as they rendered before the height:auto fix in main.css. That render was a bug — a definite height from the width/height attributes overriding the CSS ratio — but it was the preferred proportion, so it is set deliberately here. Chosen at the 260px bio column; narrower columns are less extreme. ---------------------------------------------------------------------- */ --ratio-portrait: 13 / 25; /* ---------------------------------------------------------------------- ELEVATION — 2 levels, both restrained. Replaces 4 unrelated formulas. ---------------------------------------------------------------------- */ --shadow-1: 0 1px 2px rgba(26, 23, 21, 0.06), 0 1px 3px rgba(26, 23, 21, 0.05); --shadow-2: 0 4px 12px rgba(26, 23, 21, 0.08), 0 2px 4px rgba(26, 23, 21, 0.05); /* LAYOUT */ --measure: 68ch; /* max line length for readable prose */ --container: 1200px; --container-narrow: 820px; --gutter: clamp(var(--s-3), 4vw, var(--s-6)); /* MOTION — short, and only ever on interaction. No ambient animation. */ --ease: cubic-bezier(0.2, 0, 0.15, 1); --dur: 160ms; --header-h: 76px; } /* Single breakpoint set, mobile-first, no overlaps. The previous stylesheet used six max-width breakpoints including 1200px and 1201px, which overlapped by one pixel. sm 640 | md 768 | lg 1024 | xl 1280 Declared here for reference; media queries use the literal values since custom properties cannot be used in media conditions. */ @media (prefers-reduced-motion: reduce) { :root { --dur: 0ms; } }