/** * mea-blocks design tokens - the single source of truth for color and type. * * Values below are read from the Figma homepage node 2001-4185 * (file 9SWHsksPbiz0sj8IF30o5u, "1. Homepage - CLEAN"). Block `style.scss` * files must resolve color and type through these tokens rather than * repeating literals. Only genuinely one-off geometry (a single section's * padding, a decorative offset) belongs in a block's own stylesheet. * * Figma named text styles that map onto the type tokens here: * "H1 - Section" Inter Regular 45 / 1.1 / 0 * "H3" Inter Semi Bold 24 / 1.3 / 0 * "P1" Inter Regular 20 / 1.6 / 0 * "CTA" Inter Regular 21 / 100% / 0.2 * "Eyebrow Line" Fira Code Light 20 / 100% / 1.5 * Named color styles: Style 2 #FFFFFF, Style 43 #091900, Style 45 #393939. * * Subpage nodes reuse the same named styles and add a few the homepage never * instantiates. Those are tokenised here too, tagged with the node they came * from (e.g. "H2" / "H4" / "P2" from the team page, node 2008-7963). */ :root { /* ---------------------------------------------------------------- * * Type families * Resolved from Figma: every heading/body style in node 2001-4185 is * Inter, and the eyebrow/proof-pill/attribution styles are Fira Code. * The footer legal line is the one exception - it is JetBrains Mono in * Figma, so it gets its own token instead of borrowing --mea-font-mono. * ---------------------------------------------------------------- */ --mea-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --mea-font-mono: "Fira Code", ui-monospace, "SFMono-Regular", monospace; --mea-font-mono-legal: "JetBrains Mono", "Fira Code", ui-monospace, monospace; /* ---------------------------------------------------------------- * * Type scale * ---------------------------------------------------------------- */ /* Hero headline (node 2001:4301). */ --mea-type-hero-size: 90px; --mea-type-hero-lh: 1.1; --mea-type-hero-ls: 1.6px; /* Figma "H1 - Section" - every section headline. Two line-heights: 1.1 is the style's own value; the ora / cta-band instances override it to 1.2 in Figma, so both are tokenised. */ --mea-type-h1-size: 45px; --mea-type-h1-lh: 1.1; --mea-type-h1-lh-loose: 1.2; /* Figma "H1 - Page" - the proof band headline, larger than H1 - Section. R6 names the style on every proof node it draws (2545:1355 home, 2922:10294 ingestion, 2998:3130 carriers, 2998:3142 reinsurers, 2545:3308 brokers, 2545:3060 mgas): Inter Regular 64 / 1.1, letter spacing 0. Was 65px at `normal` here, cited to the pre-R5 node 2001:4238; re-derived 2026-09-04 against R6. src/proof is the only consumer. */ --mea-type-display-size: 64px; --mea-type-display-lh: 1.1; /* Figma "H2" - modal/popup member name (node 2008-7963). */ --mea-type-h2-size: 30px; --mea-type-h2-lh: 1.3; /* Figma "H3". */ --mea-type-h3-size: 24px; --mea-type-h3-lh: 1.3; /* Figma "H4" - card titles, popup role line (node 2008-7963). */ --mea-type-h4-size: 20px; --mea-type-h4-lh: 1.3; /* Figma "P1", plus the 1.5 line-height used by the long-form paragraph instances (drag body, ora body, timeline subhead). */ --mea-type-p1-size: 20px; --mea-type-p1-lh: 1.6; --mea-type-prose-lh: 1.5; /* Figma "P2" - secondary body copy (team card role line, node 2008-7963). */ --mea-type-p2-size: 16px; --mea-type-p2-lh: 1.5; /* Figma "CTA". */ --mea-type-cta-size: 21px; --mea-type-cta-ls: 0.2px; /* Figma "Eyebrow Line". */ --mea-type-eyebrow-size: 20px; --mea-type-eyebrow-ls: 1.5px; /* Timeline card "PROOF: ..." pill (node 2001:4206). */ --mea-type-stat-size: 13px; --mea-type-stat-ls: 2.18px; /* Weights actually used in the design. */ --mea-weight-light: 300; --mea-weight-regular: 400; --mea-weight-medium: 500; --mea-weight-semibold: 600; --mea-weight-bold: 700; /* ---------------------------------------------------------------- * * Brand accent * ---------------------------------------------------------------- */ --mea-accent: #c5ff00; /* lime dot / card border */ --mea-accent-border: #96e137; /* active tab border, hero caret */ --mea-accent-border-soft: #9bdd46; /* hero selector pill border */ --mea-accent-glow: rgba(197, 255, 0, 0.45); --mea-cta-from: #c9e931; --mea-cta-to: #92d828; --mea-cta-ink: #091900; /* Figma "Style 43" */ --mea-cta-gradient: linear-gradient(90deg, var(--mea-cta-from) 0%, var(--mea-cta-to) 100%); --mea-pill-bg: rgba(155, 221, 70, 0.2); --mea-pill-ink: #5a9200; /* Figma value - decorative only, see --mea-accent-ink */ /* Brand green dark enough to be read as text on a light mea surface. Figma paints the proof pill label #5a9200 (--mea-pill-ink) on the #ebf8da pill, which measures 3.42:1 - below WCAG AA - so text roles resolve through this darker step of the same hue instead: 5.38:1 on the pill, 5.95:1 on #fff, 5.66:1 on #f9f9f9. */ --mea-accent-ink: #456f00; --mea-check-ring: rgba(130, 208, 0, 0.32); /* ---------------------------------------------------------------- * * Ink on light surfaces * ---------------------------------------------------------------- */ --mea-ink: #2e2e2b; /* default body + heading */ --mea-ink-strong: #021412; /* drag headline */ --mea-ink-display: #1c1c1a; /* proof headline, header CTA label */ --mea-ink-2: #5a5a56; /* proof attribution */ --mea-ink-eyebrow: #3e6a64; /* drag eyebrow */ /* The insight single's prose heading and blockquote ink (2545:4638 / 2545:4641). --mea-ink-display is the nearest at 8/255 on every channel, which is a visible step at 24px on white. */ --mea-ink-article: #141412; /* ---------------------------------------------------------------- * * Ink on dark surfaces * ---------------------------------------------------------------- */ --mea-on-dark: #fff; /* Figma "Style 2" */ --mea-on-dark-soft: #f4f4f3; /* FAQ answer copy */ /* Two neutral-white inks for copy on dark, deliberately NOT on the 248,247,244 warm base their -muted and -faint siblings below share. Both were rgba(248, 247, 244, 0.92) until 2026-09-01. -strong (0.90, 15.29:1 on --mea-dark) is the emphatic one, and is now mea/site-footer's alone. -copy (0.80, 12.15:1 as of 2026-09-02 - was 0.70/9.46:1) is the general body ink everywhere else on a dark ground: mea/proof's on-dark quote, mea/subpage-hero's soft subhead/note and mea/check-list's `copyInk: soft`. The header does not use either. These are a visibly different weight of ink from each other, unlike the near-duplicate that was merged away here earlier the same day - do not collapse them. */ --mea-on-dark-strong: rgba(255, 255, 255, 0.9); --mea-on-dark-copy: rgba(255, 255, 255, 0.8); --mea-on-dark-muted: rgba(248, 247, 244, 0.55); /* 0.45 measured 4.28:1 on --mea-dark; 0.55 is 5.85:1 */ --mea-on-dark-faint: rgba(248, 247, 244, 0.28); --mea-on-dark-dim: rgba(255, 255, 255, 0.55); /* inactive tab label; 0.4 measured 3.80:1 on --mea-dark, 0.55 is 5.99:1 */ --mea-eyebrow-on-dark: #d7e1e0; /* cta-band eyebrow */ /* The insight single's three inks on dark (R6 frame 15, `2545:4603`). No existing on-dark token is within 5/255 of any of them and they are a deliberate ladder - headline, lede, meta - so they are tokens rather than three literals in one block's stylesheet. Contrast measured on --mea-dark: 18.10:1, 7.27:1 and 5.57:1, the last of which is the whole page's worst reading and clears AA's 4.5 floor. */ --mea-on-dark-headline: #fafafa; /* insight article title, 2545:4626 */ --mea-on-dark-lede: #a1a19a; /* insight article lede, 2545:4627 */ --mea-on-dark-meta: #8c8c82; /* insight date / read time, 2545:4629 */ /* ---------------------------------------------------------------- * * Surfaces * ---------------------------------------------------------------- */ --mea-surface: #fafafa; /* page background, light sections */ --mea-surface-alt: #edeff3; /* proof section, timeline bubble */ /* Pure white, NOT --mea-surface's #fafafa. R6 paints the insight single's article ground `bg-white` (2545:4630) and mea/product-cards already carried the same value as a commented literal for the same reason; this is the shared name the audit's row 95 asked for. */ --mea-surface-pure: #fff; --mea-dark: #021412; /* dark sections + footer */ --mea-bridge-bg: #094d46; /* bridge-band ground, about-us + team */ /* Raised dark panel on the case-study singles: the client-snapshot card and the challenge / executes / operating-shift / result / testimonial sections. Measured identical on all three R6 frames (3012:10291, 3012:10333, ...); no existing dark token is within 30/255 of it on any channel. */ --mea-panel-raised: #062320; --mea-panel-light: #eef9ff; /* hero selector dropdown */ --mea-glass: rgba(255, 255, 255, 0.05); /* case-studies feature box, cta band */ --mea-glass-strong: rgba(255, 255, 255, 0.2); /* check tile */ /* ---------------------------------------------------------------- * * Figma's GLASS effect, resolved into the two CSS layers it splits * into. It is not a colour, but it is a shared DESIGN VALUE that was * duplicated across three blocks, so it lives here for the same * reason a hex does: one definition, no re-derivation per block. * * The numbers are sampled, not invented. See mea-blocks/AGENTS.md, * "Figma's GLASS effect is two things, and only one of them can be a * box-shadow": on `2008:8249` and `2139:3387` the effect resolves * into a 1px hairline lit from the top left (white at 0.26 alpha on * the top and left, 0.21 on the bottom and right) plus an inward * refraction ramp over the outer 20px top/left and 12px bottom/right. * * -bevel is that ramp, as four background layers. A blurred inset * shadow cannot carry it: a blurred inset shadow peaks AT the edge, * so it composites UNDER the hairline and drove the shaded edges from * 0.21 to 0.27. Each layer holds its first 1px transparent so the * hairline still paints over undimmed glass. The ramp colour is * `#0c1412`, NOT --mea-dark: solving the node's samples back through * the composite gives rgb(12, 20, 18), and painting the token lands * green and blue exactly but red 5/255 dark. * * -hairline-inset is the edge as an INSET SHADOW rather than a * `border`. Figma draws the stroke inside the frame, and a real * border on a card whose height comes from its copy adds 2px to every * card - the trap AGENTS.md records in four places. The inset form * paints the same four alphas at no layout cost. * * NOT shared with mea/check-list, deliberately. Its hairline alphas * are 37%/26% and 22%/18% because that overlay composites over the * panel's own 5% fill first, so the declared value has to be * (a_ground - a_fill) / (1 - a_fill). AGENTS.md: "These are NOT * interchangeable with card-grid's 26 / 21". The BEVEL is shared; * the hairline is per-node. * ---------------------------------------------------------------- */ --mea-glass-bevel: linear-gradient(180deg, transparent 1px, color-mix(in srgb, #0c1412 58%, transparent) 1px, transparent 21px), linear-gradient(90deg, transparent 1px, color-mix(in srgb, #0c1412 58%, transparent) 1px, transparent 21px), linear-gradient(0deg, transparent 1px, color-mix(in srgb, var(--mea-on-dark) 3%, transparent) 1px, transparent 13px), linear-gradient(270deg, transparent 1px, color-mix(in srgb, var(--mea-on-dark) 3%, transparent) 1px, transparent 13px); /* ---------------------------------------------------------------- * * The SAME Figma effect, modelled as white alpha instead of as a dark * overlay. Use this pair on any glass card that does NOT sit on flat * --mea-dark. * * The dimming half of --mea-glass-bevel is a FIXED DARK COLOUR painted * OVER the fill, so how far it pulls depends on what is underneath, * while R6's glass fades its own white and does not. On flat #021412 * the two are indistinguishable, which is why the dark-overlay form * fits mea/cta-band's `2555:8060` exactly (its dim drops 5.9 luminance * against R6's own 5.9). It falls apart on a washed ground. Measured * 2026-09-09 down /careers' `2545:3945`, whose panel carries * `panelGlow: 60`: the ground under card 01 is rgb(7,24,23) and under * card 07 rgb(26,53,50), and the same overlay drops 8/255 on the first * and 20/255 on the last where R6 drops ~5 on both. On the bottom row * it drove the lit edges BELOW the panel behind them - a negative * effective white alpha, which is the dark smudge along the top and * left of the lower cards. * * Solving R6's own render for white alpha instead gives one profile * that holds across all seven cards (per-card spread in brackets): * * field 4.81% [4.50 - 5.15] corner 1.64% [1.24 - 2.21] * top 2.68% [2.43 - 2.92] bottom 7.23% [6.77 - 7.64] * left 2.49% [1.97 - 2.77] right 7.96% [7.62 - 8.23] * * with all four ramps linear in alpha over ~15px. That is what the two * tokens below reproduce: a very low base, two ramps that BUILD UP to * the field away from the lit edges, and two that lift further at the * shaded ones. The four stops are solved, not guessed - they put field, * top, left, bottom and right on the measured values exactly. * * The one knowing compromise is the corner. Two build-up ramps compose * multiplicatively where they overlap, so the corner lands at the base * 0.31% against a measured 1.64% - R6 stacks its two ramps more gently * than a product. That is ~3/255 too dark over a 15x15 patch, taken * deliberately over the alternative (fit the corner and run 1.3 points * dark across the whole field, which is orders of magnitude more area). * * THE TWO GO TOGETHER. The ramps build on -base's 0.31%, not on * --mea-glass's 5%; over that they would put the field near 9%. * * No stop is written `color-mix(..., 0%, transparent)`: the build's * minifier rewrites a literal 0% to 0 and invalidates the function. * The zero ends are plain `transparent`. * * Consumed by mea/card-grid's `cardBevel: corrected`, which must also * set `background-origin: border-box` - see the note beside that rule. * ---------------------------------------------------------------- */ --mea-glass-fitted-base: color-mix(in srgb, var(--mea-on-dark) 0.31%, transparent); --mea-glass-bevel-fitted: linear-gradient(180deg, transparent 1px, color-mix(in srgb, var(--mea-on-dark) 2.19%, transparent) 16px), linear-gradient(90deg, transparent 1px, color-mix(in srgb, var(--mea-on-dark) 2.38%, transparent) 16px), linear-gradient(0deg, color-mix(in srgb, var(--mea-on-dark) 2.54%, transparent) 1px, transparent 16px), linear-gradient(270deg, color-mix(in srgb, var(--mea-on-dark) 3.31%, transparent) 1px, transparent 16px); /* ---------------------------------------------------------------- * * The same white-alpha model, fitted to mea/cta-band's OWN profile. * * A second pair rather than reuse, because R6 genuinely draws two * different glasses and the numbers are not interchangeable. Measured * 2026-09-14 on 2545:1767 (/products' closing CTA), confirmed on * 2545:4851 and 3012:10426, all four ramps linear over 15px: * * field top left bottom right * cta-band 5.10 2.86 2.86 8.00 8.00 * card family 4.81 2.68 2.49 7.23 7.96 * * Painting the card family's values here would have been WRONG, not * merely inconsistent: the dark-overlay form this replaces already * reproduced 2545:1767 to a mean 0.10pp, and the card values measure * 0.33pp against the same node. The stops below are solved from the * table, and round-trip to field 5.11 / top 2.87 / left 2.87 / * bottom 8.01 / right 8.01. * * Why move at all, when the dark overlay already matched: it matched * only because every one of this block's 19 instances sits on flat * --mea-dark, where the two models are indistinguishable. The white * form is ground-independent, so the shape stays right if a card is * ever placed over a wash - which is exactly how the card family broke. * * Same corner compromise as the pair above: the two lit ramps compose * multiplicatively where they overlap, so the corner lands at the base * rather than at R6's own value. cta-band's 20px radius hides more of * that overlap than the 16px cards do. * ---------------------------------------------------------------- */ --mea-glass-fitted-cta-base: color-mix(in srgb, var(--mea-on-dark) 0.57%, transparent); --mea-glass-bevel-fitted-cta: linear-gradient(180deg, transparent 1px, color-mix(in srgb, var(--mea-on-dark) 2.31%, transparent) 16px), linear-gradient(90deg, transparent 1px, color-mix(in srgb, var(--mea-on-dark) 2.31%, transparent) 16px), linear-gradient(0deg, color-mix(in srgb, var(--mea-on-dark) 3.06%, transparent) 1px, transparent 16px), linear-gradient(270deg, color-mix(in srgb, var(--mea-on-dark) 3.06%, transparent) 1px, transparent 16px); --mea-glass-hairline-inset: inset 0 1px 0 0 color-mix(in srgb, var(--mea-on-dark) 26%, transparent), inset 1px 0 0 0 color-mix(in srgb, var(--mea-on-dark) 26%, transparent), inset 0 -1px 0 0 color-mix(in srgb, var(--mea-on-dark) 21%, transparent), inset -1px 0 0 0 color-mix(in srgb, var(--mea-on-dark) 21%, transparent); --mea-scrim: rgba(255, 255, 255, 0.08); /* hero selector pill */ --mea-nav-bg: rgba(0, 0, 0, 0.7); /* header bar */ --mea-tab-active-bg: rgba(27, 97, 89, 0.4); /* case-studies active tab */ --mea-row-bg: rgba(180, 195, 197, 0.1); /* ora list row */ --mea-row-active-bg: rgba(236, 236, 225, 0.2);/* ora list row, highlighted */ --mea-glow-teal: #3e6a64; /* ora / case-studies ambient glow */ --mea-dot-inactive: #e6e6e2; /* inactive tab dot */ --mea-media-placeholder: #dcdcdc; /* portrait plate behind team photos */ /* ---------------------------------------------------------------- * * Rules and dividers * ---------------------------------------------------------------- */ --mea-rule: #393939; /* Figma "Style 45" - FAQ rows */ --mea-rule-light: #e6e6e2; /* header underline, dropdown divider */ --mea-rule-dark: #2e2e2b; /* footer borders */ --mea-rule-dash: #cecece; /* timeline connector dashes */ /* ---------------------------------------------------------------- * * Radii * ---------------------------------------------------------------- */ --mea-card-radius: 5px; /* timeline cards, ora rows */ --mea-panel-radius: 20px; /* cta band */ --mea-media-radius: 20px; /* drag media */ --mea-glass-radius: 38px; /* case-studies feature box */ --mea-tile-radius: 11px; /* check tile */ --mea-pill-radius: 999px; /* every pill / CTA in the design */ /* ---------------------------------------------------------------- * * Layout * The Figma frame is 1440 wide with an 88px section gutter, so the * content column is 1264px (matches "Case Studies Content", 1264). * The nav bar uses an 80px gutter, and the FAQ list / footer have * their own narrower caps (1023 / 1200 in Figma). * ---------------------------------------------------------------- */ --mea-maxw: 1440px; --mea-gutter: clamp(20px, 6.1111vw, 88px); --mea-nav-gutter: clamp(20px, 5.5556vw, 80px); --mea-faq-maxw: 1023px; --mea-footer-maxw: 1200px; /* ---------------------------------------------------------------- * * `--mea-color-*` compatibility layer * The subpage blocks (feature-split, metric-grid, workflow-stepper, * insights-featured, news-feed) were written against a `--mea-color-*` * namespace this file never defined, so every one of those colors * silently resolved to the literal in its own `var()` fallback - * including `#0E1900`, which is the parent theme's heading color, and * `#7fb736`, measured at 2.05-2.41:1. Defining the names here routes * those blocks back through the Figma palette above. Roles that already * cleared AA keep their shipped literal so nothing that was signed off * shifts; only the roles that failed move. * ---------------------------------------------------------------- */ --mea-color-white: var(--mea-on-dark); /* #fff */ --mea-color-brand-black: var(--mea-ink-strong); /* Figma dark #021412, not the theme's #0E1900 */ --mea-color-brand-green: var(--mea-accent); /* lime pill/arrow; was #00ff00 */ --mea-color-green: var(--mea-accent-ink); /* accent text + borders on light; #7fb736 was 2.41:1 */ --mea-color-dark: var(--mea-ink-strong); /* headings on light; was the theme's #0E1900 */ --mea-color-gray-dark: var(--mea-ink); /* body copy #2e2e2b */ --mea-color-gray-600: var(--mea-ink-2); /* secondary copy on light #5a5a56 */ --mea-color-gray-500: var(--mea-ink-2); /* was #888 at 3.54:1 on white */ --mea-color-gray-900: #1a1a1a; /* insight card surface, not text */ --mea-color-gray-400: #999; /* meta on the #1a1a1a card - 6.11:1 */ --mea-color-gray-300: #ccc; /* excerpt on the #1a1a1a card - 10.84:1 */ --mea-color-gray-200: #e5e5e5; /* hairline rule, not text */ --mea-color-gray-50: #f9f9f9; /* row hover surface, not text */ --mea-color-gray-light: #f5f5f5; /* section surface, not text */ } /** * Breakpoint convention (shared across all mea-blocks): * mobile: <= 767px * tablet: 768px - 1023px * desktop: >= 1024px * wide: >= 1440px * * Figma only supplies the 1440 desktop frame for this page, so tablet and * mobile behavior is interpolated from it: type steps down with `clamp()` * anchored on the desktop value, two-column rows collapse to one column at * <= 1023, and section padding tightens in two steps. Wide (>= 1440) is * handled by --mea-maxw capping the content column at the Figma width so * nothing stretches past the design. */