/* ============================================================= Juniper Genomics — plain-CSS foundations (apps layer) The canonical 2026 brand palette + type (see tokens/tokens.json and DESIGN_SYSTEM.md), expressed as CSS custom properties for the Django/HTMX apps (juniper-grove, juniper-portal). Two families of tokens live here: - Brand tokens (--paper, --deep-teal, --pine, --sage, …) mirror the Tailwind names exactly. Use these first. - App tokens (--jg-pine-700, --space-5, --type-h2, …) are the richer ramps/scales the data apps need, anchored to the brand greens. @font-face URLs resolve against Django's STATIC_URL (/static/fonts/jg/…). Fragment Mono is not self-hosted — load it from Google Fonts in your base template; it falls back to the system mono otherwise: ============================================================= */ /* ----------------------------------------------------------- Fonts — PP Eiko + Open Sans self-hosted, 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; } :root { /* ========================================================= CANONICAL BRAND TOKENS — identical names + values to the Tailwind theme. Reach for these first. ========================================================= */ --paper: #FDFFFB; /* page background (warm off-white) */ --deep-teal: #14333C; /* primary dark: headings, dark sections, high-contrast text */ --slate: #4D646B; /* body text, secondary labels */ --midnight: #294750; /* dark accents, secondary dark surfaces */ --pine: #235E54; /* logo fill, accent headings, submit fill */ --teal-accent: #007F6E; /* illustration / chart accent */ --sage: #ACD8B3; /* decorative tint, card borders, chip bg */ --turquoise: #6EE4E3; /* active-state underlines, highlights */ --gold: #F7F449; /* accent borders, yellow highlights */ --cream: #FCFFEC; /* headline text + button fills on dark */ --mint: #F3FFF2; /* light green bg tints */ /* Legacy aliases — migration only, do not use in new code. */ --forest: var(--pine); --deep-blue: var(--midnight); /* ========================================================= APP RAMPS — anchored to the brand greens. pine-700 = brand pine, pine-900 = brand deep-teal. ========================================================= */ --jg-pine-900: #14333C; /* = --deep-teal */ --jg-pine-800: #1B4A42; --jg-pine-700: #235E54; /* = --pine */ --jg-pine-600: #2E7368; --jg-pine-500: #4A8C82; --jg-pine-300: #9CC4BE; --jg-pine-200: #C6DDD7; --jg-pine-100: #E0EDEA; --jg-pine-050: #F1F6F4; --jg-pine-025: #F7FAF9; /* Sage — sage-400 = brand sage. */ --jg-sage-700: #4FA76B; --jg-sage-500: #87C597; --jg-sage-400: #ACD8B3; /* = --sage */ --jg-sage-300: #C2E3CB; --jg-sage-200: #D9EFDE; --jg-sage-100: #ECF6EE; /* Sky — soft info-surface tints. The bright accent is --turquoise. */ --jg-sky-600: #4FB3B2; --jg-sky-500: #7BCECD; --jg-sky-400: #A6DEDD; --jg-sky-200: #D7EFEE; --jg-sky-100: #EAF7F7; /* Gold accent tints (full-strength gold is reserved for borders/highlights). */ --jg-gold-200: #FBF6A8; --jg-gold-100: #FDFBD0; /* Neutrals */ --jg-cream: #FCFFEC; /* = --cream */ --jg-cream-deep: #EEF0D6; --jg-sand-100: #EFEAD9; /* warm pale sand, for readonly/passive surfaces */ --jg-paper: #FDFFFB; /* = --paper */ --jg-ink-900: #14333C; /* = --deep-teal */ --jg-ink-700: #3D4945; --jg-ink-500: #4D646B; /* = --slate */ --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); /* Apps use a dark default text + slate for secondary, rather than the marketing site's slate body. Headings + primary text = deep-teal. */ --fg-default: var(--deep-teal); --fg-muted: var(--slate); --fg-subtle: var(--jg-ink-300); --fg-onbrand: var(--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: "Fragment Mono", ui-monospace, "SF Mono", 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 — tinted with deep-teal (#14333C). */ --shadow-xs: 0 1px 2px rgba(20, 51, 60, 0.06); --shadow-s: 0 2px 8px rgba(20, 51, 60, 0.07); --shadow-m: 0 8px 24px -8px rgba(20, 51, 60, 0.12); --shadow-l: 0 20px 48px -16px rgba(20, 51, 60, 0.18); --shadow-focus: 0 0 0 3px rgba(110, 228, 227, 0.45); /* turquoise glow */ /* 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); }