/* ============================================================ IRBM Design System — Colors & Type Source: IRBM PANTONE.svg, IRBM Presentation Guidelines.pdf, IRBM Peptides Flyer 052025, www.irbm.com ============================================================ */ /* ------------------------------------------------------------ FONT — Barlow (used throughout IRBM PowerPoint, web, print) "Ensure Barlow font is used throughout, including all charts" Loaded from local /fonts/ (official Barlow family). ------------------------------------------------------------ */ @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 100; font-display: swap; src: url('fonts/Barlow-Thin.ttf') format('truetype'); } @font-face { font-family: 'Barlow'; font-style: italic; font-weight: 100; font-display: swap; src: url('fonts/Barlow-ThinItalic.ttf') format('truetype'); } @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 200; font-display: swap; src: url('fonts/Barlow-ExtraLight.ttf') format('truetype'); } @font-face { font-family: 'Barlow'; font-style: italic; font-weight: 200; font-display: swap; src: url('fonts/Barlow-ExtraLightItalic.ttf') format('truetype'); } @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/Barlow-Light.ttf') format('truetype'); } @font-face { font-family: 'Barlow'; font-style: italic; font-weight: 300; font-display: swap; src: url('fonts/Barlow-LightItalic.ttf') format('truetype'); } @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Barlow-Regular.ttf') format('truetype'); } @font-face { font-family: 'Barlow'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/Barlow-Italic.ttf') format('truetype'); } @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/Barlow-Medium.ttf') format('truetype'); } @font-face { font-family: 'Barlow'; font-style: italic; font-weight: 500; font-display: swap; src: url('fonts/Barlow-MediumItalic.ttf') format('truetype'); } @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/Barlow-SemiBold.ttf') format('truetype'); } @font-face { font-family: 'Barlow'; font-style: italic; font-weight: 600; font-display: swap; src: url('fonts/Barlow-SemiBoldItalic.ttf') format('truetype'); } @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/Barlow-Bold.ttf') format('truetype'); } @font-face { font-family: 'Barlow'; font-style: italic; font-weight: 700; font-display: swap; src: url('fonts/Barlow-BoldItalic.ttf') format('truetype'); } @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/Barlow-ExtraBold.ttf') format('truetype'); } @font-face { font-family: 'Barlow'; font-style: italic; font-weight: 800; font-display: swap; src: url('fonts/Barlow-ExtraBoldItalic.ttf') format('truetype'); } @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 900; font-display: swap; src: url('fonts/Barlow-Black.ttf') format('truetype'); } @font-face { font-family: 'Barlow'; font-style: italic; font-weight: 900; font-display: swap; src: url('fonts/Barlow-BlackItalic.ttf') format('truetype'); } :root { /* === BRAND COLORS ====================================== */ /* PRIMARY — brand anchor is #034796. Always use this blue. */ /* Alternative primaries: Teal #51B6C2 and pure White. */ --irbm-blue: #034796; /* ★ brand anchor (3 / 71 / 150) */ --irbm-teal: #51B6C2; /* primary alt (81 / 182 / 194) */ --irbm-white: #FFFFFF; /* Tints / shades of the anchor blue — for hover, charts, surfaces */ --irbm-blue-700: #023773; /* hover / pressed */ --irbm-blue-500: #2466B0; /* mid */ --irbm-blue-300: #6E97CB; /* tints, charts */ --irbm-blue-100: #D6E1F0; /* surface tint */ --irbm-blue-50: #EDF2F8; /* subtle background */ /* SECONDARY — accent palette */ --irbm-yellow: #FFBF18; /* main secondary (255 / 191 / 24) */ --irbm-purple: #462E8D; /* (70 / 46 / 141) */ --irbm-pink: #C86983; /* (200 / 105 / 131) */ --irbm-cyan: #4DD5BD; /* (77 / 213 / 189) */ /* Legacy/derived deep navy for hero darks (kept for backwards compat) */ --irbm-navy: #0B2747; /* Neutrals — brand kit defines just two greys. Use Dark Gray for body text, Light Gray for dividers/surfaces. Pure black/white reserved for highest-contrast moments only. */ --irbm-dark-gray: #444444; /* (68 / 68 / 68) — body text */ --irbm-light-gray: #E6E6E6; /* (230/230/230) — dividers */ --irbm-black: #000000; --irbm-paper: #F5F7FA; /* derived soft surface (kept for layout) */ /* Legacy aliases — point to the brand greys so older cards keep working */ --irbm-ink: var(--irbm-dark-gray); --irbm-graphite: var(--irbm-dark-gray); --irbm-grey: var(--irbm-dark-gray); --irbm-mist: var(--irbm-light-gray); --irbm-fog: var(--irbm-light-gray); /* Semantic / accent — kept conservative, scientific. Avoid neon. Use sparingly per guidelines. */ --irbm-success: #2E8B5F; --irbm-warning: #C98A1A; --irbm-danger: #B23A2C; --irbm-highlight: var(--irbm-yellow); /* "key insight" / data callout */ /* === SEMANTIC TOKENS =================================== */ --fg-1: var(--irbm-black); /* primary text */ --fg-2: var(--irbm-graphite); /* secondary text */ --fg-3: var(--irbm-grey); /* tertiary / meta */ --fg-on-blue: var(--irbm-white); --fg-link: var(--irbm-blue); --fg-link-hover: var(--irbm-blue-700); --bg-1: var(--irbm-white); /* default page */ --bg-2: var(--irbm-paper); /* alt section */ --bg-3: var(--irbm-fog); /* dividers / inputs */ --bg-brand: var(--irbm-blue); /* hero, footer */ --bg-brand-deep: var(--irbm-navy); --border-1: var(--irbm-fog); --border-2: var(--irbm-mist); --border-strong: var(--irbm-graphite); /* === TYPE — FAMILIES =================================== */ /* Per Typesetting & Hierarchy guideline: Barlow throughout body and section type; Barlow Semi Condensed for Heading + Subtitle (32/24pt). SC family loaded from Google Fonts until TTFs arrive locally. */ --font-sans: 'Barlow', 'Helvetica Neue', Arial, sans-serif; --font-condensed: 'Barlow Semi Condensed', 'Barlow', 'Helvetica Neue', Arial, sans-serif; --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace; /* === TYPE — WEIGHTS (match Barlow shipped weights) ===== */ --w-light: 300; --w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 700; --w-extrabold: 800; /* === TYPE — SCALE ====================================== */ /* Brand kit "Typesetting and Hierarchy" — fixed pt sizes. Title 60pt, Heading 32pt (SC), Subtitle 24pt (SC), Section 16pt, Subheading/Body 12pt, Quote 15pt italic, Caption 9pt. */ --fs-title: 60px; /* Barlow Bold */ --fs-heading: 32px; /* Barlow Semi Condensed Bold */ --fs-subtitle: 24px; /* Barlow Semi Condensed Regular */ --fs-section: 16px; /* Barlow Bold */ --fs-subheading: 12px; /* Barlow Bold */ --fs-body: 12px; /* Barlow Regular (documents) */ --fs-body-presentation: 24px; /* Barlow Regular (presentations — minimum) */ --fs-quote: 15px; /* Barlow Italic */ --fs-caption: 9px; /* Barlow Bold */ /* Web-scaled aliases (kept for older components) */ --fs-display: 60px; --fs-h1: 48px; --fs-h2: 32px; --fs-h3: 24px; --fs-h4: 16px; --fs-lead: 20px; --fs-small: 11px; --fs-eyebrow: 12px; --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.45; --lh-loose: 1.7; --tracking-tight: -0.01em; --tracking-normal: 0em; --tracking-wide: 0.06em; --tracking-eyebrow: 0.18em; /* === SPACING / RADII / ELEVATION ======================= */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-xl: 24px; --radius-pill: 999px; /* Elevation — flat, restrained. Brand reads as institutional, not consumer-app. Avoid heavy/blurred shadows. */ --shadow-1: 0 1px 2px rgba(11, 39, 71, 0.06), 0 0 0 1px rgba(11, 39, 71, 0.04); --shadow-2: 0 2px 6px rgba(11, 39, 71, 0.08), 0 0 0 1px rgba(11, 39, 71, 0.05); --shadow-3: 0 8px 24px rgba(11, 39, 71, 0.10), 0 0 0 1px rgba(11, 39, 71, 0.05); --shadow-focus: 0 0 0 3px rgba(0, 74, 152, 0.25); --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 360ms; --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1); /* === LAYOUT ============================================ */ --container-max: 1280px; --gutter: 24px; } /* ============================================================ BASE — HTML elements ============================================================ */ html, body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--fg-1); background: var(--bg-1); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans); font-weight: var(--w-bold); color: var(--fg-1); letter-spacing: var(--tracking-tight); line-height: var(--lh-snug); margin: 0; text-wrap: balance; } h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } h4 { font-size: var(--fs-h4); font-weight: var(--w-semibold); } p { margin: 0; text-wrap: pretty; } a { color: var(--fg-link); text-decoration: none; transition: color var(--duration-fast) var(--ease-standard); } a:hover { color: var(--fg-link-hover); text-decoration: underline; } small { font-size: var(--fs-small); color: var(--fg-2); } code, kbd, pre { font-family: var(--font-mono); } /* ============================================================ UTILITIES — semantic class helpers ============================================================ */ .u-eyebrow { font-size: var(--fs-eyebrow); font-weight: var(--w-bold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--irbm-blue); } .u-display { font-size: var(--fs-display); font-weight: var(--w-extrabold); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); text-transform: uppercase; /* IRBM hero style: "FROM BOLD IDEAS…" */ } .u-headline-uppercase { /* section H2 style on irbm.com */ text-transform: uppercase; letter-spacing: 0.01em; font-weight: var(--w-bold); } .u-lead { font-size: var(--fs-lead); color: var(--fg-2); line-height: var(--lh-normal); } .u-meta { font-size: var(--fs-small); color: var(--fg-3); } .u-mono { font-family: var(--font-mono); } .u-divider { height: 1px; background: var(--border-1); border: 0; margin: 0; }