/* Hallmark, macrostructure: Manifesto, tone: bold movement energy, anchor hue: saffron 49deg * theme: custom, vibe: "campaign you would join, Isfahan fired flat" * paper oklch(98% 0.004 85), accent oklch(84% 0.163 92) saffron, display Archivo + body Archivo + Farsi Estedad * axes: paper-band light / display-style grotesk-sans-expanded / accent-hue warm-gold * pre-emit critique: P5 H5 E5 S5 R4 V5 * ========================================================================== Design tokens. Single source of truth for colour, type, space and motion. Nothing downstream may hardcode a colour, radius or spacing value. DIRECTION: "a campaign you would join", not "a think tank you would cite". The previous pass was archival and institutional and was rejected for it. Reference register: the AOC 2018 identity by Tandem NYC (flat colour field as the GROUND at about 50% of the surface, not as an accent; both languages at equal hierarchy, never a footnote), When We All Vote, Run for Something, United Farm Workers poster stock. THE SYSTEM RULE, and the whole Persian undertone, in one line: HAFT RANG ("seven colour") is the Timurid/Safavid tile technique developed to tile the Abbasi Great Mosque in Isfahan quickly. Its canonical palette is black, white, turquoise, YELLOW, ROSE PINK and cobalt. Its defining constraint: every colour is fired at once, and each colour is separated from its neighbour by a MANGANESE (near-black) OUTLINE so the glazes cannot bleed. That is a rule, not an ornament: flat saturated fields, hard near-black keylines, zero gradients. It is simultaneously authentically Persian and exactly the flat-poster mechanic a campaign needs. So the Iranian heritage here is the CONSTRUCTION LOGIC, not a motif stuck on top. It is felt, not announced. Girih survives only as a low-contrast undertone (see site.css). Haft Rang was itself the cheap, fast option, invented because mosaic faience was too slow. The historically authentic Persian move and the authentically grassroots move are the same move. ========================================================================== */ :root { /* --- The four fields ---------------------------------------------------- Four of the seven canonical Haft Rang colours. Every one of them is also unclaimed in Canadian political colour space. See the partisan note below: that is not a coincidence we got lucky on, it is why these four were kept and turquoise and cobalt were dropped. */ /* Manganese. The keyline and the ink. Never #000: pure black is a tell. */ /* Ratios below are measured with a WCAG relative-luminance check, not estimated. Re-run scratchpad/contrast.js if you change a value. */ --ink: #14100E; /* 18.13:1 on paper */ --ink-2: #4A423C; /* 9.43:1 on paper, secondary prose */ --ink-3: #6B615A; /* 5.78:1 on paper, metadata */ --ink-4: #8F847B; /* 3.50:1 on paper, disabled only, never text */ /* Paper. The 19% white. Barely warm, NOT the rejected cream. */ --paper: #FBFAF8; --paper-2: #F3F1ED; /* inset surfaces: inputs receive content */ --paper-3: #E8E4DE; /* inset hover */ /* Saffron. The dominant FIELD, not an accent. Carries the hero. h=49deg. NDP orange is h=28deg: 21deg away, and the gap between "gold" and "orange" is perceptually decisive. This is the AOC field yellow's neighbourhood (#EFCA2D) and it is the warmest, most inviting non-partisan field available. Volunteers picked the yellow on that campaign, over the candidate's own hesitation. This is a recruiting page: same audience. */ --saffron: #F2CB2E; /* ink on saffron = 12.03:1 */ /* Cerise. The SPARK, not a field for body copy. h=331deg. Nothing in Canadian federal or Toronto municipal space is near it: Liberal red is h=358, Conservative CTA red h=353. 22-27deg of clear air, and cerise reads magenta where those read scarlet. Persian pedigree: rose pink is canonical Haft Rang, and Nasir al-Mulk in Shiraz (the "Pink Mosque") is tiled predominantly in rose. This is the answer to anyone who says pink is not Persian. */ --cerise: #E0006E; /* paper on cerise = 4.58:1 (large/UI only) */ --cerise-deep: #C9005F; /* 5.52:1 on paper, links and small text */ --cerise-lift: #FF4D9D; /* 6.13:1 on ink, cerise ON dark */ /* --- Semantic ----------------------------------------------------------- Errors must never be confused with cerise, which is a POSITIVE accent here (selected, focused, active). So error is deliberately dark and desaturated where cerise is bright and saturated, and it always carries a "!" marker as well as a hue. Hue is never the only signal. */ --alert: #8B2942; /* 8.07:1 on paper. Elections Canada's oxblood. */ --alert-soft: #F9EBEE; --alert-lift: #FF8FA6; /* alert ON ink */ /* --- Rules. Haft Rang: the keyline IS the depth strategy. No shadows. --- */ --key: var(--ink); --key-w: 2px; /* the manganese outline between fields */ --key-w-thick: 4px; --rule-strong: rgba(20, 16, 14, 0.38); --rule-ink: rgba(251, 250, 248, 0.24); /* rules on ink fields */ /* --- Type --------------------------------------------------------------- Archivo is the only Latin family and it does the whole job: wdth 62-125 AND wght 100-900 from one variable file. Display is wdth 118 / wght 900; body is wdth 100 / wght 400. That width contrast is what reads "poster" rather than "government". Deliberately NOT Oswald (the Liberal Party of Canada's heading face), NOT Public Sans (the US federal government's face, i.e. the austerity trap we were rejected for), NOT League Gothic (no weight axis at all). */ --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif; --font-body: 'Archivo', 'Helvetica Neue', Arial, sans-serif; /* Estedad v8.5 (Mar 2026), OFL, actively maintained, variable wght 100-900. KEPT over Vazirmatn (dormant since 2022, broken sCapHeight) and kept over the "real Persian display face" advice too: tested at poster size against Lalezar and Jomhuria, Estedad 900 is MEASURABLY HEAVIER than Lalezar's single 400 weight and matches Archivo 900's mass. So Farsi gets one variable family spanning 100-900, exactly like the Latin, and the two weight axes map 1:1. Persian is not a footnote here, it is the same structure in the other script. */ --font-farsi: 'Estedad', 'Vazirmatn', 'Tahoma', sans-serif; /* Display width/weight. Farsi has no capitals, so it reads smaller at the same px: --fa-boost compensates so the two scripts carry equal presence. Measured at 76px Latin / 86px Farsi, hence 1.12. */ --wdth-display: 118; --wdth-body: 100; --fa-boost: 1.12; /* Scale. A campaign needs a bigger top end than a document does. */ --t-micro: 11px; --t-meta: 13px; --t-small: 14px; --t-body: 17px; --t-lead: 21px; --t-h4: 22px; --t-h3: 28px; --t-h2: 40px; --t-h1: 68px; --t-display: 116px; --lh-tight: 0.88; /* display only */ --lh-heading: 1.06; --lh-body: 1.6; /* Persian needs a deeper line band than Latin at the same size: jeem/ain descend far below baseline and gaf ascends past cap height. Never below 1.6 on Farsi body. */ --lh-farsi: 1.85; --lh-farsi-display: 1.3; /* --- Space: 4px base ---------------------------------------------------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; /* --- Geometry ---------------------------------------------------------- Zero radius. Haft Rang tiles are cut, not rounded. */ --radius: 0; --measure: 66ch; /* --- Motion. Felt, not watched. --------------------------------------- */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --dur-fast: 120ms; --dur: 180ms; /* Focus. Rebound per field below: a ring must be visible against whatever it sits on, and this palette has four different grounds. This is exactly where big saturated type usually breaks. */ --focus-colour: var(--cerise-deep); /* 5.52:1 on paper */ --focus-width: 3px; --focus-offset: 2px; /* Deliberately NOT `--focus-ring: 3px solid var(--focus-colour)`. A custom property's var() references resolve at computed-value time in the element that DECLARES it, so composing the shorthand here would bake :root's cerise-deep into --focus-ring and inherit it everywhere. The .on-ink / .on-saffron rebindings below would then silently do nothing, and every ring on a saturated field would sit at 3.3:1 instead of 12:1. site.css composes the outline at the point of use instead, so --focus-colour resolves per element. */ } /* Each field rebinds focus + rules so rings stay visible. Big saturated type makes body contrast easy and focus rings HARD: this is where it breaks. Measured, not guessed: cerise-deep on saffron = 3.66:1 -> clears 3:1 but only just, and ink scores 12.03:1 there, so saffron takes an ink ring rather than a technically-passing weak one. cerise-deep on ink = 3.29:1 -> same story; saffron scores 12.03:1 on ink, so ink takes a saffron ring. The cerise BUTTON is handled separately in site.css: its ring sits between paper and a cerise fill and has to clear 3:1 on both edges. */ .on-saffron { --focus-colour: var(--ink); /* 12.03:1 on saffron */ } .on-ink { --focus-colour: var(--saffron); /* 12.03:1 on ink */ } /* Farsi swaps the family and opens the leading. Structure is untouched: the mirror is logical, not a pile of RTL overrides. */ :root:lang(fa), [lang='fa'] { --font-display: 'Estedad', 'Vazirmatn', 'Tahoma', sans-serif; --font-body: 'Estedad', 'Vazirmatn', 'Tahoma', sans-serif; --lh-body: var(--lh-farsi); --lh-heading: 1.4; --lh-tight: var(--lh-farsi-display); } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0.01ms; --dur: 0.01ms; --dur-slow: 0.01ms; } }