/* ============================================================================ Zambezi Trade Capital — design tokens ---------------------------------------------------------------------------- Every colour here was SAMPLED from docs/mission.png (the approved brand design) rather than chosen. The method for each was to take the ink pixels of the element in question and read the median of the darkest 1–3% — the core of the stroke, past the antialiasing. Source coordinates are given so any value can be re-checked. No colour outside this file should appear in the stylesheets. If you need a new one, add it here with a note saying where in the image it came from. ============================================================================ */ :root { /* --- The mark's inks --------------------------------------------------- Four families, and nothing else exists in the source image. */ /* The ZAMBEZI wordmark. Sampled at x 520–1200, y 140–235. It runs as a gradient down each stroke, #031C22 at the top to #042C33 at the foot; --ink-deep is the top, --ink is the foot and the general text colour. */ --ink-deep: #031c22; --ink: #042c33; /* Body prose — the mission statement and the card descriptions. Very slightly warmer and lighter than the wordmark. (x 280–1240, y 535–615) */ --ink-body: #12171b; /* Secondary prose — the footer's left-hand caption. (x 160–522, y 955–995) */ --ink-muted: #35393b; /* --- Teal -------------------------------------------------------------- The primary brand colour, in three stops taken from three different places in the source rather than generated from one another. */ /* The tagline and PROSPERITY THAT STAYS. (y 388–408 and y 968–995) */ --teal: #024e5a; /* Slightly lighter — the footer's TRANSPARENT BY DESIGN label. (y 940–978) */ --teal-mid: #055961; /* The card accent rules and the brighter circuit dots. This is 4.20:1 on the coolest part of the background, so it is a GRAPHIC colour only — rules, dots, icon strokes. Small text in teal must use --teal or --teal-mid. */ --teal-bright: #0e7c86; /* The glow at Zimbabwe's position on the Africa motif, and the ripple rings. */ --teal-glow: #b8e1e8; /* --- Green ------------------------------------------------------------- Distinct from the teal and used deliberately: the OUR MISSION heading is green where the tagline beside it is teal. The icons run a gradient from this green at the top to --icon-teal at the foot. */ --green: #014330; /* OUR MISSION heading (x 280–500, y 488–522) */ --green-icon: #147060; /* icon gradient, upper stop */ --icon-teal: #033f3e; /* icon gradient, lower stop (globe, chart, hands) */ /* --- Gold -------------------------------------------------------------- TRADE CAPITAL, its flanking rules, and the logo's outer arc. The brief expected the gold to fail WCAG AA on the light ground. The *perceived* gold does — but the core of the stroke is much darker than it looks: --gold measures 5.30:1 on the cards and 4.74:1 on the coolest background tint, so it clears AA for small text on every surface the site actually uses. It is used for words as well as graphics. --gold-light is the gradient's bright end (x 880–1130, y 258–300). At 3.24–3.82:1 it fails AA for small text, so it is reserved for GRAPHICS: the flanking rules, the logo arc, the footer's small flanking dashes. */ --gold: #905d0d; --gold-light: #a67b32; /* --- Surfaces ---------------------------------------------------------- The page is not a flat colour. The source has a warm off-white at the centre falling to a cool blue-grey at every edge; these are the corner and centre samples, assembled into --page-wash below. */ --surface-warm: #f8f6f2; /* centre top (768, 10) */ --surface-cool: #dfe9ed; /* top left (6, 6) — the coolest corner */ --surface-cool-2: #e4eef3; /* top right and bottom right */ --surface-cool-3: #e8eff3; /* bottom left */ --panel: #fdfdfd; /* mission and footer panel fill */ --card: #f8f9f9; /* card fill; the cards lighten to #fff at centre */ --card-top: #ffffff; /* Borders. The cards are edged in a cooler, paler line than the two panels, which is why these are two tokens and not one. */ --border-card: #d6e6ec; /* sampled at (84, 700) */ --border-panel: #a2d0d3; /* sampled at (96, 480) */ --rule: #cfd9dd; /* the footer's vertical dividers */ --rule-soft: #e3ebee; /* Background line art. The circuit traces at left and the dotted world map at right are drawn in these. --map-dot is the raw sample. It was briefly darkened to compensate for the mask making the dots read fainter, which turned the map into a solid field — the fix was the mask's own falloff, not the colour. */ --line-circuit: #177b88; --map-dot: #b8cedc; /* --- Type -------------------------------------------------------------- Chosen by measurement, not by eye — see the header of styles/fonts.css for the method and the numbers. --font-body Mulish, the prose face. 0.4% from the source's width. --font-display Roboto Condensed, the bold face: tagline, OUR MISSION, card titles, footer labels, section headings. --font-lockup Jost Light, the wide-tracked lockup lines. The ZAMBEZI wordmark itself is inline SVG, not type. See styles/hero.css. */ --font-body: "Mulish", ui-sans-serif, system-ui, sans-serif; --font-display: "Roboto Condensed", ui-sans-serif, system-ui, sans-serif; --font-lockup: "Jost", ui-sans-serif, system-ui, sans-serif; /* Fluid type scale. Each step is clamp(min, preferred, max) so the page can shrink to a 320px viewport without a single media query. The vw coefficients are tuned so the scale reaches its maximum at ~1600px. The hero does NOT use this scale — it sizes everything in cqw so the composition scales as one unit. See styles/hero.css. */ --step--1: clamp(0.8rem, 0.77rem + 0.16vw, 0.9rem); --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.13rem); --step-1: clamp(1.13rem, 1.06rem + 0.35vw, 1.35rem); --step-2: clamp(1.3rem, 1.15rem + 0.75vw, 1.75rem); --step-3: clamp(1.55rem, 1.28rem + 1.35vw, 2.4rem); --step-4: clamp(1.85rem, 1.35rem + 2.5vw, 3.2rem); /* --- Spacing ----------------------------------------------------------- */ --space-3xs: clamp(0.25rem, 0.23rem + 0.1vw, 0.31rem); --space-2xs: clamp(0.5rem, 0.46rem + 0.2vw, 0.63rem); --space-xs: clamp(0.75rem, 0.69rem + 0.3vw, 0.94rem); --space-s: clamp(1rem, 0.92rem + 0.4vw, 1.25rem); --space-m: clamp(1.5rem, 1.38rem + 0.6vw, 1.88rem); --space-l: clamp(2rem, 1.84rem + 0.8vw, 2.5rem); --space-xl: clamp(3rem, 2.76rem + 1.2vw, 3.75rem); --space-2xl: clamp(4rem, 3.68rem + 1.6vw, 5rem); --space-3xl: clamp(5.5rem, 5rem + 2.4vw, 7rem); /* --- Measure and layout ------------------------------------------------ */ --measure: 66ch; /* 65–75 characters, the comfortable reading width */ --page-max: 1400px; --gutter: clamp(1.25rem, 4vw, 4rem); /* --- Motion ------------------------------------------------------------ */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --dur-fast: 180ms; --dur-slow: 620ms; /* --- Elevation --------------------------------------------------------- Shadows are tinted with the brand ink rather than pure black. */ --shadow-s: 0 1px 2px rgb(4 44 51 / 0.05), 0 2px 8px rgb(4 44 51 / 0.04); --shadow-m: 0 4px 12px rgb(4 44 51 / 0.07), 0 12px 32px rgb(4 44 51 / 0.06); --shadow-l: 0 8px 20px rgb(4 44 51 / 0.1), 0 24px 56px rgb(4 44 51 / 0.12); --radius-s: 4px; --radius-m: 10px; --radius-l: 16px; /* --- The page ground --------------------------------------------------- Reassembled from the corner samples above: a warm near-white core that falls away to the cool tint at every edge, with the strongest cooling at the top-left and right-hand sides, as in the source. Declared once here so the hero and the sections below it sit on one continuous ground. */ --page-wash: radial-gradient(120% 90% at 50% 8%, var(--surface-warm) 0%, rgb(248 246 242 / 0) 55%), radial-gradient(60% 70% at 0% 0%, var(--surface-cool) 0%, rgb(223 233 237 / 0) 60%), radial-gradient(70% 80% at 100% 25%, var(--surface-cool-2) 0%, rgb(228 238 243 / 0) 65%), radial-gradient(60% 50% at 0% 100%, var(--surface-cool-3) 0%, rgb(232 239 243 / 0) 60%), linear-gradient(180deg, #f6f8f9 0%, #f3f7f8 100%); }