/* ============================================================= Juniper Genomics — Colors & Type Foundations Vendored from the Juniper Genomics Design System. Only the @font-face URLs differ from the upstream copy — they resolve against Django's STATIC_URL. ============================================================= */ /* ----------------------------------------------------------- Fonts — local-first, system fallback ----------------------------------------------------------- */ @font-face { font-family: "PP Eiko"; src: url("/static/fonts/jg/PPEiko-Regular.woff2") format("woff2"), url("/static/fonts/jg/PPEiko-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Open Sans"; src: url("/static/fonts/jg/OpenSans-VariableFont_wdth,wght.ttf") format("truetype-variations"); font-weight: 300 800; font-style: normal; font-display: swap; } @font-face { font-family: "Open Sans"; src: url("/static/fonts/jg/OpenSans-Italic-VariableFont_wdth,wght.ttf") format("truetype-variations"); font-weight: 300 800; font-style: italic; font-display: swap; } /* ----------------------------------------------------------- COLOR — Brand palette ----------------------------------------------------------- */ :root { /* Primary — Pine Green */ --jg-pine-900: #143832; --jg-pine-800: #1B4A42; --jg-pine-700: #225E54; --jg-pine-600: #2E7368; --jg-pine-500: #4A8C82; --jg-pine-300: #9CC4BE; --jg-pine-100: #E0EDEA; --jg-pine-050: #F1F6F4; /* Secondary — Sage Mint */ --jg-sage-700: #4FA76B; --jg-sage-500: #87C597; --jg-sage-400: #A3D9B1; --jg-sage-300: #BCE3C5; --jg-sage-200: #D2ECD8; --jg-sage-100: #E6F4E8; /* Tertiary — Sky Cyan */ --jg-sky-600: #4FB3B2; --jg-sky-500: #7BCECD; --jg-sky-400: #A6DEDD; --jg-sky-200: #D7EFEE; --jg-sky-100: #EAF7F7; /* Neutrals */ --jg-cream: #F8F5EF; --jg-cream-deep: #EFEAE0; --jg-paper: #FFFFFF; --jg-ink-900: #1A2421; --jg-ink-700: #3D4945; --jg-ink-500: #6B7672; --jg-ink-300: #A6ADAA; --jg-ink-200: #D5D9D7; --jg-ink-100: #E8ECEA; /* Semantic */ --jg-success: #4FA76B; --jg-warn: #C68A3F; --jg-error: #A53F3F; --jg-info: var(--jg-pine-600); --bg-page: var(--jg-paper); --bg-surface: var(--jg-paper); --bg-muted: var(--jg-pine-050); --bg-warm: var(--jg-cream); --bg-tint-sage: var(--jg-sage-100); --bg-tint-sky: var(--jg-sky-100); --bg-inverse: var(--jg-pine-900); --fg-default: var(--jg-pine-900); --fg-muted: var(--jg-ink-500); --fg-subtle: var(--jg-ink-300); --fg-onbrand: var(--jg-cream); --fg-link: var(--jg-pine-700); --border-default: var(--jg-ink-100); --border-strong: var(--jg-ink-200); --border-brand: var(--jg-pine-300); /* TYPE */ --font-display: "PP Eiko", "Cormorant Garamond", "Times New Roman", Georgia, serif; --font-body: "Open Sans", -apple-system, "Segoe UI", system-ui, sans-serif; --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace; --type-display-xl: 400 88px/0.95 var(--font-display); --type-display-l: 400 64px/1.02 var(--font-display); --type-display-m: 400 48px/1.08 var(--font-display); --type-display-s: 400 36px/1.12 var(--font-display); --type-h1: 600 32px/1.2 var(--font-body); --type-h2: 600 24px/1.25 var(--font-body); --type-h3: 600 20px/1.3 var(--font-body); --type-eyebrow: 600 12px/1.4 var(--font-body); --type-body-lg: 400 18px/1.55 var(--font-body); --type-body: 400 16px/1.6 var(--font-body); --type-body-sm: 400 14px/1.55 var(--font-body); --type-caption: 400 12px/1.4 var(--font-body); --type-button: 600 15px/1 var(--font-body); --type-code: 400 13.5px/1.5 var(--font-mono); /* Spacing */ --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; /* Radii */ --radius-xs: 4px; --radius-s: 8px; --radius-m: 12px; --radius-l: 20px; --radius-xl: 28px; --radius-pill: 999px; /* Shadow */ --shadow-xs: 0 1px 2px rgba(20, 56, 50, 0.06); --shadow-s: 0 2px 8px rgba(20, 56, 50, 0.07); --shadow-m: 0 8px 24px -8px rgba(20, 56, 50, 0.12); --shadow-l: 0 20px 48px -16px rgba(20, 56, 50, 0.18); --shadow-focus: 0 0 0 3px rgba(123, 206, 205, 0.45); /* Motion */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 420ms; } /* ----------------------------------------------------------- SEMANTIC ELEMENT STYLES ----------------------------------------------------------- */ .jg-page { background: var(--bg-page); color: var(--fg-default); font: var(--type-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .jg-display-xl { font: var(--type-display-xl); color: var(--fg-default); letter-spacing: -0.01em; text-wrap: balance; } .jg-display-l { font: var(--type-display-l); color: var(--fg-default); letter-spacing: -0.005em; text-wrap: balance; } .jg-display-m { font: var(--type-display-m); color: var(--fg-default); text-wrap: balance; } .jg-display-s { font: var(--type-display-s); color: var(--fg-default); text-wrap: balance; } .jg-h1 { font: var(--type-h1); color: var(--fg-default); } .jg-h2 { font: var(--type-h2); color: var(--fg-default); } .jg-h3 { font: var(--type-h3); color: var(--fg-default); } .jg-eyebrow { font: var(--type-eyebrow); color: var(--jg-pine-600); text-transform: uppercase; letter-spacing: 0.14em; } .jg-body-lg { font: var(--type-body-lg); color: var(--fg-default); text-wrap: pretty; } .jg-body { font: var(--type-body); color: var(--fg-default); text-wrap: pretty; } .jg-body-sm { font: var(--type-body-sm); color: var(--fg-default); } .jg-caption { font: var(--type-caption); color: var(--fg-muted); } a.jg-link { color: var(--fg-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } a.jg-link:hover { color: var(--jg-pine-600); }