/* ============================================================ tokens.css (copied design system; brand overrides live in meatindustry.css) Variables only. No selectors, no components, no exceptions. Every other file reads from here and never hardcodes a value. Changing the look of the whole site starts and usually ends here. ============================================================ */ :root { /* ---- brand ------------------------------------------------ Three accents, three jobs. Nothing borrows another's job. */ --rfi-navy: #002E87; /* brand, selected state */ --rfi-navy-dark: #001F5C; /* A light navy ground for an informational panel that must read as ours rather than as a warning. Deliberately its own token and not --rfi-partner-tint, which happens to hold the same value today: repointing the partner dial must never repaint an account notice. */ --rfi-navy-tint: #F0F6FF; --rfi-teal: #00A793; /* every interactive hover, every primary button */ --rfi-teal-dark: #007568; --rfi-orange: #EF855C; /* fills and rules only, never text */ --rfi-orange-text: #C2551F; /* the same accent at 4.7:1 — active nav item */ /* ---- ink --------------------------------------------------- */ --rfi-text: #1D1D1D; --rfi-text-2: #6B6B6B; --rfi-text-3: #979797; /* ---- ground ------------------------------------------------ */ --rfi-bg: #F4F4F4; /* the page */ --rfi-surface: #FFFFFF; /* every card and panel */ --rfi-input: #EDF0F5; --rfi-footer: #272F3F; --rfi-border: #E4E4E4; /* only inside white surfaces */ --rfi-border-soft: #ECECEC; --rfi-placeholder: #E5E7EB; /* the last grey substitute: stack thumbnails only */ /* ---- empty slots ------------------------------------------- A picture slot is never left blank. Two fills, and they are deliberately NOT the same thing: our mark says "no picture, this is our own story", and it may only appear on OUR content. A company gets initials instead, because several company cards in a row all wearing our wordmark would read as our companies. See docs/design-decisions.md 3. These carry their own values rather than pointing at --rfi-partner-tint, which they happen to match today: partner prominence is a commercial dial that is meant to be turned, and turning it must not repaint every card that simply has no picture. */ --rfi-brandfill-bg: #F0F6FF; /* the no-image brand fill ground */ --rfi-brandfill-mark: var(--rfi-navy); /* the mark on it, quietened by --rfi-brandfill-ink */ --rfi-brandfill-ink: .26; /* how loud the mark is. 0 = an empty tinted box */ --rfi-monogram-bg: #F0F6FF; /* the initials plate on a company slot */ --rfi-monogram-text: var(--rfi-navy); /* ---- ui accents -------------------------------------------- */ --rfi-inverse: #FFFFFF; /* text / marks on a dark or accent ground */ /* White at alpha: everything drawn ON a dark surface (footer, subscribe band, house block). It was eleven hand-typed rgba() literals across three component files; the ladder is named here so those files hold no colour of their own. FOUR text steps, not the prototype's ten. The ten were drift, not intent (.85 vs .9, .75/.72/.7, .55/.5, .45/.4), so each cluster collapses to one step, chosen so the MOST VISIBLE member of the cluster does not move at all: footer body stays .85, footer links stay .75, labels and legal stay .55/.45. The only shifts (<=.05) land on the rail's and the band's secondary lines. The hairline is a rule, not a text step, so it keeps its own token. */ --rfi-inverse-strong: rgba(255,255,255,.85); /* footer body, band legal link */ --rfi-inverse-soft: rgba(255,255,255,.75); /* THE DEFAULT: footer links, band + house lines */ --rfi-inverse-mute: rgba(255,255,255,.55); /* column labels, legal text, house kicker */ --rfi-inverse-faint: rgba(255,255,255,.45); /* footer legal text, dark-ground underline */ --rfi-inverse-line: rgba(255,255,255,.12); /* hairline on a dark ground (a rule, not text) */ --rfi-featured-bg: #FFF6DF; /* the gold "Featured" hero badge (an editor pinned it) */ --rfi-featured-text:#8A6A00; /* ---- shape ------------------------------------------------- ONE radius dial. The two smaller radii are DERIVED from it, not typed next to it: the prototype used 8/6/5/4px, and four hand-set numbers mean changing the radius of the site is four edits and three of them get forgotten. Everything inside a surface (tags, badges, thumbnails, inner plates) steps down from the same value, so --rfi-radius really does restyle every corner (design-system.md, acceptance 4). */ --rfi-radius: 8px; --rfi-radius-sm: max(0px, calc(var(--rfi-radius) - 2px)); /* inner plates, tags, small buttons */ --rfi-radius-xs: max(0px, calc(var(--rfi-radius) - 4px)); /* badges, logo plates */ --rfi-shadow: 0 1px 2px rgba(16,32,64,.04), 0 4px 14px rgba(16,32,64,.05); --rfi-shadow-up: 0 2px 4px rgba(16,32,64,.06), 0 8px 22px rgba(16,32,64,.09); --rfi-scrim: rgba(0,0,0,.85); /* the dimmed page behind an enlarged image */ --rfi-lift: translateY(-2px); /* the one hover motion on the site */ /* ---- grid -------------------------------------------------- */ --rfi-page: 1280px; --rfi-page-pad: 40px; --rfi-gap: 18px; --rfi-cols: 4; /* module = (page - 2*pad - 3*gap) / 4 = 286px */ --rfi-rail: 1; /* how many columns the rail takes */ --rfi-measure: 720px; /* the reading column: nothing but the hero breaks it */ /* ---- type -------------------------------------------------- */ --rfi-font-ui: 'Jost', sans-serif; /* structure: headings, titles, UI */ --rfi-font-text: 'Open Sans', sans-serif; /* running text */ --rfi-h1-art: 38px; --rfi-h1-page: 24px; --rfi-h2-section: 20px; --rfi-card-title: 16.5px; --rfi-body: 17px; --rfi-desc: 13.5px; --rfi-meta: 12px; --rfi-label: 10px; /* ---- spacing ----------------------------------------------- */ --rfi-block-gap: 38px; /* between blocks on a page */ --rfi-pad-card: 16px; --rfi-pad-panel: 22px; /* ============================================================ PARTNER PROMINENCE Everything that makes a partner louder lives here, so that "give partners more weight" is an edit to this block, not a rewrite of the templates. Raise a number, the whole site follows. ============================================================ */ --rfi-partner-tint: #F0F6FF; --rfi-partner-line: #D8E5F5; --rfi-partner-accent: var(--rfi-navy); --rfi-partner-rule: 3px; /* top rule on a partner card. 0 = invisible */ --rfi-partner-fill: var(--rfi-surface); /* white by default; set to --rfi-partner-tint to tint the whole card */ --rfi-partner-scale: 1; /* 1.0 = same size as editorial. 1.05 = visibly bigger */ /* ============================================================ TIER PALETTE (2026-08-27). One pair per level, background and ink. Until this existed every tier badge was navy on --rfi-partner-tint, so the four levels were told apart only by their words. Standard has NO pair here on purpose: it prints no badge at all, in every place. PLATINUM IS INVERTED AND THAT IS THE WHOLE REASON THIS SET EXISTS. A pale platinum sits within a hair of silver (both are neutral greys at the same lightness), so the top level would read as the middle one. Dark navy separates it at a glance and reads as the top of the ladder rather than as another shade of grey. ============================================================ */ --rfi-tier-bronze-bg: #F7E3C8; --rfi-tier-bronze-ink: #8A5A1F; --rfi-tier-silver-bg: #E8EAED; --rfi-tier-silver-ink: #4B5563; --rfi-tier-gold-bg: #FBEEC2; --rfi-tier-gold-ink: #7A5A00; --rfi-tier-platinum-bg: #3D4A63; --rfi-tier-platinum-ink: #FFFFFF; }