/* ========================================================================= Crane Bioworks — vanilla CSS distribution (tokens + type primitives) For no-build / static / non-Tailwind sites. Link this one file: It loads the brand fonts and defines the --c-* / --fg-* / --font-* / --t-* tokens plus the .cb-* type primitives. Tailwind/React consumers use the preset + components instead. Brand: navy ink + violet PRIMARY accent on cream paper, with a sparing amber warm SECONDARY. Emerald and the old three-tier gold are retired (kept below only as legacy aliases so existing class refs don't break — do not use them for new brand accents). ========================================================================= */ @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Source+Serif+4:ital,opsz,wght@0,8..60,300..700;1,8..60,300..700&display=swap"); :root { /* ----------------------------------------------------------------------- * BRAND ACCENT — Violet (primary). It is the logotype colour. * --------------------------------------------------------------------- */ --c-violet: #6a5ae0; /* logo periwinkle — primary brand accent */ --c-violet-muted: #8b7cf5; --c-violet-deep: #5145b5; --c-violet-50: #f5f3ff; --c-violet-100: #ede9fe; --c-violet-200: #ddd6fe; --c-violet-300: #c4b5fd; --c-violet-400: #a78bfa; --c-violet-500: #8b7cf5; --c-violet-600: #6a5ae0; --c-violet-700: #5145b5; --c-violet-800: #4338ca; --c-violet-900: #3730a3; /* ----------------------------------------------------------------------- * WARM SECONDARY — Amber. Used sparingly: a highlight, a status, a spark. * Never a co-equal accent. * --------------------------------------------------------------------- */ --c-amber: #f59e0b; --c-amber-bright: #fbbf24; /* on dark surfaces */ --c-amber-deep: #b45309; /* text on light surfaces */ --c-amber-50: #fffbeb; --c-amber-100: #fef3c7; --c-amber-400: #fbbf24; --c-amber-500: #f59e0b; --c-amber-600: #d97706; --c-amber-700: #b45309; /* ----------------------------------------------------------------------- * LEGACY (retired) — emerald + gold. Kept only so old class references * don't break. Do not use for new brand accents. * --------------------------------------------------------------------- */ --c-emerald: #10b981; --c-emerald-deep: #059669; --c-emerald-600: #059669; --c-emerald-700: #047857; --c-gold: #f59e0b; --c-gold-600: #d97706; --c-gold-700: #b45309; /* ----------------------------------------------------------------------- * SURFACES — cream is the default light page bg; navy anchors + is the ink. * --------------------------------------------------------------------- */ --surface-cream: #f5f0e6; /* primary page bg */ --surface-light: #faf8f4; /* card bg, elevated surfaces */ --surface-paper: #ffffff; /* form inputs, high contrast */ --surface-navy: #223153; /* CTA + footer + body text */ --surface-panel: #1a2540; /* dark cards */ --surface-dark: #121a2e; /* dark section bg */ --surface-deep: #0c1220; /* deepest dark */ /* ----------------------------------------------------------------------- * SEMANTIC FOREGROUNDS (light theme) — opacity-stepped navy on cream. * --------------------------------------------------------------------- */ --fg-1: #223153; /* primary ink — headings, body */ --fg-2: rgba(34,49,83,0.86); /* body strong */ --fg-3: rgba(34,49,83,0.70); /* body default */ --fg-4: rgba(34,49,83,0.50); /* secondary / captions */ --fg-5: rgba(34,49,83,0.40); /* muted / hairlines */ --fg-on-dark: #f8f6f1; --fg-on-dark-2: rgba(255,255,255,0.70); --fg-on-dark-3: rgba(255,255,255,0.50); --fg-on-dark-4: rgba(255,255,255,0.40); /* Hairlines / borders */ --border-subtle: rgba(34,49,83,0.06); --border-default: rgba(34,49,83,0.10); --border-strong: rgba(34,49,83,0.20); --border-on-dark: rgba(255,255,255,0.10); --border-on-dark-2: rgba(255,255,255,0.20); /* ----------------------------------------------------------------------- * SHADOWS — neutral navy-tinted elevation (no colored glow). * --------------------------------------------------------------------- */ --shadow-navy: rgba(34,49,83,0.08); --shadow-card: 0 4px 20px -2px rgba(34,49,83,0.08); --shadow-card-hover: 0 20px 40px -8px rgba(34,49,83,0.12), 0 8px 16px -4px rgba(34,49,83,0.08); --shadow-card-violet: 0 20px 40px -8px rgba(106,90,224,0.16), 0 8px 16px -4px rgba(106,90,224,0.10); --shadow-button: 0 2px 8px rgba(34,49,83,0.10); --shadow-button-hover:0 8px 20px rgba(34,49,83,0.18); --shadow-nav: 0 1px 3px rgba(34,49,83,0.06); --shadow-modal: 0 20px 40px rgba(34,49,83,0.12); /* ----------------------------------------------------------------------- * TYPOGRAPHY — font stacks * Plus Jakarta Sans : structure (H1–H3), UI, buttons, labels, eyebrows * Source Serif 4 : reading body text * JetBrains Mono : technical labels, model names, code * --------------------------------------------------------------------- */ --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-jakarta: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --font-display: var(--font-jakarta); /* ----------------------------------------------------------------------- * TYPE SCALE — raw tokens * --------------------------------------------------------------------- */ --t-hero-size: clamp(3.5rem, 6vw + 1rem, 5.5rem); --t-hero-leading: 0.92; --t-hero-tracking: -0.02em; --t-hero-weight: 800; --t-section-size: clamp(2.25rem, 3.2vw + 0.5rem, 3.25rem); --t-section-leading: 1.05; --t-section-tracking: -0.02em; --t-section-weight: 700; --t-card-size: clamp(1.25rem, 1.2vw + 0.6rem, 1.5rem); --t-card-leading: 1.25; --t-card-tracking: -0.01em; --t-card-weight: 700; --t-body-lg-size: 1.125rem; --t-body-lg-leading: 1.65; --t-body-size: 1rem; --t-body-leading: 1.65; --t-body-sm-size: 0.875rem; --t-body-sm-leading: 1.6; --t-label-size: 0.75rem; --t-label-leading: 1.4; --t-label-tracking: 0.2em; --t-label-weight: 600; --t-eyebrow-size: 0.75rem; --t-eyebrow-tracking: 0.2em; --t-mono-size: 0.8125rem; --t-mono-tracking: 0.02em; /* ----------------------------------------------------------------------- * SPACING & RADII * --------------------------------------------------------------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --radius-sm: 0.5rem; --radius-md: 0.75rem; --radius-lg: 1rem; --radius-xl: 1.5rem; --radius-2xl: 2rem; --radius-pill: 9999px; --radius: 0.75rem; /* ----------------------------------------------------------------------- * MOTION * --------------------------------------------------------------------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-inout: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 180ms; --dur-base: 300ms; --dur-slow: 500ms; --dur-lazy: 700ms; /* Layout */ --container-3xl: 48rem; --container-5xl: 64rem; --container-6xl: 72rem; --container-7xl: 80rem; } /* ========================================================================= SEMANTIC TYPE PRIMITIVES ========================================================================= */ .cb-hero { font-family: var(--font-jakarta); font-size: var(--t-hero-size); line-height: var(--t-hero-leading); letter-spacing: var(--t-hero-tracking); font-weight: var(--t-hero-weight); color: var(--fg-1); text-wrap: balance; } .cb-h1, .cb-section-title { font-family: var(--font-jakarta); font-size: var(--t-section-size); line-height: var(--t-section-leading); letter-spacing: var(--t-section-tracking); font-weight: var(--t-section-weight); color: var(--fg-1); text-wrap: balance; } .cb-h2 { font-family: var(--font-jakarta); font-size: clamp(1.5rem, 1.8vw + 0.5rem, 2rem); line-height: 1.2; letter-spacing: -0.01em; font-weight: 700; color: var(--fg-1); } .cb-h3, .cb-card-title { font-family: var(--font-jakarta); font-size: var(--t-card-size); line-height: var(--t-card-leading); letter-spacing: var(--t-card-tracking); font-weight: var(--t-card-weight); color: var(--fg-1); } .cb-body-lg, p.cb-lead { font-family: var(--font-serif); font-size: var(--t-body-lg-size); line-height: var(--t-body-lg-leading); font-weight: 300; color: var(--fg-2); text-wrap: pretty; } .cb-body { font-family: var(--font-serif); font-size: var(--t-body-size); line-height: var(--t-body-leading); color: var(--fg-3); } .cb-body-sm { font-family: var(--font-serif); font-size: var(--t-body-sm-size); line-height: var(--t-body-sm-leading); color: var(--fg-3); } /* Eyebrow / label — violet by default (the primary accent). */ .cb-eyebrow, .cb-label { font-family: var(--font-jakarta); font-size: var(--t-eyebrow-size); letter-spacing: var(--t-eyebrow-tracking); font-weight: 600; text-transform: uppercase; color: var(--c-violet); } .cb-eyebrow--amber { color: var(--c-amber-deep); } .cb-eyebrow--mono { font-family: var(--font-mono); letter-spacing: 0.4em; color: var(--fg-4); } .cb-mono { font-family: var(--font-mono); font-size: var(--t-mono-size); letter-spacing: var(--t-mono-tracking); } /* On-brand link + selection. */ ::selection { background: rgba(106,90,224,0.22); color: var(--fg-1); } a.cb-link { color: var(--c-violet); text-decoration: underline; text-underline-offset: 2px; transition: color var(--dur-fast) var(--ease-out); } a.cb-link:hover { color: var(--c-violet-deep); }