/* ===== Design tokens ===== */ :root { --teal: #44e0cc; --teal-bar: #44e0cc; /* fixed toolbar teal — immune to per-section --teal re-scoping */ --teal-deep: #063a34; --teal-bright: #2fb7a6; /* Futuristic AI theme: deep-obsidian base, teal as a luminous accent */ --ink: #121c24; --ink-2: #192630; --violet: #8b7cff; --paper: #192630; --paper-dim: #24343f; --on-teal: #06322d; --on-teal-deep: #eafcf7; --on-ink: #e6f6f3; --on-paper: #e6f6f3; /* Toolbar / menu — logo green accent with dark ink text */ --nav-bg: #7ac585; --nav-fg: #06322d; --font-display: "Space Grotesk", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; --maxw: 1600px; --pad-x: clamp(1.25rem, 5vw, 5rem); --section-y: clamp(4rem, 12vh, 9rem); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 68px; scrollbar-width: none; /* Firefox — immersive, full-screen feel */ } html::-webkit-scrollbar { display: none; /* Chrome / Safari */ } /* Lock page scroll while the full-screen menu overlay is open */ html.menu-open, html.menu-open body { overflow: hidden; } body { margin: 0; font-family: var(--font-body); color: var(--on-paper); background: var(--paper); -webkit-font-smoothing: antialiased; line-height: 1.5; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } /* Skip link: off-screen until focused */ .skip-link { position: fixed; top: 0; left: 0; z-index: 100; margin: 0.75rem; padding: 0.6rem 1rem; background: var(--teal-deep); color: var(--on-teal-deep); border-radius: 999px; font-family: var(--font-display); font-size: 0.9rem; transform: translateY(-150%); transition: transform 0.2s var(--ease-out); } .skip-link:focus { transform: translateY(0); outline: 2px solid var(--on-teal-deep); outline-offset: 2px; } /* ===== Layout primitives ===== */ .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-x); } .section { padding-block: var(--section-y); scroll-margin-top: 68px; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; } .section--teal { background: var(--teal); color: var(--on-teal); } .section--ink { background: var(--ink); color: var(--on-ink); } .section--paper { background: var(--paper); color: var(--on-paper); } .section--white { background: var(--surface); color: var(--on-paper); } .eyebrow { font-family: var(--font-mono); font-weight: 400; font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.75; margin: 0 0 1.5rem; } .display { font-family: var(--font-display); font-weight: 700; line-height: 1.02; letter-spacing: -0.02em; font-size: clamp(2.4rem, 7vw, 5.5rem); margin: 0; } .lead { font-size: clamp(1.1rem, 2vw, 1.5rem); max-width: 46ch; } /* Masked line-reveal wrapper for SplitText (lines get wrapped in this) */ .reveal-line { overflow: hidden; } /* ===== Reduced motion: everything visible, no transforms ===== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .anim-hidden { opacity: 1 !important; transform: none !important; } } /* ===== Nav (bar + full-screen overlay menu) ===== */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 60; background: var(--teal); transition: box-shadow 0.4s var(--ease-out); } /* Subtle shadow for separation once the bar sits over other sections */ .nav--scrolled { box-shadow: 0 1px 0 color-mix(in srgb, var(--nav-fg) 14%, transparent), 0 8px 24px color-mix(in srgb, var(--nav-fg) 10%, transparent); } /* Entrance: brand + toggle fade/slide in on load */ @keyframes navIn { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } } .nav__brand, .nav__toggle { animation: navIn 0.47s ease both; } .nav__brand { animation-delay: 0.1s; } .nav__toggle { animation-delay: 0.19s; } @media (prefers-reduced-motion: reduce) { .nav__brand, .nav__toggle { animation: none; } } .nav__inner { display: flex; align-items: center; justify-content: space-between; height: 68px; } .nav__brand { position: relative; z-index: 2; display: flex; align-items: center; gap: 0.6rem; } .nav__mark { height: 38px; width: auto; transition: filter 0.35s var(--ease-out); } /* Opaque teal bar: the mark reads the same over every section */ .nav--light .nav__mark { filter: none; } /* Wordmark matches the language button's typographic treatment: mono, uppercase, letter-spaced — a unified "lab label" toolbar. */ .nav__wordmark { font-family: var(--font-mono); font-weight: 500; font-size: clamp(0.82rem, 2.2vw, 0.95rem); letter-spacing: 0.08em; text-transform: uppercase; color: var(--nav-fg); transition: color 0.35s var(--ease-out); } /* Opaque teal bar: marks stay dark for contrast over every section */ .nav--light .nav__wordmark { color: var(--nav-fg); } .nav--light .nav__toggle-bar { background: var(--nav-fg); } /* While the dark menu overlay is open, lift the marks to light for contrast */ .nav.is-open .nav__wordmark { color: var(--on-ink); } .nav.is-open .nav__toggle-bar { background: var(--on-ink); } .nav.is-open .nav__lang-btn { color: var(--on-ink); border-color: color-mix(in srgb, var(--on-ink) 40%, transparent); } /* Toolbar actions group (language + menu) */ .nav__actions { position: relative; z-index: 2; display: flex; align-items: center; gap: clamp(0.6rem, 1.6vw, 1.1rem); } .nav__lang { position: relative; } .nav__lang-btn { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.08em; color: var(--nav-fg); background: none; border: 1px solid color-mix(in srgb, var(--nav-fg) 40%, transparent); border-radius: 999px; padding: 0.32rem 0.7rem; cursor: pointer; transition: color 0.35s var(--ease-out), border-color 0.35s var(--ease-out), background 0.2s var(--ease-out); } .nav__lang-btn:hover { background: color-mix(in srgb, var(--nav-fg) 8%, transparent); } .nav--light .nav__lang-btn { color: var(--nav-fg); border-color: color-mix(in srgb, var(--nav-fg) 40%, transparent); } .nav__lang-menu { position: absolute; top: calc(100% + 0.5rem); right: 0; list-style: none; margin: 0; padding: 0.4rem; min-width: 9.5rem; background: var(--teal-deep); border-radius: 12px; box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out), visibility 0.25s var(--ease-out); } .nav__lang.is-open .nav__lang-menu { opacity: 1; visibility: visible; transform: none; } .nav__lang-menu button { display: block; width: 100%; text-align: left; background: none; border: 0; color: var(--on-teal-deep); font-family: var(--font-body); font-size: 0.95rem; padding: 0.5rem 0.7rem; border-radius: 8px; cursor: pointer; } .nav__lang-menu button:hover { background: color-mix(in srgb, var(--on-teal-deep) 12%, transparent); } .nav__lang-menu button[aria-current="true"] { color: var(--teal); font-weight: 600; } /* Menu toggle (hamburger → ✕), always visible, above the overlay */ .nav__toggle { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; } .nav__toggle-bar { display: block; width: 24px; height: 2px; margin-inline: auto; background: var(--nav-fg); transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out), background-color 0.35s var(--ease-out), width 0.3s var(--ease-out); } /* Subtle hover: middle bar shortens (closed state only) */ .nav:not(.is-open) .nav__toggle:hover .nav__toggle-bar:nth-child(2) { width: 16px; } .nav.is-open .nav__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav.is-open .nav__toggle-bar:nth-child(2) { opacity: 0; } .nav.is-open .nav__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Full-screen overlay menu */ .nav__links { position: fixed; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: clamp(0.4rem, 2vh, 1.25rem); padding: 0 var(--pad-x); /* Dark glass overlay carrying the site's aurora, replacing the logo-green fill */ background: radial-gradient(60% 50% at 82% 8%, color-mix(in srgb, var(--teal) 16%, transparent), transparent 70%), radial-gradient(42% 42% at 8% 92%, color-mix(in srgb, var(--violet) 12%, transparent), transparent 70%), color-mix(in srgb, var(--ink) 94%, transparent); opacity: 0; visibility: hidden; transition: opacity 0.45s var(--ease-out), visibility 0.45s var(--ease-out); } .nav.is-open .nav__links { opacity: 1; visibility: visible; } .nav__links a { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem, 9vw, 5rem); line-height: 1.05; letter-spacing: -0.02em; color: var(--on-ink); opacity: 0; transform: translateY(28px); transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out), color 0.2s var(--ease-out); } .nav.is-open .nav__links a { opacity: 1; transform: translateY(0); } .nav.is-open .nav__links a:nth-child(1) { transition-delay: 0.08s; } .nav.is-open .nav__links a:nth-child(2) { transition-delay: 0.14s; } .nav.is-open .nav__links a:nth-child(3) { transition-delay: 0.2s; } .nav.is-open .nav__links a:nth-child(4) { transition-delay: 0.26s; } .nav__links a:hover, .nav__links a[aria-current="true"] { color: var(--teal); } /* CTA reads as a plain menu item inside the overlay */ .nav__cta { border: 0; border-radius: 0; padding: 0; } /* ===== Buttons ===== */ .btn { display: inline-block; font-family: var(--font-display); font-weight: 500; border-radius: 999px; padding: 0.8rem 1.8rem; transition: transform 0.2s var(--ease-out), background 0.2s var(--ease-out); } .btn:hover { transform: translateY(-2px); } .btn--light { background: var(--teal-deep); color: var(--on-teal-deep); } /* ===== Hero ===== */ /* Full-viewport layout (min-height / flex-center) inherited from .section */ .hero { position: relative; overflow: hidden; } .hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } .hero__inner { position: relative; z-index: 1; padding-top: 68px; } .hero__headline { margin: 0.5rem 0 1.5rem; max-width: 24ch; /* "AI Endocrine & Oncology …" wraps to two lines */ } .hero__mission { margin-bottom: 2.25rem; } .hero__scrollcue { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.7; margin-top: 3.5rem; } /* Microscopy-style distance scale bar (fixed bottom-right; fades out with the hero it measures, so it never intrudes on later sections) */ .hero__scale { position: fixed; right: clamp(1.25rem, 4vw, 3rem); bottom: clamp(1.25rem, 4vw, 2.5rem); z-index: 5; display: flex; flex-direction: column; align-items: flex-end; gap: 0.35rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; color: var(--on-teal); opacity: 0.72; pointer-events: none; } .hero__scale-label { line-height: 1; font-variant-numeric: tabular-nums; } /* U-shaped bar: end ticks up, line across the bottom */ .hero__scale-bar { height: 6px; width: 84px; border: 1.5px solid currentColor; border-top: 0; } /* ===== Mission ===== */ .mission__statement { font-size: clamp(1.6rem, 4vw, 3rem); font-weight: 500; line-height: 1.2; max-width: 30ch; } /* ===== Pipeline focus-area groups ===== */ .pipeline-group + .pipeline-group { margin-top: clamp(3.5rem, 9vh, 6rem); } .pipeline-group__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem, 6vw, 4.25rem); line-height: 0.98; letter-spacing: -0.03em; margin: 0 0 1rem; color: var(--teal-deep); } .pipeline-group__desc { font-size: clamp(1.05rem, 1.8vw, 1.35rem); line-height: 1.4; max-width: 44ch; margin: 0 0 2.25rem; color: var(--teal-deep); opacity: 0.72; } /* ===== Numbered index list (shared: Focus + Pipeline) ===== */ .index-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); } .index-item { display: grid; grid-template-columns: 4rem 1fr auto; gap: clamp(1rem, 4vw, 3rem); align-items: start; padding-block: clamp(1.75rem, 4vw, 2.75rem); border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent); } .index-num { font-family: var(--font-mono); font-size: 0.95rem; opacity: 0.6; padding-top: 0.4rem; } .index-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 3.5vw, 2.75rem); margin: 0 0 0.5rem; letter-spacing: -0.01em; } .index-desc { margin: 0; max-width: 52ch; opacity: 0.85; } /* ===== Pipeline status tag ===== */ .status-tag { display: inline-block; margin-top: 1rem; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; padding: 0.35rem 0.8rem; border-radius: 999px; background: color-mix(in srgb, var(--teal-deep) 12%, transparent); border: 1px solid color-mix(in srgb, var(--teal-deep) 45%, transparent); color: var(--on-teal); } /* ===== Contact ===== */ /* Hairline separates the two adjacent light sections (white pipeline → cream) */ .contact { border-top: 1px solid color-mix(in srgb, var(--on-paper) 12%, transparent); } .contact__title { font-size: clamp(2rem, 5vw, 3.5rem); max-width: 16ch; margin: 0 0 2.5rem; } .contact__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; font-size: 1.1rem; } .contact__list li { display: grid; grid-template-columns: 6rem 1fr; gap: 1.5rem; padding-block: 1rem; border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); } .contact__label { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.6; padding-top: 0.15rem; } .contact__list a:hover { color: var(--teal-deep); } /* ===== Footer ===== */ .site-footer { background: var(--ink); color: var(--on-ink); padding-block: 3rem; } .site-footer__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2.5rem; justify-content: space-between; } .site-footer__brand { display: flex; align-items: center; gap: 0.55rem; } .site-footer__mark { height: 30px; width: auto; } .site-footer__wordmark { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; } .site-footer__links { display: flex; gap: 1.5rem; opacity: 0.85; font-size: 0.95rem; } .site-footer__copy { width: 100%; margin: 0; opacity: 0.55; font-size: 0.85rem; } /* Elements animated in by GSAP start hidden (JS-enabled, motion-OK only). */ .js-anim .anim-hidden { opacity: 0; } /* Split-text parts (titles per char, body per word) */ .split-char, .split-word { display: inline-block; will-change: transform; } .split-line { display: block; } /* ===== Pipeline program detail (expandable) ===== */ .program { margin-top: 1.5rem; } .program__summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; } .program__summary::-webkit-details-marker { display: none; } .program__summary::after { content: "+"; font-family: var(--font-display); font-size: 1.15rem; line-height: 1; } .program[open] .program__summary::after { content: "–"; } .program__summary:hover { opacity: 1; } .program__content { padding-top: 1.5rem; } .program__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.2rem, 2.2vw, 1.7rem); line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 0.5rem; } .program__lead { font-size: 1.05rem; opacity: 0.85; margin: 0 0 1.5rem; } .program__h3 { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.7; margin: 0 0 1rem; } .program__content p { margin: 0 0 1rem; font-size: 1rem; line-height: 1.6; } /* Open program rows animate to a lighter highlight panel */ .pipeline .index-item { padding-inline: clamp(1rem, 2vw, 1.75rem); margin-inline: calc(-1 * clamp(1rem, 2vw, 1.75rem)); border-radius: 16px; transition: background-color 0.45s var(--ease-out); } .pipeline .index-item:has(.program[open]) { background-color: color-mix(in srgb, var(--teal) 14%, var(--surface)); } /* ===== Inline icons (currentColor mask — adapt to each section) ===== */ [data-i18n="mission.eyebrow"]::before, [data-i18n="sci.eyebrow"]::before, [data-i18n="part.eyebrow"]::before, [data-i18n="pipeline.eyebrow"]::before, [data-i18n="contact.eyebrow"]::before, [data-i18n="team.eyebrow"]::before, .team__advisors-title::before, #hero .eyebrow::before, .program__summary::before, .contact__label::before, .status-tag::before, .nav__lang-btn::before { content: ""; display: inline-block; width: 1em; height: 1em; margin-right: 0.5em; vertical-align: -0.14em; background-color: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; } /* Larger titles carry a proportionally smaller leading icon */ .pipeline-group__title::before, .index-title::before { content: ""; display: inline-block; width: 0.62em; height: 0.62em; margin-right: 0.35em; vertical-align: 0.02em; background-color: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; } /* The summary is an inline-flex row; its gap handles icon spacing */ .program__summary::before { margin-right: 0; } .hero__scrollcue::after { content: ""; display: inline-block; width: 1em; height: 1em; margin-left: 0.4em; vertical-align: -0.2em; background-color: currentColor; -webkit-mask: var(--ic-chevron) center / contain no-repeat; mask: var(--ic-chevron) center / contain no-repeat; } /* icon definitions (Feather-style line icons) */ [data-i18n="mission.eyebrow"] { --ic: url("data:image/svg+xml,"); } [data-i18n="pipeline.eyebrow"] { --ic: url("data:image/svg+xml,"); } [data-i18n="contact.eyebrow"] { --ic: url("data:image/svg+xml,"); } [data-i18n="label.phone"] { --ic: url("data:image/svg+xml,"); } [data-i18n="label.email"] { --ic: url("data:image/svg+xml,"); } [data-i18n="label.address"] { --ic: url("data:image/svg+xml,"); } [data-i18n="tag.phase1"] { --ic: url("data:image/svg+xml,"); } [data-i18n="tag.ind"] { --ic: url("data:image/svg+xml,"); } [data-i18n="tag.dev"] { --ic: url("data:image/svg+xml,"); } .nav__lang-btn { --ic: url("data:image/svg+xml,"); } [data-i18n="grp.all"] { --ic: url("data:image/svg+xml,"); } .hero__scrollcue { --ic-chevron: url("data:image/svg+xml,"); } /* Hero kicker — hexagon (molecule / chemistry) */ #hero .eyebrow { --ic: url("data:image/svg+xml,"); } /* Drug-program titles — a diagonal capsule (pill) */ .index-title { --ic: url("data:image/svg+xml,"); } /* Program-overview toggle — list ("overview") icon */ .program__summary { --ic: url("data:image/svg+xml,"); } /* ===== Responsive polish ===== */ @media (max-width: 640px) { .index-item { grid-template-columns: 2.5rem 1fr; gap: 1rem; } .contact__list li { grid-template-columns: 1fr; gap: 0.25rem; } } /* ===== Per-drug pipeline visualizations ===== */ .pipeline .index-item { position: relative; } .index-num { grid-column: 1; } .index-body { grid-column: 2; } .index-viz { grid-column: 3; grid-row: 1; align-self: start; width: clamp(56px, 8vw, 88px); aspect-ratio: 1 / 1; color: inherit; margin-top: 0.25rem; } .index-viz svg, .program__viz svg { width: 100%; height: 100%; display: block; overflow: visible; } .program__viz { margin: 0 0 1.75rem; width: 100%; color: inherit; border-radius: 12px; background: color-mix(in srgb, var(--teal) 8%, var(--surface)); } .program__viz-cap { margin-top: 0.6rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; } /* SVG palette — theme-adaptive line-art (dark base + teal accents) */ .viz-base { stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .viz-teal { stroke: var(--teal-bright); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .viz-deep { stroke: var(--teal-deep); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .viz-bright { stroke: var(--teal); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .viz-fill-teal { fill: var(--teal-bright); stroke: none; } .viz-label { fill: currentColor; stroke: none; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.12em; text-anchor: middle; opacity: 0.7; } .draw { stroke-dasharray: 1; } /* Emblem loops idle while the pipeline is off-screen */ #pipeline.viz-paused .index-viz * { animation-play-state: paused !important; } @media (prefers-reduced-motion: no-preference) { .index-viz [class*="emb-"] { transform-box: fill-box; transform-origin: center; } .emb-cr-dot { animation: embRide 3.2s ease-in-out infinite alternate; } .emb-k-cursor { animation: embSweep 4s linear infinite; } .emb-x-sel { animation: embSel 1.8s ease-in-out infinite; } } @keyframes embRide { from { transform: translate(-22px, 22px); } to { transform: translate(22px, -22px); } } @keyframes embSweep { from { transform: translateX(0); } to { transform: translateX(60px); } } @keyframes embSel { 0%, 100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.5); opacity: 0.4; } } /* Mobile: emblem floats top-right, out of the 2-column grid (last = wins) */ @media (max-width: 640px) { .index-viz { position: absolute; top: clamp(1.25rem, 4vw, 2rem); right: clamp(1rem, 2vw, 1.75rem); width: 44px; margin-top: 0; grid-column: auto; } .index-body { padding-right: 52px; } } /* ===== Team ===== */ .team__title { font-size: clamp(2rem, 5vw, 3.5rem); max-width: 18ch; margin: 0 0 clamp(2rem, 5vh, 3.5rem); } .team__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); } /* Compact horizontal card: a small 4:5 headshot beside the copy */ .member { display: grid; grid-template-columns: 120px 1fr; column-gap: 1.25rem; align-items: start; } /* Box-shadow ring follows the radius in every browser */ .member__photo { grid-row: span 3; width: 120px; height: auto; /* override the attribute so aspect-ratio governs */ aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; /* transparent cutouts sit on a light backdrop: white center, pale mint edge */ background: radial-gradient(75% 60% at 50% 35%, var(--surface), color-mix(in srgb, var(--teal) 14%, var(--surface)) 72%), color-mix(in srgb, var(--teal) 14%, var(--surface)); box-shadow: none; margin-bottom: 0; } @media (max-width: 640px) { .member { grid-template-columns: 96px 1fr; column-gap: 1rem; } .member__photo { width: 96px; } } .member__name { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.01em; margin: 0 0 0.25rem; } .member__role { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); margin: 0 0 0.75rem; } .member__bio { margin: 0; font-size: 0.95rem; line-height: 1.6; opacity: 0.85; } .team__advisors { margin-top: clamp(2.5rem, 6vh, 4rem); padding-top: 1.75rem; border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); } .team__advisors-title { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.75; margin: 0 0 1rem; /* briefcase icon */ --ic: url("data:image/svg+xml,"); } .team__advisor-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; font-size: 0.98rem; } .team__advisor-list li { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; align-items: baseline; } .advisor__name { font-family: var(--font-display); font-weight: 700; } .advisor__blurb { opacity: 0.8; } /* ===== Futuristic AI theme — overrides (placed after the rules they replace) ===== */ /* Deep-space base with a faint technical grid; every section carries its own aurora */ .section { position: relative; isolation: isolate; background-image: linear-gradient(color-mix(in srgb, var(--teal) 5%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--teal) 5%, transparent) 1px, transparent 1px); background-size: 56px 56px; } .section::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: none; } /* Hero: dark aurora instead of flat teal, with the network glowing on top */ .section--teal { background-color: var(--ink); color: var(--on-ink); } .hero__headline { } .eyebrow { color: var(--teal); opacity: 0.9; } .hero__scale { color: var(--teal); } /* Same teal as the toolbar (the hero re-scopes --teal to a deeper shade) */ .btn--light { background: var(--teal-bar); color: var(--on-teal); box-shadow: none; } .btn--light:hover { box-shadow: none; } /* Formerly-light sections become lifted dark glass */ .section--white { background-color: var(--ink-2); color: var(--on-ink); } /* Pipeline: glass cards with luminous hairlines */ .pipeline-group__title { color: var(--teal); } .pipeline-group__desc { color: var(--on-ink); opacity: 0.72; } .index-list { border-top: 0; } .pipeline .index-item { background: var(--surface-dark); border: 1px solid color-mix(in srgb, var(--teal) 16%, transparent); transition: background-color 0.45s var(--ease-out), border-color 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out); } .pipeline .index-item + .index-item { margin-top: 0.75rem; } .pipeline .index-item:has(.program[open]) { background-color: color-mix(in srgb, var(--teal) 7%, transparent); border-color: color-mix(in srgb, var(--teal) 38%, transparent); box-shadow: none; } .index-num { color: var(--teal); opacity: 0.85; } .status-tag { background: color-mix(in srgb, var(--teal) 10%, transparent); border-color: color-mix(in srgb, var(--teal) 45%, transparent); color: var(--teal); box-shadow: none; } .program__viz { background: color-mix(in srgb, var(--teal) 6%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--teal) 22%, transparent); } .viz-deep { stroke: var(--teal-bright); /* dark teal vanishes on obsidian */ } /* Team: glass member cards with glowing photo rings */ .member { padding: 1rem; border-radius: 16px; background: var(--surface-dark); border: 1px solid color-mix(in srgb, var(--teal) 14%, transparent); } .member__photo { box-shadow: none; } .team__advisors { border-top-color: color-mix(in srgb, var(--teal) 20%, transparent); } /* Contact + footer hairlines glow teal */ .contact { border-top-color: color-mix(in srgb, var(--teal) 20%, transparent); } .contact__list li { border-top-color: color-mix(in srgb, var(--teal) 18%, transparent); } .contact__label { color: var(--teal); opacity: 0.85; } .contact__list a:hover { color: var(--teal); } .site-footer { border-top: 1px solid color-mix(in srgb, var(--teal) 16%, transparent); } /* Trial-registration links under a status tag */ .index-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 0.85rem 0 0; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; } .index-links__label { opacity: 0.6; } .index-links a { color: var(--teal); border-bottom: 1px solid color-mix(in srgb, var(--teal) 40%, transparent); transition: border-color 0.2s var(--ease-out); } .index-links a:hover { border-bottom-color: var(--teal); } /* "Currently Enrolling" tag — user-plus icon */ [data-i18n="tag.enrolling"] { --ic: url("data:image/svg+xml,"); } /* Team section kicker — users icon */ [data-i18n="team.eyebrow"] { --ic: url("data:image/svg+xml,"); } /* ===== Light surfaces: content sections on near-white ===== The hero (3D network on light fog), science, partnership, pipeline and team sit on white; the mission section, the menu overlay, contact and the footer stay dark. Inside light sections --teal is re-scoped to a deeper teal so accents keep contrast. */ :root { --paper: #f4f9f9; --paper-dim: #e6efef; --on-paper: #121c24; --teal-ink: #0f8577; } #hero, #team, .section--white, .section--paper { --teal: var(--teal-ink); --on-ink: var(--on-paper); color: var(--on-paper); } #hero, #team { background-color: var(--paper); } #hero .hero__headline { } /* Mission on the dark slate: light text, luminous teal accents */ #mission { background-color: var(--ink); color: var(--on-ink); } .section--white { background-color: var(--surface); } .section--paper { background-color: var(--paper-dim); } .section--white .pipeline-group__title { } /* Glass cards become paper cards: solid white, soft lift */ .pipeline .index-item, .member { background: var(--surface); border-color: color-mix(in srgb, var(--teal) 22%, transparent); box-shadow: var(--shadow-card); } .pipeline .index-item:has(.program[open]) { background-color: var(--surface); border-color: color-mix(in srgb, var(--teal) 45%, transparent); box-shadow: var(--shadow-card); } .member__photo { box-shadow: none; } /* ===== "Currently Enrolling" — muted ochre badge with a slow glow breath ===== */ .status-tag--live { --live: var(--copper-ink); /* burnt ochre: warm but low-saturation, reads on white */ position: relative; background: color-mix(in srgb, var(--live) 12%, transparent); border-color: color-mix(in srgb, var(--live) 55%, transparent); color: color-mix(in srgb, var(--live) 85%, #2b1a00); font-weight: 500; box-shadow: none; animation: livePulse 3.2s ease-in-out infinite; } @keyframes livePulse { 0%, 100% { box-shadow: none; border-color: color-mix(in srgb, var(--live) 55%, transparent); } 50% { box-shadow: none; border-color: color-mix(in srgb, var(--live) 80%, transparent); } } @media (prefers-reduced-motion: reduce) { .status-tag--live { animation: none; } } /* ===== Compact pipeline subsections: tighter vertical rhythm ===== */ .index-item { padding-block: clamp(1.1rem, 2.5vw, 1.6rem); } .pipeline .index-item + .index-item { margin-top: 0.5rem; } .index-title { margin-bottom: 0.3rem; } .status-tag { margin-top: 0.6rem; } .index-links { margin-top: 0.5rem; } .program { margin-top: 0.9rem; } .program__content { padding-top: 0.9rem; } .program__title { margin-bottom: 0.35rem; } .program__lead { margin-bottom: 1rem; } .program__h3 { margin-bottom: 0.6rem; } .program__content p { margin-bottom: 0.7rem; } .program__viz { margin-bottom: 1.1rem; } /* ===== Pipeline item header: title and subtitle share a line ===== Baseline-aligned flex row; the subtitle wraps under the title only when the row is too narrow to hold both. */ .index-head { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 1rem; row-gap: 0.15rem; margin-bottom: 0.3rem; } .index-head .index-title { margin: 0; } .index-head .index-desc { margin: 0; flex: 1 1 18ch; min-width: 0; } /* ===== Menu: spacing, hierarchy and the drug sub-choices ===== */ .nav__links { padding-top: 68px; /* centre the list in the space below the toolbar */ gap: clamp(0.35rem, 1.6vh, 1rem); overflow-y: auto; /* short viewports can scroll the overlay */ -webkit-overflow-scrolling: touch; } .nav__links a { font-size: clamp(2rem, 7vw, 4.2rem); line-height: 1.1; } /* Sub-choices: small mono labels nested under "Drug Pipeline" (selector carries .nav__links so it outranks the generic link rule) */ .nav__links .nav__sublink { font-family: var(--font-mono); font-weight: 500; font-size: clamp(0.95rem, 2.8vw, 1.3rem); line-height: 1.3; letter-spacing: 0.12em; text-transform: uppercase; padding-left: clamp(1.25rem, 4vw, 2.75rem); margin-top: calc(-1 * clamp(0.1rem, 0.8vh, 0.45rem)); opacity: 0.8; } .nav__links .nav__sublink + .nav__sublink { margin-top: calc(-1 * clamp(0.15rem, 1vh, 0.55rem)); } .nav__links .nav__sublink:hover, .nav__links .nav__sublink[aria-current="true"] { opacity: 1; } /* breathing room after the sub-group before the next top-level link */ .nav__links .nav__sublink + a:not(.nav__sublink) { margin-top: clamp(0.2rem, 1.2vh, 0.6rem); } /* Extra menu children: continue the staggered entrance */ .nav.is-open .nav__links a:nth-child(5) { transition-delay: 0.32s; } .nav.is-open .nav__links a:nth-child(6) { transition-delay: 0.38s; } .nav.is-open .nav__links a:nth-child(7) { transition-delay: 0.44s; } /* Anchored drug items clear the fixed toolbar */ .index-item { scroll-margin-top: 84px; } /* ===== Contact: dark ink surface with an interactive globe ===== */ #contact { background-color: var(--ink); color: var(--on-ink); --teal: #44e0cc; /* luminous teal again on the dark surface */ --on-ink: #e6f6f3; } .contact__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; } .contact__globe-wrap { min-width: 0; } .contact__globe { position: relative; width: min(100%, 560px); aspect-ratio: 1 / 1; margin-inline: auto; border-radius: 50%; /* soft halo behind the globe */ background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--teal) 10%, transparent), transparent 72%); cursor: grab; touch-action: pan-y; /* vertical page scroll still works; horizontal drag spins */ } .contact__globe:active { cursor: grabbing; } .contact__globe canvas { display: block; width: 100%; height: 100%; } .contact__globe-cap { margin: 1rem auto 0; max-width: 560px; text-align: center; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; } @media (max-width: 900px) { .contact__grid { grid-template-columns: 1fr; } .contact__globe { width: min(100%, 420px); } } /* ===== Mission: the science of macropinocytosis ===== */ .science { display: grid; gap: clamp(2.5rem, 6vh, 4rem); } .science__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; } .science__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 3.2vw, 2.5rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--teal); margin: 0 0 1rem; } .science__intro p { margin: 0 0 1rem; font-size: clamp(1rem, 1.3vw, 1.1rem); line-height: 1.6; max-width: 58ch; } .science__h { font-family: var(--font-mono); font-weight: 500; font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal); margin: 0 0 0.9rem; } .science__blurb { margin: 0 0 1.5rem; max-width: 70ch; line-height: 1.6; opacity: 0.85; } /* Video card */ .science__video { margin: 0; border-radius: 16px; overflow: hidden; background: var(--surface); border: 1px solid color-mix(in srgb, var(--teal) 22%, transparent); box-shadow: var(--shadow-card); } .science__video video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--ink); } .science__video figcaption { padding: 0.75rem 1rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; } /* Numbered panels, laid out like the source figure: two columns, a numbered tab header, a definition line, the illustration, and a boxed takeaway */ .panels { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .panel { display: flex; flex-direction: column; border-radius: 14px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--teal) 24%, transparent); box-shadow: var(--shadow-card); overflow: hidden; } .panel--wide { grid-column: 1 / -1; } .panel__tab { display: flex; align-items: center; gap: 0.6rem; padding: 0.65rem 0.9rem; background: color-mix(in srgb, var(--teal) 8%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--teal) 22%, transparent); } .panel__n { flex: none; width: 1.4rem; height: 1.4rem; display: grid; place-items: center; border-radius: 5px; background: var(--teal); color: var(--paper); font-family: var(--font-mono); font-weight: 500; font-size: 0.78rem; } .panel__tab h5 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; letter-spacing: -0.01em; } .panel__def { margin: 0; padding: 0.6rem 0.9rem 0; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.02em; line-height: 1.5; opacity: 0.8; } .panel__fig { padding: 0.4rem 0.9rem 0.2rem; flex: 1; } .panel__fig > svg { display: block; width: 100%; height: auto; } .panel svg { color: var(--teal); fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .panel svg text { font-size: 6.4px; letter-spacing: 0.02em; } .panel__note { margin: 0.4rem 0.9rem 0.9rem; padding: 0.55rem 0.75rem; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--teal) 28%, transparent); background: color-mix(in srgb, var(--teal) 4%, transparent); font-size: 0.84rem; line-height: 1.5; } /* Panel 8: gallery of shape cartoons */ .shapes { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 0.5rem 0.6rem; padding-bottom: 0.6rem; } .shape { margin: 0; text-align: center; } .shape svg { width: 56px; height: 56px; margin: 0 auto; display: block; } .shape figcaption { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.3; opacity: 0.75; } /* Panel 9: the table sits flush inside its panel */ .table-wrap--flush { border: 0; border-radius: 0; box-shadow: none; } @media (max-width: 720px) { .panels { grid-template-columns: 1fr; } } /* Shared shape fills: teal for solid, violet for concave, warm for rings/networks */ .ro-fill { fill: color-mix(in srgb, var(--teal) 16%, transparent); } .ro-alt { stroke: var(--violet); fill: color-mix(in srgb, var(--violet) 18%, transparent); } .ro-warm { stroke: var(--copper-ink); fill: color-mix(in srgb, var(--copper-ink) 14%, transparent); } svg text { fill: currentColor; stroke: none; font-family: var(--font-mono); opacity: 0.7; } /* Interpretation table */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--teal) 22%, transparent); background: var(--surface); box-shadow: var(--shadow-card); } .shape-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 0.9rem; } .shape-table thead th { font-family: var(--font-mono); font-weight: 500; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal); text-align: left; padding: 0.85rem 0.9rem; border-bottom: 1px solid color-mix(in srgb, var(--teal) 30%, transparent); background: color-mix(in srgb, var(--teal) 6%, transparent); } .shape-table td, .shape-table tbody th { padding: 0.75rem 0.9rem; text-align: left; vertical-align: middle; border-top: 1px solid color-mix(in srgb, var(--teal) 14%, transparent); } .shape-table tbody tr:first-child td, .shape-table tbody tr:first-child th { border-top: 0; } .shape-table tbody th { font-family: var(--font-display); font-weight: 700; white-space: nowrap; } .shape-table tbody th svg { width: 30px; height: 30px; vertical-align: middle; margin-right: 0.6rem; color: var(--teal); fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .shape-table td { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.02em; opacity: 0.9; } .shape-table td:nth-child(2) { font-family: var(--font-body); font-size: 0.9rem; } @media (max-width: 900px) { .science__top { grid-template-columns: 1fr; } } /* ===== Partnership: Designed with XtalPi ===== */ [data-i18n="part.eyebrow"] { --ic: url("data:image/svg+xml,"); } .partnership__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 1rem; } .partnership__lead { max-width: 62ch; font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.55; margin: 0 0 clamp(2rem, 5vh, 3.5rem); } /* Partner marks: text badges (swap for logo files once approved) */ .xtalpi-mark, .kong-mark { display: inline-block; font-family: var(--font-mono); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.22rem 0.55rem; border-radius: 6px; vertical-align: middle; } .xtalpi-mark { color: var(--paper); background: var(--violet); } .kong-mark { color: var(--paper); background: var(--teal); } .xtalpi-mark--lg { font-size: 0.5em; letter-spacing: 0.14em; padding: 0.25em 0.6em; border-radius: 0.3em; vertical-align: 0.35em; } /* DMTA loop: XtalPi cards | ring | Kong's cards */ .dmta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 420px) minmax(0, 1fr); gap: clamp(1rem, 3vw, 2.5rem); align-items: center; } .dmta__side { display: grid; gap: 0.9rem; } .dmta__who { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.85; } .dmta__card { padding: 1rem 1.1rem 1.1rem; border-radius: 14px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--teal) 22%, transparent); box-shadow: var(--shadow-card); } .dmta__side--xtalpi .dmta__card { border-color: color-mix(in srgb, var(--violet) 35%, transparent); } .dmta__step { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; color: var(--teal); } .dmta__side--xtalpi .dmta__step { color: var(--violet); } .dmta__card h4 { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; margin: 0.2rem 0 0.35rem; } .dmta__card p { margin: 0; font-size: 0.92rem; line-height: 1.55; opacity: 0.85; } .dmta__ring { width: 100%; height: auto; display: block; } .dmta__track { fill: none; stroke: color-mix(in srgb, var(--ink) 10%, transparent); stroke-width: 2; stroke-dasharray: 3 6; } .dmta__arc { fill: none; stroke-width: 3; stroke-linecap: round; } .dmta__arc--xtalpi { color: var(--violet); stroke: var(--violet); } .dmta__arc--kong { color: var(--teal); stroke: var(--teal); } .dmta__node circle { fill: var(--surface); stroke-width: 3; } .dmta__node--xtalpi circle { stroke: var(--violet); } .dmta__node--kong circle { stroke: var(--teal); } .dmta__node text { font-family: var(--font-display); font-weight: 700; font-size: 15px; text-anchor: middle; fill: var(--ink); } .dmta__centre { font-family: var(--font-mono); font-size: 22px; letter-spacing: 0.2em; text-anchor: middle; fill: var(--teal); } .dmta__centre--sub { font-size: 11px; letter-spacing: 0.3em; fill: var(--ink); opacity: 0.6; } .dmta__runner { fill: var(--surface); stroke: var(--teal); stroke-width: 3; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--teal) 70%, transparent)); } /* Speed comparison */ .speed { margin-top: clamp(2.5rem, 6vh, 4rem); } .speed__row { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 0.3rem 1rem; align-items: center; margin-bottom: 1rem; } .speed__label { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.8; } .speed__bar { height: 14px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 8%, transparent); overflow: hidden; } .speed__bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: color-mix(in srgb, var(--ink) 35%, transparent); transition: width 1.6s cubic-bezier(0.22, 1, 0.36, 1); } .speed__row--ai .speed__bar i { background: linear-gradient(90deg, var(--violet), var(--teal)); } .speed.is-in .speed__bar i { width: var(--w); } .speed__val { grid-column: 2; font-size: 0.88rem; opacity: 0.85; } .speed__src { margin: 0.5rem 0 0; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em; opacity: 0.6; max-width: 70ch; } /* Toxicity-first cards */ .tox { margin-top: clamp(2.5rem, 6vh, 4rem); } .tox__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; } .tox__card { padding: 1.1rem 1.2rem 1.2rem; border-radius: 14px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--teal) 22%, transparent); box-shadow: var(--shadow-card); } .tox__n { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--teal); color: var(--paper); font-family: var(--font-mono); font-size: 0.78rem; } .tox__card h5 { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; margin: 0.6rem 0 0.35rem; } .tox__card p { margin: 0; font-size: 0.9rem; line-height: 1.55; opacity: 0.85; } /* XTL-152 card: platform line + milestone track */ .index-platform { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.7rem 0 0; font-size: 0.88rem; opacity: 0.9; } .milestones { list-style: none; margin: 0.8rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem 0; counter-reset: ms; } .milestones li { position: relative; flex: 1 1 6rem; padding: 0.9rem 0.4rem 0 0; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.55; } .milestones li::before { /* track segment */ content: ""; position: absolute; top: 5px; left: 0; right: 0; height: 2px; background: color-mix(in srgb, var(--ink) 14%, transparent); } .milestones li::after { /* node */ content: ""; position: absolute; top: 0; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2px solid color-mix(in srgb, var(--ink) 30%, transparent); box-sizing: border-box; } .milestones li.is-done { opacity: 0.85; } .milestones li.is-done::before { background: var(--teal); } .milestones li.is-done::after { background: var(--teal); border-color: var(--teal); } .milestones li.is-now { opacity: 1; color: var(--teal); font-weight: 500; } .milestones li.is-now::after { border-color: var(--teal); box-shadow: none; } /* Nine menu children now */ .nav.is-open .nav__links a:nth-child(9) { transition-delay: 0.56s; } @media (max-width: 900px) { .dmta { grid-template-columns: 1fr; } .dmta__ring { max-width: 360px; margin-inline: auto; order: -1; } .speed__row { grid-template-columns: 1fr; } .speed__val { grid-column: 1; } } /* Drug sub-choices carry their one-line subheader */ .nav__links .nav__sublink { /* dash | code | description — a long description wraps inside its own column instead of dropping under the code */ display: grid; grid-template-columns: auto max-content minmax(0, 1fr); align-items: baseline; column-gap: 0.6rem; max-width: 40rem; } .nav__subcode { white-space: nowrap; } .nav__subdesc { font-family: var(--font-body); font-weight: 400; font-size: 0.86em; letter-spacing: 0; text-transform: none; opacity: 0.7; line-height: 1.35; } /* ===== Menu icons + motion ===== */ /* Every menu item gets a mask icon (currentColor) keyed to its link */ .nav__links a { --ic: none; position: relative; display: flex; align-items: center; gap: 0.45em; transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out), color 0.2s var(--ease-out); } .nav__links a::before { content: ""; flex: none; width: 0.72em; height: 0.72em; background-color: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; opacity: 0.85; transform: scale(0.4) rotate(-25deg); transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s var(--ease-out), filter 0.3s var(--ease-out); transition-delay: inherit; } .nav.is-open .nav__links a::before { transform: none; } /* hover: item eases right, icon perks up and glows */ .nav__links a:hover { transform: translateX(0.35em); } .nav__links a:hover::before { opacity: 1; transform: rotate(-10deg) scale(1.18); filter: drop-shadow(0 0 8px color-mix(in srgb, var(--teal) 70%, transparent)); } /* the section currently on screen: icon breathes softly */ .nav__links a[aria-current="true"]::before { opacity: 1; animation: menuIconBreathe 2.4s ease-in-out infinite; } @keyframes menuIconBreathe { 0%, 100% { filter: drop-shadow(0 0 0 transparent); transform: scale(1); } 50% { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--teal) 75%, transparent)); transform: scale(1.08); } } /* icons */ .nav__links [data-i18n="nav.mission"] { --ic: url("data:image/svg+xml,"); } .nav__links [data-i18n="nav.science"] { --ic: url("data:image/svg+xml,"); } .nav__links [data-i18n="nav.partnership"] { --ic: url("data:image/svg+xml,"); } .nav__links [data-i18n="nav.pipeline"] { --ic: url("data:image/svg+xml,"); } .nav__links [data-i18n="nav.team"] { --ic: url("data:image/svg+xml,"); } .nav__links [data-i18n="nav.contact"] { --ic: url("data:image/svg+xml,"); } /* drugs: a capsule, sized to the small mono row */ .nav__links .nav__sublink { --ic: url("data:image/svg+xml,"); } .nav__links .nav__sublink::before { width: 1.05em; height: 1.05em; align-self: center; } .nav__links .nav__sublink:hover::before { transform: rotate(35deg) scale(1.15); /* the capsule tips over */ } @media (prefers-reduced-motion: reduce) { .nav__links a::before, .nav.is-open .nav__links a::before { transform: none; transition: none; animation: none; } .nav__links a:hover { transform: none; } } /* ===== Graph-paper backgrounds + decorative plots ===== */ /* Fine minor grid (16px) under a bolder major grid (80px), tinted with the section's own --teal so it reads on both light and dark surfaces */ .section { /* three tiers: 8px fine → 40px mid → 80px major (each a multiple of the last) */ --grid-fine: color-mix(in srgb, var(--teal) 3.5%, transparent); --grid-minor: color-mix(in srgb, var(--teal) 7%, transparent); --grid-major: color-mix(in srgb, var(--teal) 13%, transparent); background-image: linear-gradient(var(--grid-major) 1px, transparent 1px), linear-gradient(90deg, var(--grid-major) 1px, transparent 1px), linear-gradient(var(--grid-minor) 1px, transparent 1px), linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px), linear-gradient(var(--grid-fine) 1px, transparent 1px), linear-gradient(90deg, var(--grid-fine) 1px, transparent 1px); background-size: 80px 80px, 80px 80px, 40px 40px, 40px 40px, 8px 8px, 8px 8px; } /* Dark sections: the membrane field (field.js) is the texture, so no graph paper here */ #science, #partnership, #contact { background-image: none; } /* ===== Shape-readout diagrams: gentle motion per shape type ===== */ .panels svg [class*="an-"] { transform-box: fill-box; transform-origin: center; } .an-breathe { animation: anBreathe 3.2s ease-in-out infinite; } .an-stretch { animation: anStretch 3.6s ease-in-out infinite; } .an-wobble { animation: anWobble 3.4s ease-in-out infinite; } .an-wiggle { animation: anWiggle 2.8s ease-in-out infinite; } .an-march { animation: anMarch 1.4s linear infinite; } .an-dash { stroke-dasharray: 4 4; animation: anMarch 1.1s linear infinite; } .an-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: anDraw 3.2s ease-in-out infinite; } /* stagger siblings so a row of shapes reads as a sequence */ .panels svg .an-breathe:nth-of-type(2), .panels svg .an-stretch:nth-of-type(2), .panels svg .an-wobble:nth-of-type(2) { animation-delay: 0.45s; } .panels svg .an-breathe:nth-of-type(3), .panels svg .an-stretch:nth-of-type(3), .panels svg .an-wobble:nth-of-type(3) { animation-delay: 0.9s; } .panels svg .an-breathe:nth-of-type(4) { animation-delay: 1.35s; } @keyframes anBreathe { 50% { transform: scale(1.09); } } @keyframes anStretch { 50% { transform: scaleX(1.14) scaleY(0.94); } } @keyframes anWobble { 25% { transform: rotate(-7deg); } 75% { transform: rotate(7deg); } } @keyframes anWiggle { 30% { transform: rotate(5deg) scale(1.05); } 70% { transform: rotate(-5deg); } } @keyframes anMarch { to { stroke-dashoffset: -12; } } @keyframes anDraw { 0% { stroke-dashoffset: 1; } 45%, 75% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } } /* panel 8 gallery: each cartoon floats on its own phase */ .shape svg { animation: anFloat 4s ease-in-out infinite; } .shape:nth-child(3n + 2) svg { animation-delay: -1.3s; } .shape:nth-child(3n + 3) svg { animation-delay: -2.6s; } .shape:nth-child(even) svg { animation-duration: 4.6s; } @keyframes anFloat { 50% { transform: translateY(-3px); } } @media (prefers-reduced-motion: reduce) { .panels svg [class*="an-"], .shape svg { animation: none; } .an-draw { stroke-dasharray: none; stroke-dashoffset: 0; } } /* ===== Design pass: motion tokens, layout, nav, contrast, reveals ===== */ :root { --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --dur-fast: 0.25s; --dur: 0.55s; --dur-slow: 3.2s; } /* Only the hero owns the viewport; content sections size to their content */ .section:not(.hero) { min-height: 0; padding-block: clamp(4rem, 10vh, 7.5rem); } /* One heading scale for every section title */ .section-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1.06; letter-spacing: -0.02em; margin: 0 0 1.25rem; } .eyebrow { margin-bottom: 1.25rem; } /* Team: two columns on wide screens */ @media (min-width: 900px) { .team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Toolbar: solid teal over every section (the base .nav rule) */ /* Contrast: secondary labels lifted above ~4.5:1 */ .panel__def { opacity: 0.92; } .shape figcaption { opacity: 0.9; } .contact__globe-cap { opacity: 0.85; } .speed__src { opacity: 0.8; } .science__video figcaption { opacity: 0.85; } .index-links__label { opacity: 0.8; } .program__viz-cap { opacity: 0.85; } .hero__scrollcue { opacity: 0.85; } .milestones li { opacity: 0.7; } .readout p, .panel__note, .dmta__card p, .tox__card p { opacity: 0.92; } /* Card entrance: fade-rise once, staggered by main.js */ .js-reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); } .js-reveal.is-in { opacity: 1; transform: none; } /* Perpetual loops only run while their section is on screen */ .section:not(.is-visible) [class*="an-"], .section:not(.is-visible) .shape svg, .section:not(.is-visible) .status-tag--live { animation-play-state: paused; } /* Footer rows */ .site-footer__address, .site-footer__meta { flex-basis: 100%; margin: 0; font-size: 0.85rem; opacity: 0.8; } .site-footer__meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; } .site-footer__meta a, .site-footer__address a { border-bottom: 1px solid color-mix(in srgb, var(--teal) 40%, transparent); } .site-footer__meta a:hover, .site-footer__address a:hover { color: var(--teal); } @media (prefers-reduced-motion: reduce) { .js-reveal { opacity: 1; transform: none; transition: none; } } /* ===== Globe: screen-space label pinned to Lowell, MA ===== */ .globe-label { position: absolute; top: 0; left: 0; z-index: 2; pointer-events: none; display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 0.45rem; /* sits just above the marker; horizontal offset is computed in globe.js */ margin: -2.4rem 0 0 0; padding: 0.35rem 0.6rem 0.4rem; border-radius: 8px; background: color-mix(in srgb, var(--ink) 78%, transparent); border: 1px solid color-mix(in srgb, var(--teal) 45%, transparent); font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-ink); white-space: nowrap; opacity: 0; transition: opacity 0.3s var(--ease-out); will-change: transform, opacity; } .globe-label__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); box-shadow: none; } .globe-label__text { font-weight: 500; color: var(--teal); } .globe-label__sub { grid-column: 2; font-size: 0.56rem; opacity: 0.75; } /* ===== Hero: headline, lead, proof strip ===== */ .hero__headline { max-width: 16ch; /* "Making cancer as treatable as high blood pressure." on three lines */ } .hero__mission { max-width: 56ch; font-size: clamp(1.02rem, 1.6vw, 1.3rem); margin-bottom: 1.5rem; } .hero__proof { list-style: none; margin: 0 0 1.75rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 0.6rem; max-width: 64ch; } .hero__proof li { display: inline-flex; align-items: baseline; gap: 0.45rem; padding: 0.38rem 0.75rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--teal) 40%, transparent); background: var(--surface-dark); font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; } .hero__proof-k { font-weight: 500; color: var(--teal); } .hero__proof-k::after { content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 0.45rem; border-radius: 50%; background: var(--teal); vertical-align: 0.1em; } @media (max-width: 640px) { .hero__proof li { font-size: 0.62rem; padding: 0.32rem 0.6rem; } } .hero__proof li { align-items: flex-start; } .hero__proof-k { white-space: nowrap; } /* ===== Partnership on the dark slate (like Mission) ===== */ #partnership { background-color: var(--ink); color: var(--on-ink); } #partnership .dmta__card, #partnership .tox__card { background: var(--surface-dark); border-color: color-mix(in srgb, var(--teal) 24%, transparent); box-shadow: none; } #partnership .dmta__side--xtalpi .dmta__card { border-color: color-mix(in srgb, var(--violet) 45%, transparent); } #partnership .dmta__card p, #partnership .tox__card p { opacity: 0.85; } #partnership .dmta__track { stroke: var(--surface-dark); } #partnership .dmta__node circle { fill: var(--ink-2); } #partnership .dmta__node text { fill: var(--on-ink); } #partnership .dmta__centre--sub { fill: var(--on-ink); } #partnership .speed__bar { background: var(--surface-dark); } #partnership .speed__bar i { background: var(--surface-dark); } #partnership .speed__row--ai .speed__bar i { background: linear-gradient(90deg, var(--violet), var(--teal)); } #partnership .tox__n { color: var(--ink); } /* ===== Science on the dark slate (like Partnership) ===== */ #science { background-color: var(--ink); color: var(--on-ink); --teal: #44e0cc; /* luminous teal again on the dark surface */ --on-ink: #e6f6f3; } #science .science__video, #science .panel, #science .table-wrap { background: var(--surface-dark); border-color: color-mix(in srgb, var(--teal) 24%, transparent); box-shadow: none; } #science .panel__tab { background: color-mix(in srgb, var(--teal) 10%, transparent); border-bottom-color: color-mix(in srgb, var(--teal) 26%, transparent); } #science .panel__n { color: var(--ink); } #science .panel__note { background: color-mix(in srgb, var(--teal) 8%, transparent); border-color: color-mix(in srgb, var(--teal) 32%, transparent); } #science .shape-table thead th { background: color-mix(in srgb, var(--teal) 10%, transparent); border-bottom-color: color-mix(in srgb, var(--teal) 32%, transparent); } #science .shape-table td, #science .shape-table tbody th { border-top-color: color-mix(in srgb, var(--teal) 18%, transparent); } #science .science__video video { background: var(--ink); } #science .science__intro p, #science .science__blurb, #science .panel__def, #science .panel__note, #science .shape figcaption { opacity: 0.88; } #science .ro-warm { stroke: var(--copper); /* warmer ochre so rings and networks read on the slate */ } /* ===== Menu overlay: same teal as the toolbar, dark ink text ===== */ .nav__links { background: var(--teal); } .nav__links a { color: var(--on-teal); } .nav__links a:hover, .nav__links a[aria-current="true"] { color: var(--paper); } .nav__links a:hover::before { filter: drop-shadow(0 0 8px var(--surface-dark)); } .nav__links a[aria-current="true"]::before { animation: menuIconBreatheTeal 2.4s ease-in-out infinite; } @keyframes menuIconBreatheTeal { 0%, 100% { filter: drop-shadow(0 0 0 transparent); transform: scale(1); } 50% { filter: drop-shadow(0 0 10px var(--surface-dark)); transform: scale(1.08); } } .nav__subdesc { color: var(--on-teal); } /* toolbar marks stay dark while the teal overlay is open */ .nav.is-open .nav__wordmark, .nav.is-open .nav__lang-btn { color: var(--nav-fg); } .nav.is-open .nav__lang-btn { border-color: color-mix(in srgb, var(--nav-fg) 40%, transparent); } .nav.is-open .nav__toggle-bar { background: var(--nav-fg); } /* ===== Globe: clickable site chips (centre the globe, show the label) ===== */ .contact__globe-cap { margin-bottom: 0.6rem; } .globe-sites { list-style: none; margin: 0 auto; padding: 0; max-width: 560px; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 0.45rem; } .globe-site { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-ink); background: var(--surface-dark); border: 1px solid color-mix(in srgb, var(--teal) 35%, transparent); border-radius: 999px; padding: 0.36rem 0.7rem; cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .globe-site:hover { border-color: var(--teal); color: var(--teal); } .globe-site[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: var(--on-teal); } .globe-site:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } /* Advisors: card grid sits under the heading, above the text list */ .team__grid--advisors { margin-bottom: 1.5rem; } /* Team cards: rows pack at the top, so a card stretched to match its row neighbour keeps its name / role / bio together like every other card */ .member { align-content: start; } /* ===================================================================== Impeccable refinement: one type system, OKLCH palette tinted to teal, solid surfaces, two accents (teal, copper), orchestrated motion. ===================================================================== */ :root { --teal: oklch(84% 0.13 178); --teal-bar: oklch(84% 0.13 178); --teal-bright: oklch(72% 0.12 178); --teal-deep: oklch(32% 0.07 178); --teal-ink: oklch(50% 0.10 178); --ink: oklch(19% 0.02 200); --ink-2: oklch(24% 0.022 200); --paper: oklch(97.5% 0.008 178); --paper-dim: oklch(93% 0.01 178); --surface: oklch(99% 0.004 178); --surface-dark: color-mix(in oklch, var(--ink-2) 86%, var(--teal)); --on-ink: oklch(95% 0.01 178); --on-paper: oklch(22% 0.02 200); --on-teal: oklch(25% 0.06 178); /* Secondary accent: a fluorophore magenta, the channel that sits beside cyan in every immunofluorescence image. Two steps: luminous on slate, ink-strength on paper. The copper names stay as aliases. */ --accent: oklch(68% 0.19 345); --accent-ink: oklch(50% 0.18 345); --copper: var(--accent); --copper-ink: var(--accent-ink); --violet: var(--copper); /* the partner accent is copper now; old references resolve here */ --shadow-card: 0 1px 2px oklch(0 0 0 / 0.06), 0 8px 24px oklch(0 0 0 / 0.05); --font-display: "Bricolage Grotesque", "Avenir Next", system-ui, sans-serif; --font-body: "Albert Sans", "Avenir Next", system-ui, sans-serif; --font-mono: "Red Hat Mono", ui-monospace, "SFMono-Regular", monospace; --t-xs: 0.8rem; --t-s: 1rem; --t-m: clamp(1.25rem, 1.6vw, 1.5rem); --t-l: clamp(2rem, 4.6vw, 3.6rem); --t-xl: clamp(2.8rem, 7vw, 5.5rem); --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 24px; --space-2xl: 32px; --space-3xl: 48px; --space-4xl: 64px; --space-5xl: 96px; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --dur-fast: 0.2s; --dur: 0.35s; --dur-slow: 0.6s; } body { font-family: var(--font-body); font-size: var(--t-s); } .display, .section-title { font-family: var(--font-display); font-weight: 600; font-size: var(--t-l); line-height: 1.04; letter-spacing: -0.015em; } .hero__headline { font-size: var(--t-xl); font-weight: 600; letter-spacing: -0.02em; } .lead, .hero__mission, .partnership__lead { font-size: var(--t-m); line-height: 1.45; } .eyebrow, .science__h, .readout__num, .panel__def, .index-links, .status-tag, .hero__proof li, .globe-site, .contact__globe-cap, .speed__label, .speed__src, .milestones li, .dmta__who, .dmta__step, .example__label, .shape figcaption, .science__video figcaption, .program__summary { font-family: var(--font-mono); font-size: var(--t-xs); } .panel__def { font-size: var(--t-xs); } .panel__tab h4, .dmta__card h3, .tox__card h4, .member__name, .index-title, .program__title { font-family: var(--font-display); font-weight: 600; } .member__name { font-size: var(--t-m); } .index-title { font-size: clamp(1.5rem, 3vw, 2.4rem); } .science__intro p, .science__blurb, .panel__note, .dmta__card p, .tox__card p, .member__bio, .program__content p, .contact__list, .index-desc { max-width: 65ch; } #science p, #partnership p, #contact p, #science td, #science th { line-height: 1.65; } /* Surfaces: solid, tinted; light cards lift with one soft shadow, dark cards with a hairline */ .panel, .readout, .dmta__card, .tox__card, .member, .science__video, .table-wrap, .pipeline .index-item { background: var(--surface); border: 1px solid color-mix(in oklch, var(--teal-ink) 22%, transparent); box-shadow: var(--shadow-card); } #science .panel, #science .science__video, #science .table-wrap, #partnership .dmta__card, #partnership .tox__card { background: var(--surface-dark); border-color: color-mix(in oklch, var(--teal) 22%, transparent); box-shadow: none; } .pipeline .index-item:has(.program[open]) { background: var(--surface); border-color: color-mix(in oklch, var(--teal-ink) 45%, transparent); box-shadow: var(--shadow-card); } .member__photo { box-shadow: none; border: 1px solid color-mix(in oklch, var(--teal-ink) 20%, transparent); } .nav__links { background: var(--teal); } .nav__lang-menu { box-shadow: var(--shadow-card); } .globe-label { background: var(--ink); } .btn--light { box-shadow: none; } .btn--light:hover { box-shadow: none; filter: brightness(1.04); } .hero__proof li { background: var(--surface); border-color: color-mix(in oklch, var(--teal-ink) 30%, transparent); } .status-tag--live { --live: var(--copper-ink); animation: none; box-shadow: none; } .xtalpi-mark { background: var(--copper); color: var(--ink); } .kong-mark { background: var(--teal); color: var(--on-teal); } .globe-site:hover { border-color: var(--copper); color: var(--copper); } .globe-site[aria-pressed="true"] { background: var(--teal); color: var(--on-teal); border-color: var(--teal); } .speed__row--ai .speed__bar i { background: linear-gradient(90deg, var(--copper), var(--teal)); } /* Rhythm: sections breathe differently by role */ #science, #partnership, #contact { padding-block: clamp(5rem, 12vh, 9rem); } #pipeline, #team { padding-block: clamp(3.5rem, 8vh, 6rem); } /* Toxicity-first: a numbered three-column list, not three cards */ .tox__grid { gap: var(--space-2xl) var(--space-3xl); } #partnership .tox__card, .tox__card { background: none; border: 0; border-top: 1px solid color-mix(in oklch, var(--teal) 30%, transparent); border-radius: 0; box-shadow: none; padding: var(--space-lg) 0 0; } .tox__n { background: none; color: var(--teal); font-size: var(--t-m); width: auto; height: auto; border-radius: 0; } /* Team: editorial lockup with a larger portrait on wide screens */ .member__bio { max-width: 60ch; } @media (min-width: 900px) { .member { grid-template-columns: 160px 1fr; column-gap: var(--space-xl); } .member__photo { width: 160px; } } /* Motion: nothing ambient; entrances only */ .nav__links a[aria-current="true"]::before, .nav__links a:hover::before { animation: none; filter: none; } .trial-stats__live { animation: none; } .an-breathe { animation-duration: 5s; } .an-stretch { animation-duration: 5.5s; } .an-wobble { animation-duration: 5.5s; } .an-wiggle { animation-duration: 4.5s; } .shape svg { animation-duration: 6s; } /* Science section kicker — microscope icon (currentColor mask, like the other eyebrows) */ [data-i18n="sci.eyebrow"] { --ic: url("data:image/svg+xml,"); } /* ===== Drug pipeline: illustration as a side figure, not a banner ===== */ .program__content { display: flow-root; /* contains the floated figure */ } .program__viz { width: min(100%, 420px); margin: 0 0 var(--space-xl); border-radius: 10px; box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--teal-ink) 22%, transparent); } .program__viz-cap { margin-top: var(--space-sm); max-width: 420px; } @media (min-width: 900px) { /* the figure takes a share of the overview column: 300px on a laptop, up to 560px on a wide desktop, and the caption tracks it */ .program__viz { float: right; width: clamp(300px, 42%, 560px); margin: var(--space-xs) 0 var(--space-lg) var(--space-2xl); shape-outside: margin-box; } .program__content p { max-width: 62ch; } } /* the small emblem in the card corner stays modest */ .index-viz { width: clamp(44px, 6vw, 64px); } /* Program overview toggle: a quiet label with a chevron (no list icon, no +/–) */ .program__summary { gap: var(--space-sm); font-size: var(--t-xs); letter-spacing: 0.1em; opacity: 0.7; transition: opacity var(--dur-fast) var(--ease-out); } .program__summary:hover, .program[open] .program__summary { opacity: 0.95; } .program__summary::before { display: none; } .program__summary::after, .program[open] .program__summary::after { content: ""; width: 0.9em; height: 0.9em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,") center / contain no-repeat; mask: url("data:image/svg+xml,") center / contain no-repeat; transition: transform var(--dur) var(--ease-out); } .program[open] .program__summary::after { transform: rotate(180deg); } /* Membrane field (field.js): faint living contours behind the dark sections */ .field { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; display: block; pointer-events: none; } /* Light sections: the paper gets a light source (a hair brighter at the top), the grid loses its 8px mesh and lives in the gutters, dissolving to clean paper under the content column. Team is plain paper: faces want a quiet ground. The hero keeps its full stage grid; the scale bar earns it. */ #hero { /* grid layers on top, the tonal drift underneath */ background-image: linear-gradient(var(--grid-major) 1px, transparent 1px), linear-gradient(90deg, var(--grid-major) 1px, transparent 1px), linear-gradient(var(--grid-minor) 1px, transparent 1px), linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px), linear-gradient(var(--grid-fine) 1px, transparent 1px), linear-gradient(90deg, var(--grid-fine) 1px, transparent 1px), linear-gradient(180deg, var(--paper), color-mix(in oklch, var(--paper) 70%, var(--paper-dim))); background-size: 80px 80px, 80px 80px, 40px 40px, 40px 40px, 8px 8px, 8px 8px, 100% 100%; } #pipeline { background-image: linear-gradient(180deg, var(--surface), color-mix(in oklch, var(--surface) 70%, var(--paper-dim))); } #pipeline::before { background-image: linear-gradient(color-mix(in srgb, var(--teal) 10%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--teal) 10%, transparent) 1px, transparent 1px), linear-gradient(color-mix(in srgb, var(--teal) 5%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--teal) 5%, transparent) 1px, transparent 1px); background-size: 80px 80px, 80px 80px, 40px 40px, 40px 40px; -webkit-mask-image: linear-gradient(90deg, black 0%, transparent 30%, transparent 70%, black 100%); mask-image: linear-gradient(90deg, black 0%, transparent 30%, transparent 70%, black 100%); } #team { background-image: linear-gradient(180deg, var(--paper), color-mix(in oklch, var(--paper) 70%, var(--paper-dim))); } /* Schematic figures (pipeline-viz.js): axes, series, annotations */ .viz-thin { stroke-width: 1.25; } .viz-dash { stroke-dasharray: 4 5; } .viz-copper { stroke: var(--copper); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .viz-fill-ink { fill: currentColor; stroke: none; opacity: 0.55; } .viz-fill-bright { fill: var(--teal); stroke: none; } .viz-fill-ink.over { fill: var(--copper); opacity: 1; } .viz-label { font-size: 11px; letter-spacing: 0.1em; opacity: 0.75; } .viz-label.ax { font-size: 10px; opacity: 0.6; } .viz-label.bright { fill: var(--teal); opacity: 1; } .viz-label.copper { fill: var(--copper); opacity: 1; } .program__viz { padding: 4px 4px 0; } .program__viz svg { height: auto; aspect-ratio: 4 / 3; } .program__viz .program__viz-cap { margin: 0; padding: var(--space-xs) var(--space-md) var(--space-md); text-transform: none; letter-spacing: 0.02em; font-size: var(--t-xs); line-height: 1.5; } .index-viz .viz-fill-ink { opacity: 0.4; } /* ===== Icon motion: entrances on first sight, feedback on hover, one live signal. Nothing loops except the enrolling badge and the scroll cue. All of it is gated on .js-anim, so no JS or reduced motion means static icons. ===== */ @keyframes icIn { from { opacity: 0; transform: scale(0.4) rotate(-25deg); } to { opacity: 1; transform: none; } } @keyframes icPop { from { transform: scale(0); } to { transform: none; } } @keyframes icLive { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.18); opacity: 0.7; } } @keyframes icRing { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-16deg); } 45% { transform: rotate(14deg); } 70% { transform: rotate(-8deg); } } @keyframes icBob { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-3px); } } @keyframes icDrop { from { transform: translateY(-5px) scale(0.85); } to { transform: none; } } @keyframes cueBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } } /* section eyebrows and group titles: tick in the first time the section is seen */ .js-anim main > section:not(.is-seen) .eyebrow::before, .js-anim main > section:not(.is-seen) .team__advisors-title::before, .js-anim main > section:not(.is-seen) .pipeline-group__title::before { opacity: 0; } .js-anim main > section.is-seen .eyebrow::before, .js-anim main > section.is-seen .team__advisors-title::before, .js-anim main > section.is-seen .pipeline-group__title::before { animation: icIn 0.6s var(--ease-out) both; } .js-anim main > section.is-seen .team__advisors-title::before { animation-delay: 0.15s; } .js-anim #hero .eyebrow::before { animation: icIn 0.7s var(--ease-out) 0.2s both; } /* drug rows: title mark and status icon arrive with the row */ .js-anim .index-item.js-reveal:not(.is-in) .index-title::before, .js-anim .index-item.js-reveal:not(.is-in) .status-tag::before { opacity: 0; } .js-anim .index-item.is-in .index-title::before { animation: icIn 0.55s var(--ease-out) 0.1s both; } .js-anim .index-item.is-in .status-tag::before { animation: icIn 0.5s var(--ease-out) 0.25s both; } .js-anim .index-item.is-in .status-tag--live::before { animation: icIn 0.5s var(--ease-out) 0.25s both, icLive 3.2s ease-in-out 1s infinite; } /* milestone nodes pop along the track */ .js-anim .milestones li:not(.is-in)::after { transform: scale(0); } .js-anim .milestones li.is-in::after { animation: icPop 0.45s var(--ease-out) both; } .js-anim .milestones li.is-in:nth-child(2)::after { animation-delay: 0.08s; } .js-anim .milestones li.is-in:nth-child(3)::after { animation-delay: 0.16s; } .js-anim .milestones li.is-in:nth-child(4)::after { animation-delay: 0.24s; } .js-anim .milestones li.is-in:nth-child(5)::after { animation-delay: 0.32s; } /* trial registration links: an outbound arrow appears on hover */ .index-links a { --ic-ext: url("data:image/svg+xml,"); position: relative; padding-right: 0.9em; } .index-links a::after { content: ""; position: absolute; right: 0; top: 50%; width: 0.7em; height: 0.7em; margin-top: -0.35em; background-color: currentColor; -webkit-mask: var(--ic-ext) center / contain no-repeat; mask: var(--ic-ext) center / contain no-repeat; opacity: 0.35; transform: translate(-2px, 2px); transition: opacity 0.25s var(--ease-out), transform 0.35s var(--ease-out); } .index-links a:hover::after { opacity: 1; transform: none; } /* contact labels: arrive with their row, then answer the hover */ .js-anim .contact__list li:not(.is-in) .contact__label::before { opacity: 0; } .js-anim .contact__list li.is-in .contact__label::before { animation: icIn 0.5s var(--ease-out) both; } .js-anim .contact__list li.is-in:nth-child(2) .contact__label::before { animation-delay: 0.1s; } .js-anim .contact__list li.is-in:nth-child(3) .contact__label::before { animation-delay: 0.2s; } .contact__list li:hover [data-i18n="label.phone"]::before { animation: icRing 0.7s ease-in-out; transform-origin: 50% 80%; } .contact__list li:hover [data-i18n="label.email"]::before { animation: icBob 0.6s var(--ease-out); } .contact__list li:hover [data-i18n="label.address"]::before { animation: icDrop 0.5s var(--ease-out); } /* language globe turns when the menu opens or the button is hovered */ .nav__lang-btn::before { transition: transform 0.6s var(--ease-out); } .nav__lang-btn:hover::before, .nav__lang.is-open .nav__lang-btn::before { transform: rotate(180deg); } /* scroll cue chevron nods after the hero intro has settled */ .js-anim .hero__scrollcue::after { animation: cueBob 2.2s ease-in-out 2.4s infinite; } /* buttons carry a directional arrow that leans into the hover */ .btn { --ic-arrow: url("data:image/svg+xml,"); display: inline-flex; align-items: center; gap: 0.5em; } .btn::before, .btn::after { width: 0.9em; height: 0.9em; background-color: currentColor; -webkit-mask: var(--ic-arrow) center / contain no-repeat; mask: var(--ic-arrow) center / contain no-repeat; transition: transform 0.35s var(--ease-out); } .hero .btn::after { content: ""; } .hero .btn:hover::after { transform: translateX(3px); } .simple .btn::before { content: ""; transform: scaleX(-1); } .simple .btn:hover::before { transform: scaleX(-1) translateX(3px); } /* the selected collaboration site carries a live locator dot */ .globe-site { display: inline-flex; align-items: center; gap: 0.45em; } .globe-site::before { content: ""; width: 0.5em; height: 0.5em; border-radius: 50%; background: currentColor; transform: scale(0); transition: transform 0.35s var(--ease-out); } .globe-site[aria-pressed="true"]::before { transform: none; animation: icLive 2s ease-in-out 0.4s infinite; } @media (prefers-reduced-motion: reduce) { .eyebrow::before, .team__advisors-title::before, .pipeline-group__title::before, .index-title::before, .status-tag::before, .milestones li::after, .contact__label::before, .nav__lang-btn::before, .hero__scrollcue::after, .btn::before, .btn::after, .globe-site::before, .index-links a::after { animation: none !important; transition: none !important; opacity: 1; } .milestones li::after, .globe-site:not([aria-pressed="true"])::before { transform: none; } .globe-site:not([aria-pressed="true"])::before { display: none; } } /* ===== Pipeline board: three programs on one development-stage rail. Hairline rows instead of cards; the open program is bracketed like a reading on an instrument and the others step back. ===== */ #pipeline .pipeline-group__desc { max-width: 52ch; } #pipeline .board__summary { margin: var(--space-md) 0 0; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal); } #pipeline .index-list { display: block; margin: var(--space-2xl) 0 0; padding: 0; list-style: none; border-top: 1px solid color-mix(in oklch, var(--ink) 16%, transparent); } #pipeline .index-item { display: block; position: relative; margin: 0; padding: var(--space-xl) var(--space-md); border: 0; border-bottom: 1px solid color-mix(in oklch, var(--ink) 16%, transparent); border-radius: 0; background: transparent; box-shadow: none; transition: background-color 0.35s var(--ease-out), opacity 0.35s var(--ease-out), transform var(--dur) var(--ease-out); } #pipeline .index-item:hover { background: color-mix(in oklch, var(--teal) 4%, transparent); } #pipeline .index-item.is-reading { background: color-mix(in oklch, var(--teal) 6%, var(--surface)); } /* corner brackets frame the program being read */ #pipeline .index-item::before, #pipeline .index-item::after { content: ""; position: absolute; width: 16px; height: 16px; border: 1.5px solid var(--teal); opacity: 0; pointer-events: none; transition: opacity 0.35s var(--ease-out), transform 0.5s var(--ease-out); } #pipeline .index-item::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; transform: translate(8px, 8px); } #pipeline .index-item::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; transform: translate(-8px, -8px); } #pipeline .index-item.is-reading::before, #pipeline .index-item.is-reading::after { opacity: 1; transform: none; } /* the rest of the board steps back while one program is open */ #pipeline .index-list:has(.is-reading) .index-item:not(.is-reading) { opacity: 0.6; } #pipeline .index-list:has(.is-reading) .index-item:not(.is-reading):hover { opacity: 1; } /* row grid: identity | stage rail | emblem */ .prog { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); align-items: start; } .prog__id { display: grid; gap: var(--space-xs); padding-right: 56px; } #pipeline .index-num { display: block; margin: 0; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.14em; color: var(--teal); } #pipeline .index-title { margin: 0; font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } #pipeline .index-desc { margin: var(--space-xs) 0 0; max-width: 34ch; } #pipeline .index-viz { position: absolute; top: 0; right: 0; width: 44px; margin: 0; } @media (min-width: 900px) { .prog { grid-template-columns: minmax(220px, 0.8fr) minmax(0, 2fr) 56px; column-gap: var(--space-2xl); } .prog__id { padding-right: 0; } #pipeline .index-viz { position: static; width: 56px; justify-self: end; } } /* the stage rail */ .rail { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); margin: 0; padding: 22px 0 0; list-style: none; } .rail::before, .rail::after { content: ""; position: absolute; left: 10%; width: 80%; top: 6px; height: 1px; background: color-mix(in oklch, var(--ink) 18%, transparent); } .rail::after { height: 3px; top: 5px; border-radius: 2px; background: var(--teal); transform-origin: left center; transform: scaleX(var(--p, 0)); transition: transform 1.1s var(--ease-out) 0.25s; } .rail li { position: relative; text-align: center; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.3; opacity: 0.5; } .rail li::before { content: ""; position: absolute; top: -22px; left: 50%; width: 12px; height: 12px; margin-left: -6px; box-sizing: border-box; border-radius: 50%; background: var(--surface); border: 1.5px solid color-mix(in oklch, var(--ink) 35%, transparent); transition: transform 0.5s var(--ease-out), background-color 0.3s, border-color 0.3s; } .rail li:nth-child(2)::before { transition-delay: 0.08s; } .rail li:nth-child(3)::before { transition-delay: 0.16s; } .rail li:nth-child(4)::before { transition-delay: 0.24s; } .rail li:nth-child(5)::before { transition-delay: 0.32s; } .rail li.is-done { opacity: 0.8; } .rail li.is-done::before { background: var(--teal); border-color: var(--teal); } .rail li.is-now { opacity: 1; color: var(--teal); } .rail li.is-now::before { border: 2.5px solid var(--teal); transform: scale(1.35); } /* the program in the clinic pings like a live locator */ .rail li.is-live::after { content: ""; position: absolute; top: -22px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; border: 1.5px solid var(--teal); animation: railPing 2.4s ease-out infinite; } @keyframes railPing { from { transform: scale(1); opacity: 0.9; } to { transform: scale(3); opacity: 0; } } /* entrance: the rail fills and the nodes dock in as the row is revealed */ .js-anim .index-item.js-reveal:not(.is-in) .rail::after { transform: scaleX(0); } .js-anim .index-item.js-reveal:not(.is-in) .rail li::before { transform: scale(0); } .prog__readout { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg); margin-top: var(--space-lg); } #pipeline .index-links, #pipeline .index-platform { margin: 0; } #pipeline .program { margin-top: var(--space-lg); } #pipeline .program__content { padding-top: 0; } #pipeline .program__content .milestones { margin: 0 0 var(--space-lg); } @media (max-width: 520px) { .rail li { font-size: 0.52rem; letter-spacing: 0.08em; } } @media (prefers-reduced-motion: reduce) { .rail::after, .rail li::before { transition: none; } .rail li.is-live::after { animation: none; display: none; } #pipeline .index-item::before, #pipeline .index-item::after { transition: none; } } /* ===== Key selling points: the clinic and the FDA filing. Solid badges in the two brand accents, stamped in on arrival, with a light sweep every few seconds so the eye returns to them. ===== */ @keyframes stampIn { 0% { opacity: 0; transform: scale(1.3); } 55% { opacity: 1; transform: scale(0.96); } 100% { opacity: 1; transform: none; } } @keyframes sheen { 0% { transform: translateX(-130%) skewX(-18deg); } 18%, 100% { transform: translateX(160%) skewX(-18deg); } } .status-tag--live, .status-tag[data-i18n="tag.ind"], .hero__proof li:nth-child(-n + 2) { position: relative; overflow: hidden; isolation: isolate; border-color: transparent; font-weight: 600; } .status-tag--live::after, .status-tag[data-i18n="tag.ind"]::after, .hero__proof li:nth-child(-n + 2)::after { content: ""; position: absolute; inset: 0; z-index: -1; width: 45%; background: linear-gradient(105deg, transparent 0%, oklch(100% 0 0 / 0.42) 50%, transparent 100%); transform: translateX(-130%) skewX(-18deg); pointer-events: none; } /* in the clinic: copper */ .status-tag--live, .hero__proof li:nth-child(1) { background: var(--copper); color: var(--ink); animation: none; } .status-tag--live::before { animation: none; } /* filed with the FDA: the third fluorescence channel, a warm yellow */ :root { --accent-2: oklch(86% 0.16 95); --accent-2-ink: oklch(58% 0.13 90); } .status-tag[data-i18n="tag.ind"], .hero__proof li:nth-child(2) { background: var(--accent-2); color: var(--ink); } .hero__proof li:nth-child(-n + 2) .hero__proof-k, .hero__proof li:nth-child(-n + 2) .hero__proof-k::after { color: inherit; background-color: currentColor; } .hero__proof li:nth-child(-n + 2) .hero__proof-k { background: none; } .hero__proof li:nth-child(-n + 2) span:last-child { opacity: 0.9; } /* motion: stamp on arrival, then a sweep every six seconds (offset so the two badges never flash together) */ .js-anim .hero__proof li:nth-child(1) { animation: stampIn 0.7s var(--ease-out) 1.3s both; } .js-anim .hero__proof li:nth-child(2) { animation: stampIn 0.7s var(--ease-out) 1.5s both; } .js-anim .hero__proof li:nth-child(1)::after { animation: sheen 6s ease-in-out 2.4s infinite; } .js-anim .hero__proof li:nth-child(2)::after { animation: sheen 6s ease-in-out 3.6s infinite; } .js-anim .index-item.js-reveal:not(.is-in) .status-tag--live, .js-anim .index-item.js-reveal:not(.is-in) .status-tag[data-i18n="tag.ind"] { opacity: 0; } .js-anim .index-item.is-in .status-tag--live, .js-anim .index-item.is-in .status-tag[data-i18n="tag.ind"] { animation: stampIn 0.7s var(--ease-out) 0.35s both; } .js-anim .index-item.is-in .status-tag--live::after { animation: sheen 6s ease-in-out 1.6s infinite; } .js-anim .index-item.is-in .status-tag[data-i18n="tag.ind"]::after { animation: sheen 6s ease-in-out 2.8s infinite; } /* the enrolling badge keeps its live pulse on the icon, after the stamp */ .js-anim .index-item.is-in .status-tag--live::before { animation: icLive 3.2s ease-in-out 1.4s infinite; } @media (prefers-reduced-motion: reduce) { .status-tag--live, .status-tag[data-i18n="tag.ind"], .hero__proof li:nth-child(-n + 2), .status-tag--live::after, .status-tag[data-i18n="tag.ind"]::after, .hero__proof li:nth-child(-n + 2)::after, .status-tag--live::before { animation: none !important; opacity: 1; } } /* On light surfaces the accent drops to its ink step for lines and labels */ #pipeline .viz-copper { stroke: var(--accent-ink); } #pipeline .viz-label.copper { fill: var(--accent-ink); } #pipeline .index-viz .viz-copper { stroke: var(--accent-ink); } /* Contact: legal line where the footer used to be */ .contact__legal { margin: var(--space-xl) 0 0; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.04em; opacity: 0.6; } .contact__legal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; margin-left: var(--space-sm); } .contact__legal a:hover { color: var(--teal); } /* Analytics consent: a quiet bar, not a modal. Solid surface, slides up once. */ .consent { position: fixed; left: 50%; bottom: var(--space-lg); z-index: 60; width: min(calc(100% - 2 * var(--space-lg)), 720px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md) var(--space-lg); padding: var(--space-md) var(--space-lg); border-radius: 12px; background: var(--ink); color: var(--on-ink); border: 1px solid color-mix(in oklch, var(--teal) 30%, transparent); box-shadow: 0 12px 32px oklch(0 0 0 / 0.25); transform: translate(-50%, calc(100% + var(--space-2xl))); opacity: 0; transition: transform 0.45s var(--ease-out), opacity 0.3s var(--ease-out); } .consent.is-in { transform: translate(-50%, 0); opacity: 1; } .consent__text { margin: 0; font-size: var(--t-xs); line-height: 1.5; max-width: 44ch; } .consent__actions { display: flex; align-items: center; gap: var(--space-sm); margin-left: auto; } .consent__link { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; color: var(--teal); margin-right: var(--space-sm); } .consent__btn { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; padding: 0.5rem 0.9rem; border-radius: 999px; border: 1px solid color-mix(in oklch, var(--teal) 40%, transparent); background: transparent; color: var(--on-ink); cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .consent__btn:hover { background: color-mix(in oklch, var(--teal) 14%, transparent); } .consent__btn--allow { background: var(--teal); color: var(--on-teal); border-color: var(--teal); } .consent__btn--allow:hover { background: color-mix(in oklch, var(--teal) 88%, white); } .consent__btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .consent { transition: none; } }