/* ============================================================ Meridian17 — Colors & Type ------------------------------------------------------------ Single source of truth for Meridian17 design tokens. Import via: ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;600&display=swap'); :root { /* ---------- Brand colors ---------- */ --m17-dark-green: #024203; /* primary — nav, hero, dark sections */ --m17-mid-green: #026203; /* hovers, CTAs on light, accents */ --m17-bright-green: #028203; /* active links on dark, highlights */ --m17-accent-green: #a8d5a2; /* hero emphasis, big numbers on dark */ --m17-soft-green: #6aad6a; /* rare secondary accent */ --m17-tint-green: #f3f9f3; /* translation banner background */ --m17-tint-green-2: #e6f0e6; /* "ongoing" status pill bg */ --m17-near-black: #171717; /* body text, footer */ --m17-white: #ffffff; --m17-off-white: #ededed; /* alt section background */ --m17-border: #d8d8d0; /* card + input borders */ --m17-body-muted: #555555; /* secondary text on light */ /* On-dark text (opacity-over-white) */ --m17-on-dark-fg: rgba(255,255,255,1.00); --m17-on-dark-fg-strong: rgba(255,255,255,0.80); --m17-on-dark-fg-body: rgba(255,255,255,0.75); --m17-on-dark-fg-muted: rgba(255,255,255,0.55); --m17-on-dark-fg-subtle: rgba(255,255,255,0.35); --m17-on-dark-fg-faint: rgba(255,255,255,0.25); --m17-on-dark-border: rgba(255,255,255,0.12); --m17-on-dark-border-strong:rgba(255,255,255,0.35); /* ---------- Semantic source tag palette (EU Policy Monitor) ---------- */ --m17-tag-press-bg: #e8f0f5; --m17-tag-press-fg: #2a5f7a; --m17-tag-external-bg: #e8f4e8; --m17-tag-external-fg: #026203; --m17-tag-develop-bg: #f5f0e8; --m17-tag-develop-fg: #8a6a20; --m17-tag-foreign-bg: #f0e8f5; --m17-tag-foreign-fg: #5a3a7a; --m17-tag-trade-bg: #e8f2f5; --m17-tag-trade-fg: #1a6a7a; --m17-tag-top-bg: #f0f0f0; --m17-tag-top-fg: #444444; /* Research status pills */ --m17-status-ongoing-bg: #e6f0e6; --m17-status-ongoing-fg: #026203; --m17-status-upcoming-bg: #f0f0e8; --m17-status-upcoming-fg: #666666; --m17-status-funding-bg: #f5f0e8; --m17-status-funding-fg: #8a6a20; --m17-status-aspiration-bg: #f0eef8; --m17-status-aspiration-fg: #5a4a8a; /* Messaging */ --m17-error: #c62828; --m17-success: #024203; /* ---------- Typography ---------- */ --m17-font-sans: 'Heebo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* Weights — Heebo ships 300 / 400 / 500 / 600 */ --m17-w-light: 300; --m17-w-regular: 400; --m17-w-medium: 500; --m17-w-semibold: 600; /* Base text sizes (px) */ --m17-fs-hero: 52px; /* homepage / page hero H1 */ --m17-fs-h1: 38px; /* article hero */ --m17-fs-h2: 36px; /* section titles */ --m17-fs-h3: 28px; /* newsletter title, translation title */ --m17-fs-h4: 22px; /* card + commentary-item title */ --m17-fs-h5: 20px; /* how-card, advisor-card */ --m17-fs-h6: 17px; /* advisor name, nav logo */ --m17-fs-lead: 18px; /* hero sub, narrative p */ --m17-fs-body: 17px; /* article body */ --m17-fs-body-sm: 15px; /* card body, section-body, btn */ --m17-fs-meta: 14px; /* nav links, form inputs */ --m17-fs-micro: 13px; /* article-hero meta, footer links */ --m17-fs-tag: 12px; /* footer bottom, teaser date */ --m17-fs-label: 11px; /* uppercase eyebrows + tags */ --m17-fs-micro-2: 10px; /* article-sidebar meta, lang pill */ /* Line heights */ --m17-lh-tight: 1.1; /* hero H1 */ --m17-lh-title: 1.2; /* h2 */ --m17-lh-heading: 1.3; /* card titles */ --m17-lh-body: 1.65; /* card body / muted paragraphs */ --m17-lh-body-lg: 1.7; /* hero sub, article body */ --m17-lh-body-xl: 1.75; /* article body p */ --m17-lh-narrative: 1.8; /* narrative / methodology p */ /* Letter spacing */ --m17-ls-display: -0.01em; /* hero / article-hero titles */ --m17-ls-label: 0.10em; /* labels + tagline */ --m17-ls-tag: 0.08em; /* card tag / translation link */ --m17-ls-meta: 0.06em; /* article-sidebar meta */ /* ---------- Spacing & layout ---------- */ --m17-container-max: 1280px; --m17-gutter-lg: 48px; --m17-gutter-md: 32px; --m17-gutter-sm: 20px; --m17-section-y: 80px; --m17-section-y-tight: 64px; --m17-section-y-mobile: 56px; /* Radii */ --m17-radius-xs: 2px; /* language pill */ --m17-radius-sm: 3px; /* buttons, form inputs, tag chips */ --m17-radius-md: 4px; /* cards, images, news-teaser */ --m17-radius-pill: 999px; /* Borders */ --m17-border-hairline: 1px solid var(--m17-border); --m17-border-on-dark: 1px solid rgba(255,255,255,0.12); /* Shadows — the system is nearly flat; shadows only appear on focus */ --m17-shadow-none: none; --m17-shadow-focus: 0 0 0 3px rgba(2,98,3,0.18); /* Transitions */ --m17-ease-std: 0.2s ease; /* colour/opacity */ --m17-ease-slow: 0.3s ease; /* mobile menu expand */ /* Z-index */ --m17-z-nav: 100; --m17-z-menu: 99; } /* ============================================================ Semantic element styles Use the .m17 class on a root to opt in; or import these rules as a base layer in new pages. ============================================================ */ .m17, .m17 body { font-family: var(--m17-font-sans); font-weight: var(--m17-w-light); color: var(--m17-near-black); background: var(--m17-white); -webkit-font-smoothing: antialiased; font-size: 16px; } /* Display — hero H1 */ .m17-display, .m17 h1.hero__title { font-size: var(--m17-fs-hero); font-weight: var(--m17-w-medium); line-height: var(--m17-lh-tight); letter-spacing: var(--m17-ls-display); color: var(--m17-white); } .m17-display em, .m17 h1.hero__title em { font-style: normal; color: var(--m17-accent-green); } /* Section H2 */ .m17-h2 { font-size: var(--m17-fs-h2); font-weight: var(--m17-w-medium); line-height: var(--m17-lh-title); color: var(--m17-near-black); } .m17-h2--on-dark { color: var(--m17-white); } /* Card / article H3–H4 */ .m17-h3 { font-size: var(--m17-fs-h3); font-weight: var(--m17-w-medium); line-height: var(--m17-lh-heading); color: var(--m17-near-black); } .m17-h4 { font-size: var(--m17-fs-h4); font-weight: var(--m17-w-medium); line-height: var(--m17-lh-heading); color: var(--m17-near-black); } .m17-h5 { font-size: var(--m17-fs-h5); font-weight: var(--m17-w-medium); line-height: var(--m17-lh-heading); color: var(--m17-near-black); } /* Eyebrow labels — the signature Meridian17 element */ .m17-label { font-size: var(--m17-fs-label); letter-spacing: var(--m17-ls-label); text-transform: uppercase; color: var(--m17-mid-green); font-weight: var(--m17-w-medium); } .m17-label--on-dark { color: var(--m17-on-dark-fg-muted); } /* Body copy — three weights to choose from */ .m17-lead { font-size: var(--m17-fs-lead); line-height: var(--m17-lh-body-lg); color: var(--m17-body-muted); font-weight: var(--m17-w-light); } .m17-body { font-size: var(--m17-fs-body); line-height: var(--m17-lh-body-xl); color: var(--m17-near-black); font-weight: var(--m17-w-light); } .m17-body-sm { font-size: var(--m17-fs-body-sm); line-height: var(--m17-lh-body); color: var(--m17-body-muted); font-weight: var(--m17-w-light); } /* Links — underlined, opacity-on-hover */ .m17-link { font-size: var(--m17-fs-body-sm); color: var(--m17-mid-green); font-weight: var(--m17-w-medium); border-bottom: 1px solid var(--m17-mid-green); padding-bottom: 1px; transition: opacity var(--m17-ease-std); } .m17-link:hover { opacity: 0.75; }