/* ---------- BioAI Lab — design system ---------- */ /* Forest green + cream, editorial-technical */ :root { /* Cream / paper — closer to white */ --cream-50: #fefdfa; --cream-100: #f8f5ee; --cream-200: #ece5d2; --cream-300: #ddd3b8; /* Forest greens — brightened */ --moss-50: #f0f5ed; --moss-100: #dde7d3; --moss-200: #b4c5a6; --moss-400: #7a9670; --moss-600: #4d7549; --moss-700: #3a5e37; --moss-800: #2a4828; --moss-900: #1c331c; /* Yellow accent — warm sunlit */ --sun-100: #fcefb8; --sun-200: #f7df7e; --sun-400: #e8c441; --sun-600: #c69a1f; /* Accents — same chroma family */ --ochre: #b8884a; /* warm earth */ --terracotta: #b65a3c; /* alert/highlight */ --sage: #8a9a7c; /* secondary */ /* Theme accent hues for the four research themes */ --theme-genomics: #4d7549; /* brighter moss */ --theme-genomics-soft: #d3e0c7; --theme-llm: #3a6e8f; /* steel blue */ --theme-llm-soft: #c8dae5; --theme-healthcare: #b65a3c; /* terracotta */ --theme-healthcare-soft: #e8c5b3; --theme-ethics: #c69a1f; /* sun/ochre */ --theme-ethics-soft: #f7e6a8; /* Functional */ --ink: #0e1d10; --ink-soft: #3a463a; --rule: #ddd3b8; --paper: #fefdfa; --paper-warm: #f5f1e6; --serif: 'Fraunces', 'Cormorant Garamond', Georgia, serif; --sans: 'Inter Tight', 'Inter', system-ui, sans-serif; --mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace; --max-w: 1280px; --pad-x: clamp(20px, 5vw, 64px); } /* ---- Font pairing presets (overridden via [data-fonts] on ) ---- */ /* Apple-style: SF-like geometric humanist sans for everything, tight tracking */ html[data-fonts="apple"] { --serif: -apple-system, 'SF Pro Display', 'Inter Tight', system-ui, sans-serif; --sans: -apple-system, 'SF Pro Text', 'Inter', system-ui, sans-serif; } html[data-fonts="apple"] h1, html[data-fonts="apple"] h2, html[data-fonts="apple"] h3 { font-weight: 600; letter-spacing: -0.035em; } html[data-fonts="apple"] .serif { letter-spacing: -0.035em; font-weight: 600; } /* Geist (Vercel-ish, very Apple-adjacent) */ html[data-fonts="geist"] { --serif: 'Geist', -apple-system, system-ui, sans-serif; --sans: 'Geist', -apple-system, system-ui, sans-serif; } html[data-fonts="geist"] h1, html[data-fonts="geist"] h2, html[data-fonts="geist"] h3 { font-weight: 600; letter-spacing: -0.035em; } html[data-fonts="geist"] .serif { letter-spacing: -0.035em; font-weight: 600; } /* Manrope — friendly geometric, rounded terminals */ html[data-fonts="manrope"] { --serif: 'Manrope', system-ui, sans-serif; --sans: 'Manrope', system-ui, sans-serif; } html[data-fonts="manrope"] h1, html[data-fonts="manrope"] h2, html[data-fonts="manrope"] h3 { font-weight: 700; letter-spacing: -0.03em; } html[data-fonts="manrope"] .serif { letter-spacing: -0.03em; font-weight: 700; } /* DM Sans — clean modern geometric */ html[data-fonts="dmsans"] { --serif: 'DM Sans', system-ui, sans-serif; --sans: 'DM Sans', system-ui, sans-serif; } html[data-fonts="dmsans"] h1, html[data-fonts="dmsans"] h2, html[data-fonts="dmsans"] h3 { font-weight: 600; letter-spacing: -0.04em; } html[data-fonts="dmsans"] .serif { letter-spacing: -0.04em; font-weight: 600; } /* Plus Jakarta — slightly warmer Apple-feel */ html[data-fonts="jakarta"] { --serif: 'Plus Jakarta Sans', system-ui, sans-serif; --sans: 'Plus Jakarta Sans', system-ui, sans-serif; } html[data-fonts="jakarta"] h1, html[data-fonts="jakarta"] h2, html[data-fonts="jakarta"] h3 { font-weight: 700; letter-spacing: -0.03em; } html[data-fonts="jakarta"] .serif { letter-spacing: -0.03em; font-weight: 700; } /* Editorial — Instrument Serif headings + Inter body (mixed elegant) */ html[data-fonts="editorial"] { --serif: 'Instrument Serif', 'Fraunces', Georgia, serif; --sans: 'Inter', system-ui, sans-serif; } html[data-fonts="editorial"] h1, html[data-fonts="editorial"] h2, html[data-fonts="editorial"] h3 { font-weight: 400; letter-spacing: -0.02em; } html[data-fonts="editorial"] .serif { font-weight: 400; letter-spacing: -0.02em; } * { box-sizing: border-box; } html, body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } button { font-family: inherit; cursor: pointer; } /* Editorial type */ .serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; } .mono { font-family: var(--mono); font-weight: 400; } .upper-mono { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ink-soft); } h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -0.02em; text-wrap: balance; } p { margin: 0 0 1em; text-wrap: pretty; } /* ---------- Site chrome ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(250, 250, 250, 0.88); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--rule); } .site-header__inner { max-width: var(--max-w); margin: 0 auto; padding: 14px var(--pad-x); display: flex; align-items: center; justify-content: space-between; gap: 24px; } .brand { display: flex; align-items: center; gap: 12px; font-family: var(--serif); font-size: 19px; letter-spacing: -0.01em; color: var(--moss-800); } .brand__mark { width: 32px; height: 32px; display: grid; place-items: center; background: var(--moss-700); color: var(--cream-100); border-radius: 4px; font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: 0; } .brand__name strong { font-weight: 500; } .brand__name em { font-style: normal; color: var(--moss-400); margin-left: 4px; } .nav { display: flex; gap: 28px; align-items: center; } .nav a { font-size: 14px; color: var(--ink-soft); padding: 6px 0; border-bottom: 1px solid transparent; transition: color .15s, border-color .15s; } .nav a:hover { color: var(--moss-700); } .nav a.active { color: var(--moss-800); border-bottom-color: var(--moss-700); } .nav a.nav__cta { font-size: 13px; padding: 8px 14px; background: var(--moss-800); color: var(--cream-50); border-radius: 999px; border: 1px solid var(--moss-800); transition: background .15s; white-space: nowrap; } .nav a.nav__cta:hover { background: var(--moss-700); color: var(--cream-50); } /* ---------- Footer ---------- */ .site-footer { margin-top: 100px; background: var(--moss-900); color: var(--cream-200); padding: 64px var(--pad-x) 32px; } .site-footer__inner { max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; } .site-footer h4 { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--sun-200); margin-bottom: 14px; font-weight: 500; } .site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; } .site-footer a { color: var(--cream-200); font-size: 14px; } .site-footer a:hover { color: var(--cream-50); } .site-footer__brand p { color: var(--moss-200); font-size: 13px; max-width: 320px; } .site-footer__brand .brand__name { color: var(--cream-50); } .site-footer__bottom { max-width: var(--max-w); margin: 48px auto 0; padding-top: 24px; border-top: 1px solid var(--moss-700); display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--moss-200); } /* ---------- Pills / tags ---------- */ .tag { display: inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; padding: 3px 9px; border: 1px solid var(--moss-200); background: var(--cream-50); color: var(--moss-700); border-radius: 4px; cursor: pointer; transition: background .12s, border-color .12s, color .12s; } .tag:hover { background: var(--moss-100); border-color: var(--moss-400); } .tag--active { background: var(--moss-800); color: var(--cream-50); border-color: var(--moss-800); } .tag--theme-genomics { border-color: var(--theme-genomics-soft); color: var(--theme-genomics); } .tag--theme-llm-agents { border-color: var(--theme-llm-soft); color: var(--theme-llm); } .tag--theme-healthcare { border-color: var(--theme-healthcare-soft); color: var(--theme-healthcare); } .tag--theme-ethics { border-color: var(--theme-ethics-soft); color: var(--theme-ethics); } .tag--keyword { background: transparent; cursor: default; pointer-events: none; } .tag--keyword:hover { background: transparent; border-color: var(--moss-300); } /* ---------- Section primitives ---------- */ .section { max-width: var(--max-w); margin: 0 auto; padding: 80px var(--pad-x); } .section--tight { padding: 56px var(--pad-x); } .section--full { max-width: none; background: var(--moss-900); color: var(--cream-100); padding: 96px var(--pad-x); } .section--paper-warm { background: var(--paper-warm); } .section-head { display: grid; grid-template-columns: 240px 1fr; gap: 48px; align-items: baseline; margin-bottom: 48px; padding-bottom: 24px; border-bottom: 1px solid var(--rule); } .section-head__num { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--moss-600); } .section-head__title { font-family: var(--serif); font-size: clamp(32px, 4vw, 52px); line-height: 1.05; } .section-head__sub { margin-top: 12px; font-family: var(--sans); font-size: 16px; color: var(--ink-soft); max-width: 60ch; } @media (max-width: 720px) { .section-head { grid-template-columns: 1fr; gap: 12px; } .nav { gap: 14px; } .nav a:not(.nav__cta) { display: none; } .site-footer__inner { grid-template-columns: 1fr 1fr; } } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; font-size: 14px; font-weight: 500; border: 1px solid transparent; transition: background .15s, border-color .15s, color .15s; cursor: pointer; } .btn--primary { background: var(--moss-800); color: var(--cream-50); border-color: var(--moss-800); } .btn--primary:hover { background: var(--moss-700); } .btn--ghost { background: transparent; color: var(--moss-800); border-color: var(--moss-300, var(--moss-200)); } .btn--ghost:hover { background: var(--cream-100); border-color: var(--moss-400); } .btn__arrow { display: inline-block; transition: transform .2s; } .btn:hover .btn__arrow { transform: translateX(3px); } /* ---------- Utility ---------- */ .divider-rule { height: 1px; background: var(--rule); margin: 48px 0; } .kbd { font-family: var(--mono); font-size: 11px; padding: 2px 6px; border: 1px solid var(--rule); border-radius: 3px; background: var(--cream-100); color: var(--ink-soft); } /* placeholder image — striped subtle */ .ph { background-color: var(--cream-200); background-image: repeating-linear-gradient( 135deg, var(--cream-200) 0, var(--cream-200) 11px, var(--cream-300) 11px, var(--cream-300) 12px ); display: grid; place-items: center; color: var(--ink-soft); font-family: var(--mono); font-size: 12px; letter-spacing: 0.02em; } .ph--moss { background-color: var(--moss-700); background-image: repeating-linear-gradient( 135deg, var(--moss-700) 0, var(--moss-700) 11px, var(--moss-800) 11px, var(--moss-800) 12px ); color: var(--moss-200); } /* ---------- DNA / network background motif ---------- */ .motif-grid { position: absolute; inset: 0; background-image: linear-gradient(var(--moss-100) 1px, transparent 1px), linear-gradient(90deg, var(--moss-100) 1px, transparent 1px); background-size: 40px 40px; opacity: 0.4; pointer-events: none; mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%); }