diff --git a/website/globals.css b/website/globals.css new file mode 100644 index 000000000..9cb875d28 --- /dev/null +++ b/website/globals.css @@ -0,0 +1,116 @@ +/* Minimal reset (meyer-reset v2 inlined to eliminate extra request) */ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} + +:root { + color-scheme: dark; + --color-bg-page: #11131b; + --color-bg-dark: #0c0e16; + --color-bg-card: #282a3280; + --color-bg-section: #191b2380; + --color-bg-terminal-head: #32343d; + --color-bg-overlay: #b4c5ff1a; + --color-bg-btn: #2563eb; + --color-bg-btn-hover: #1d4ed8; + --color-text-primary: #e1e2ed; + --color-text-secondary: #c3c6d7; + --color-text-accent: #b4c5ff; + --color-text-btn: #eeefff; + --color-text-terminal-blue: #0267b8; + --color-border: #434655; + --color-border-nav: #4346554c; + --color-border-footer: #43465533; + --color-dot-red: #ffb4ab; + --color-dot-orange: #ffb596; + --color-dot-blue: #a4c9ff; + --color-gradient-start: rgba(180,197,255,1); + --color-gradient-end: rgba(255,181,150,1); + --font-body: "Geist", Helvetica; + --font-heading: "Space Grotesk", Helvetica; + --font-mono: "JetBrains Mono", Helvetica; + --font-label: "42dot Sans", Helvetica; + --radius-btn: 12px; + --radius-card: 16px; + --radius-full: 9999px; + --content-max: 1280px; + --content-narrow: 896px; + --transition-fast: 160ms ease; +} + +* { + -webkit-font-smoothing: antialiased; + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; +} + +html, body { + margin: 0px; + height: 100%; +} + +button:focus-visible { + outline: 2px solid #4a90e2; + outline-offset: 2px; +} + +a { + text-decoration: none; +} + +.skip-link { + position: absolute; + top: -100%; + left: 0; + z-index: 100; + padding: 8px 16px; + background: var(--color-bg-btn); + color: var(--color-text-btn); + font-family: var(--font-body); + font-size: 14px; + text-decoration: none; + transition: top 160ms ease; +} +.skip-link:focus { + top: 0; +} diff --git a/website/main.html b/website/main.html new file mode 100644 index 000000000..f6a3b90ca --- /dev/null +++ b/website/main.html @@ -0,0 +1,267 @@ + + + + + + + + + + + + + + +OpenHCS + + + + + + + + + + + + +
+
+
+
+OpenHCS +
+ +
+
+
+
+ +
+

OpenHCS

+
+
+

The open-standard framework for high-content screening. Transform raw multi-well plate
data from ImageXpress and Opera Phenix into actionable biological insights.

+
+
+ + +View Docs + +
+
+
+
+
+
+

Unified Bioimaging
Workflow

+
+
+

OpenHCS is a bioimage analysis platform for high-content screening datasets. It provides unified access to Python image processing libraries with automatic GPU acceleration and memory management for large-scale microscopy data analysis

+
+
+
+
+
+

Visual Pipeline Editor

+
+
+

Construct complex analysis pipelines with a simple no-code interface.

+
+
+
+
+
+
+

570+ Analysis Functions

+
+
+

All the industry standards from scikit-image analysis to full CellProfiler
pipelines

+
+
+
+
+
+
+ +Bioimaging workflow visualization +
+
+
+
+
+

Complete Analysis Toolkit In One App

+
+
+
+
+
+

High-Resolution Image Viewer

+
+
+

Handle multi-terabyte datasets with multi-level tiling and real-time panning.

+
+
+High-resolution image viewer interface +
+
+
+
+

Real-time Pipelines

+
+
+

Visualize every step of your image
transformation pipeline as it happens.

+
+
+
+Real-time pipeline visualization +
+
+
+
+
+
+

Analysis History Slider

+
+
+

Compare results across different pipeline versions and time points for fast iteration and troubleshooting.

+
+
+
+Analysis history comparison view +
+
+
+
+
+
+

Installation

+
+
+

Get started in seconds with pip

+
+
+
+
+ +
+
Python 3.11
+
+
+
+
+
1
+

# Basic installation with GUI, visualizers and GPU support

+
+
+
2
+
+
pip install openhcs[gui,viz,gpu]
+
+
+
+
3
+
+
+
1
+
# Launch the application
+
+
+
2
+
openhcs
+
+
+
3
+
+
+
+
+
+
+

Requirements

+
+
+

Python 3.8 or higher
Optional: CUDA-compatible GPU for acceleration
Supported OS: Windows, macOS, Linux

+
+
+
+
+

Quick Start

+
+
+

Install OpenHCS using pip (above)
Launch the GUI: openhcs
Load your microscopy images and start building pipelines

+
+
+
+
+
+
+

Get in Touch

+
+
+

For technical inquiries, academic licensing, or collaboration requests, please use the channels below.

+
+
+
+ +tristan.simas@mail.mcgill.ca + +
+ +
+ +github.com/OpenHCSDev/openhcs + +
+
+
+
+ +
+ + diff --git a/website/styles.css b/website/styles.css new file mode 100644 index 000000000..0b0377a87 --- /dev/null +++ b/website/styles.css @@ -0,0 +1,1387 @@ +/* ── Layout & Navigation ── */ + +.html-body { + display: flex; + flex-direction: column; + align-items: flex-start; + position: relative; + width: 100%; + min-height: 100vh; + overflow-x: hidden; + background-color: var(--color-bg-page); +} + +.html-body .main { + display: flex; + flex-direction: column; + align-self: stretch; + width: 100%; + height: auto; + gap: 0; + padding-top: 72px; +} + +.html-body .top-navigation-bar { + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; + width: 100%; + height: 72px; + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 10; + background-color: var(--color-bg-card); + border-bottom: 1px solid var(--color-border-nav); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); +} + +.html-body .container-20 { + display: flex; + align-items: center; + justify-content: space-between; + flex: 1; + margin: 0 auto; + padding: 0; + width: min(calc(100% - 64px), var(--content-max)); +} + +.html-body .container-21 { + display: inline-flex; + align-items: center; + flex: 0 0 auto; + gap: 32px; +} + +.html-body .div-2, +.html-body .link-margin { + display: inline-flex; + flex-direction: column; + align-items: flex-start; + flex: 0 0 auto; +} + +.html-body .nav-links { + display: flex; + align-items: center; + gap: 32px; +} + +.html-body .nav-toggle { + position: absolute; + opacity: 0; + pointer-events: none; + width: 0; + height: 0; +} + +.html-body .hamburger { + display: none; + flex-direction: column; + justify-content: center; + gap: 5px; + cursor: pointer; + padding: 8px; + z-index: 20; +} + +.html-body .hamburger span { + display: block; + width: 24px; + height: 2px; + background-color: var(--color-text-accent); + border-radius: 2px; + transition: transform var(--transition-fast), opacity var(--transition-fast); +} + +.html-body .nav-toggle:checked + .hamburger span:nth-child(1) { + transform: rotate(45deg) translate(5px, 5px); +} + +.html-body .nav-toggle:checked + .hamburger span:nth-child(2) { + opacity: 0; +} + +.html-body .nav-toggle:checked + .hamburger span:nth-child(3) { + transform: rotate(-45deg) translate(5px, -5px); +} + +.html-body .text-5 { + display: flex; + align-items: center; + font-family: var(--font-heading); + font-weight: 700; + color: var(--color-text-accent); + font-size: 24px; + letter-spacing: -0.6px; + line-height: 33.6px; + white-space: nowrap; + width: fit-content; + text-decoration: none; +} + +.html-body .text-6 { + display: flex; + align-items: center; + font-family: var(--font-body); + font-weight: 600; + color: var(--color-text-accent); + font-size: 16px; + letter-spacing: 0; + line-height: 24px; + white-space: nowrap; + width: fit-content; + text-decoration: none; +} + +/* ── Hero Section ── */ + +.html-body .hero-section { + display: flex; + flex-direction: column; + align-items: center; + gap: 16px; + width: 100%; + height: 504px; + padding: 120px 32px 46px; + position: relative; + margin: 0 auto; +} + +.html-body .overlay-blur { + position: absolute; + top: -96px; + left: calc(50% - 300px); + width: 600px; + height: 600px; + background-color: var(--color-bg-overlay); + border-radius: var(--radius-full); + filter: blur(60px); +} + +.html-body .div { + display: flex; + flex-direction: column; + align-items: center; + align-self: stretch; + width: 100%; + flex: 0 0 auto; +} + +.html-body .container { + display: flex; + flex-direction: column; + align-items: center; + max-width: 672px; + width: min(100%, 672px); + flex: 0 0 auto; +} + +.html-body .container-2 { + display: flex; + align-items: flex-start; + justify-content: center; + gap: 16.01px; + padding: 16px 0 0; + align-self: stretch; + width: 100%; + flex: 0 0 auto; +} + +.html-body .button { + all: unset; + box-sizing: border-box; + display: inline-flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 16px 32px 17.39px; + flex: 0 0 auto; + background-color: var(--color-bg-btn); + border-radius: var(--radius-btn); + cursor: pointer; +} + +.html-body .text-wrapper { + display: flex; + align-items: center; + justify-content: center; + font-family: var(--font-body); + font-weight: 600; + color: var(--color-text-btn); + font-size: 18px; + text-align: center; + letter-spacing: 0; + line-height: 32.4px; + white-space: nowrap; + width: fit-content; +} + +.html-body .div-wrapper { + all: unset; + box-sizing: border-box; + display: inline-flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 15px 32px 16.39px; + flex: 0 0 auto; + border-radius: var(--radius-btn); + border: 1px solid var(--color-border); + cursor: pointer; +} + +.html-body .text-2 { + display: flex; + align-items: center; + justify-content: center; + font-family: var(--font-body); + font-weight: 600; + color: var(--color-text-primary); + font-size: 18px; + text-align: center; + letter-spacing: 0; + line-height: 32.4px; + white-space: nowrap; + width: fit-content; +} + +/* ── Capabilities Section ── */ + +.html-body .section-capabilities { + display: flex; + flex-direction: column; + align-items: flex-start; + width: 100%; + height: auto; + padding: 120px 32px 112px; + background-color: var(--color-bg-section); +} + +.html-body .container-3 { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + grid-template-rows: 401.19px; + align-items: stretch; + gap: 32px; + margin: 0 auto; + width: min(calc(100% - 64px), var(--content-max)); +} + +.html-body .container-4 { + grid-row: 1 / 2; + grid-column: 1 / 2; + align-self: center; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 32px; + width: 100%; + height: fit-content; + min-width: 0; +} + +.html-body .div-wrapper-2 { + display: flex; + flex-direction: column; + align-items: flex-start; + align-self: stretch; + width: 100%; + flex: 0 0 auto; +} + +.html-body .unified-bioimaging { + align-self: stretch; + font-family: var(--font-heading); + font-weight: 300; + color: var(--color-text-primary); + font-size: 48px; + letter-spacing: 0; + line-height: 57.6px; + margin: 0; +} + +.html-body .p { + display: flex; + align-items: center; + align-self: stretch; + font-family: var(--font-body); + font-weight: 400; + color: var(--color-text-secondary); + font-size: 16px; + letter-spacing: 0; + line-height: 26px; +} + +.html-body .container-5 { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 16px; + align-self: stretch; + width: 100%; + flex: 0 0 auto; +} + +.html-body .container-6 { + display: flex; + align-items: flex-start; + gap: 16px; + flex-wrap: wrap; + align-self: stretch; + width: 100%; + flex: 0 0 auto; +} + +.html-body .text-3 { + display: flex; + align-items: center; + width: fit-content; + font-family: var(--font-heading); + font-weight: 400; + color: var(--color-text-primary); + font-size: 18px; + letter-spacing: 0; + line-height: 28px; + white-space: normal; + overflow-wrap: anywhere; + margin: 0; +} + +.html-body .container-7 { + grid-row: 1 / 2; + grid-column: 2 / 3; + align-self: center; + display: flex; + flex-direction: column; + align-items: flex-start; + width: 100%; + height: fit-content; + min-width: 0; + position: relative; +} + +.html-body .gradient-blur { + position: absolute; + width: calc(100% + 8px); + height: calc(100% + 8px); + top: -4px; + left: -4px; + border-radius: var(--radius-card); + filter: blur(4px); + background: linear-gradient(90deg, var(--color-gradient-start) 0%, var(--color-gradient-end) 100%); + opacity: 0.25; +} + +.html-body .background-border { + display: block; + align-self: stretch; + width: 100%; + height: 333px; + object-fit: cover; + border-radius: var(--radius-card); + border: 1px solid var(--color-border); +} + +/* ── Features Section ── */ + +.html-body .section-feature-demo { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 36px; + width: 100%; + height: auto; + padding: 59px 32px 112px; +} + +.html-body .text-wrapper-3 { + display: flex; + align-items: center; + justify-content: center; + width: fit-content; + font-family: var(--font-heading); + font-weight: 300; + color: var(--color-text-primary); + font-size: 48px; + text-align: center; + letter-spacing: 0; + line-height: 57.6px; + white-space: normal; + overflow-wrap: anywhere; + word-break: normal; + max-width: 100%; + margin: 0; +} + +.html-body .container-8 { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + grid-template-rows: auto auto; + align-items: stretch; + gap: 32px; + margin: 0 auto; + width: min(calc(100% - 64px), var(--content-max)); +} + +.html-body .image-viewer, +.html-body .real-time, +.html-body .history-slider { + border-radius: var(--radius-card); + overflow: hidden; + background-color: var(--color-bg-card); + border: 1px solid var(--color-border); + backdrop-filter: blur(6px); + -webkit-backdrop-filter: blur(6px); + width: 100%; + height: auto; +} + +.html-body .image-viewer { + grid-row: 1 / 2; + grid-column: 1 / 3; + display: flex; + flex-direction: column; + align-items: flex-start; + align-self: stretch; + min-width: 0; + min-height: 490px; +} + +.html-body .horizontal-border { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 8px; + padding: 24px; + align-self: stretch; + width: 100%; + flex: 0 0 auto; + border-bottom: 1px solid var(--color-border); +} + +.html-body .text-wrapper-4 { + display: flex; + align-items: center; + align-self: stretch; + font-family: var(--font-heading); + font-weight: 400; + color: var(--color-text-primary); + font-size: 16px; + letter-spacing: 0; + line-height: 24px; + white-space: normal; + overflow-wrap: anywhere; + max-width: 100%; + margin: 0; +} + +.html-body .background { + display: block; + align-self: stretch; + width: 100%; + height: 428.88px; + object-fit: cover; + border-bottom: 1px solid var(--color-border); + flex: 1 1 auto; + min-height: 360px; +} + +.html-body .real-time { + grid-row: 1 / 2; + grid-column: 3 / 5; + display: flex; + flex-direction: column; + align-items: flex-start; + align-self: stretch; + min-width: 0; + min-height: 490px; +} + +.html-body .container-wrapper { + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; + align-self: stretch; + width: 100%; + height: auto; + min-height: 360px; + padding: 32px 24px; + background-color: var(--color-bg-dark); + flex: 1 1 auto; +} + +.html-body .container-9 { + display: block; + width: 100%; + height: 360px; + object-fit: cover; +} + +.html-body .history-slider { + grid-row: 2 / 3; + grid-column: 1 / 5; + justify-self: start; + align-self: start; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 32px; + padding: 24px; +} + +.html-body .text-4 { + display: flex; + align-items: center; + width: 100%; + font-family: var(--font-heading); + font-weight: 400; + color: var(--color-text-primary); + font-size: 16px; + letter-spacing: 0; + line-height: 24px; + white-space: normal; + overflow-wrap: anywhere; + max-width: 100%; + margin: 0; +} + +.html-body .container-10 { + display: flex; + align-items: center; + justify-content: flex-start; + gap: 16px; + flex-wrap: wrap; + align-self: stretch; + width: 100%; + flex: 0 0 auto; +} + +.html-body .background-2 { + display: block; + align-self: stretch; + width: 100%; + height: 403px; + object-fit: cover; + border-bottom: 1px solid var(--color-border); + flex: 1 1 auto; + min-height: 360px; +} + +/* ── Installation & Terminal ── */ + +.html-body .professional { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 28px; + width: min(calc(100% - 64px), var(--content-narrow)); + height: auto; + margin: 0 auto; +} + +.html-body .container-11 { + display: flex; + flex-direction: column; + align-items: stretch; + gap: 0; + align-self: stretch; + width: 100%; + flex: 0 0 auto; +} + +.html-body .overlay-shadow { + display: flex; + flex-direction: column; + align-items: flex-start; + align-self: stretch; + width: 100%; + flex: 0 0 auto; + background-color: #ffffff01; + border-radius: var(--radius-card); + overflow: hidden; + box-shadow: 0 25px 50px -12px #00000040; +} + +.html-body .terminal-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 12px 16px 7px; + background-color: var(--color-bg-terminal-head); + align-self: stretch; + width: 100%; + flex: 0 0 auto; +} + +.html-body .container-12 { + display: inline-flex; + align-items: flex-start; + gap: 8px; + flex: 0 0 auto; +} + +.html-body .terminal-dot { + width: 12px; + height: 12px; + border-radius: var(--radius-full); +} + +.html-body .terminal-dot:nth-child(1) { + background-color: var(--color-dot-red); +} + +.html-body .terminal-dot:nth-child(2) { + background-color: var(--color-dot-orange); +} + +.html-body .terminal-dot:nth-child(3) { + background-color: var(--color-dot-blue); +} + +.html-body .text-wrapper-7 { + display: flex; + align-items: center; + justify-content: center; + width: 136.83px; + font-family: var(--font-label); + font-weight: 400; + color: var(--color-text-secondary); + font-size: 12px; + text-align: center; + letter-spacing: 0; + line-height: 16px; +} + +.html-body .terminal-body { + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 24px; + background-color: var(--color-bg-dark); + align-self: stretch; + width: 100%; + flex: 0 0 auto; +} + +.html-body .container-13 { + display: inline-flex; + flex-direction: column; + align-items: flex-start; + align-self: stretch; + flex: 0 0 auto; + opacity: 0.3; + min-width: 0; +} + +.html-body .text-wrapper-8 { + display: flex; + align-items: center; + font-family: var(--font-mono); + font-weight: 400; + color: var(--color-text-secondary); + font-size: 14px; + letter-spacing: 0; + line-height: 21px; + white-space: nowrap; + width: fit-content; +} + +.html-body .container-14 { + display: inline-flex; + flex-direction: column; + align-items: flex-start; + align-self: stretch; + flex: 0 0 auto; + min-width: 0; + flex: 1 1 0; +} + +.html-body .text-wrapper-9 { + display: flex; + align-items: center; + width: fit-content; + font-family: var(--font-mono); + font-weight: 400; + font-size: 14px; + letter-spacing: 0; + line-height: 21px; + white-space: normal; + overflow-wrap: anywhere; +} + +.html-body .text-wrapper-11 { + display: flex; + align-items: center; + width: fit-content; + font-family: var(--font-mono); + font-weight: 400; + font-size: 14px; + letter-spacing: 0; + line-height: 21px; + white-space: normal; + overflow-wrap: anywhere; +} + +.html-body .text-wrapper-9 { + color: var(--color-text-primary); +} + +.html-body .text-wrapper-11 { + color: var(--color-text-terminal-blue); +} + +.html-body .pip-install-openhcs { + display: inline; + font-family: var(--font-mono); + font-weight: 400; + color: transparent; + font-size: 14px; + letter-spacing: 0; + line-height: 21px; + white-space: nowrap; +} + +.html-body .span { + color: var(--color-text-accent); +} + +.html-body .text-wrapper-10 { + color: var(--color-text-terminal-blue); +} + +.html-body .container-15 { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 34px; + align-self: stretch; + margin: 0 auto; + width: min(calc(100% - 64px), var(--content-max)); +} + +.html-body .requirements, +.html-body .requirements-2 { + display: flex; + flex-direction: column; + align-items: flex-start; + width: 100%; + min-height: 0; + height: auto; + background-color: var(--color-bg-card); + border: 1px solid var(--color-border); + backdrop-filter: blur(6px); + -webkit-backdrop-filter: blur(6px); + border-radius: var(--radius-card); +} + +.html-body .requirements { + gap: 30px; + padding: 24px 24px 16px; +} + +.html-body .requirements-2 { + gap: 26px; + padding: 24px; + margin-bottom: 0; +} + +.html-body .heading { + display: flex; + align-items: center; + gap: 8px; + align-self: stretch; + width: 100%; + flex: 0 0 auto; +} + +.html-body .text-wrapper-12 { + display: flex; + align-items: center; + width: fit-content; + font-family: var(--font-heading); + font-weight: 400; + color: var(--color-text-accent); + font-size: 16px; + letter-spacing: 0; + line-height: 24px; + white-space: normal; + overflow-wrap: anywhere; + max-width: 100%; + margin: 0; +} + +.html-body .python-or-higher-wrapper { + display: flex; + align-items: center; + gap: 8px; + align-self: stretch; + width: 100%; + height: auto; +} + +.html-body .text-wrapper-13 { + width: 100%; + height: auto; + font-family: var(--font-heading); + font-weight: 400; + color: var(--color-text-primary); + font-size: 16px; + letter-spacing: 0; + line-height: 24px; + overflow-wrap: anywhere; + max-width: 100%; + white-space: normal; +} + +.html-body .install-openhcs-wrapper { + display: flex; + align-items: center; + gap: 8px; + align-self: stretch; + width: 100%; + height: auto; +} + +/* ── Contact & Footer ── */ + +.html-body .get-in-touch-section { + display: flex; + flex-direction: column; + align-items: center; + gap: 16px; + width: 100%; + height: auto; + padding: 70px 32px 47px; + margin: 0 auto; +} + +.html-body .container-16 { + display: flex; + flex-direction: column; + align-items: center; + padding: 0 0 16px; + align-self: stretch; + width: 100%; + flex: 0 0 auto; +} + +.html-body .overlay-border { + display: flex; + align-items: center; + gap: 16px 24px; + padding: 24px 28px; + width: fit-content; + max-width: 100%; + align-self: center; + border-radius: var(--radius-btn); + border: 1px solid var(--color-border); + background-color: var(--color-bg-card); + backdrop-filter: blur(6px); + -webkit-backdrop-filter: blur(6px); + font-style: normal; + justify-content: center; +} + +.html-body .link-wrapper { + display: inline-flex; + align-items: center; + gap: 11.99px; + flex: 0 0 auto; + justify-content: center; +} + +.html-body .link { + display: inline-flex; + flex-direction: column; + align-items: center; + flex: 0 0 auto; + text-decoration: none; +} + +.html-body .vertical-divider { + width: 1px; + height: 24px; + background-color: var(--color-border); + flex: 0 0 auto; +} + +.html-body .footer { + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 2px 0 32px; + align-self: stretch; + width: 100%; + flex: 0 0 auto; + background-color: var(--color-bg-dark); + border-top: 1px solid var(--color-border-footer); +} + +.html-body .container-17 { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + grid-template-rows: 128px; + gap: 32px; + padding: 0 32px; + margin: 0 auto; + width: min(calc(100% - 64px), var(--content-max)); +} + +.html-body .container-18 { + grid-row: 1 / 2; + grid-column: 1 / 2; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 15.25px; + padding: 0 0 10.16px; + width: 100%; + height: fit-content; +} + +.html-body .text-wrapper-15 { + display: flex; + align-items: center; + align-self: stretch; + font-family: var(--font-heading); + font-weight: 700; + color: var(--color-text-primary); + font-size: 24px; + letter-spacing: 0; + line-height: 33.6px; +} + +.html-body .container-19 { + grid-row: 1 / 2; + grid-column: 4 / 5; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 16px; + width: 100%; + height: fit-content; +} + +.html-body .text-wrapper-17 { + display: flex; + align-items: center; + align-self: stretch; + font-family: var(--font-body); + font-weight: 600; + color: var(--color-text-accent); + font-size: 16px; + letter-spacing: 0; + line-height: 24px; +} + +.html-body .list { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 8px; + align-self: stretch; + width: 100%; + flex: 0 0 auto; +} + +/* ── Shared Text & Utility Overrides ── */ + +.html-body .text, +.html-body .text-wrapper-2, +.html-body .all-the-industry, +.html-body .text-wrapper-5, +.html-body .visualize-every-step, +.html-body .text-wrapper-6, +.html-body .text-wrapper-14, +.html-body .text-wrapper-16 { + font-family: var(--font-body); + font-weight: 400; + color: var(--color-text-secondary); + font-size: 16px; + letter-spacing: 0; + line-height: 24px; + white-space: normal; + overflow-wrap: anywhere; +} + +.html-body .text { + text-align: center; + width: fit-content; +} + +.html-body .text-wrapper-2 { + display: flex; + align-items: center; + width: fit-content; + text-decoration: none; +} + +.html-body .all-the-industry { + width: 100%; + overflow-wrap: anywhere; +} + +.html-body .text-wrapper-5 { + display: flex; + align-items: center; + align-self: stretch; + text-decoration: none; +} + +.html-body .visualize-every-step { + align-self: stretch; +} + +.html-body .text-wrapper-6 { + display: flex; + align-items: center; + justify-content: center; + width: fit-content; + text-align: center; + max-width: 100%; +} + +.html-body .text-wrapper-14 { + display: flex; + align-items: center; + justify-content: center; + width: fit-content; + text-align: center; + white-space: nowrap; + text-decoration: none; +} + +.html-body .text-wrapper-16 { + display: flex; + align-items: center; + align-self: stretch; + font-size: 14px; + line-height: 22.8px; +} + +.html-body .container-3, +.html-body .container-8, +.html-body .container-15, +.html-body .container-17, +.html-body .container-20 { + margin-left: auto; + margin-right: auto; +} + +/* ── Interactions ── */ + +@media (prefers-reduced-motion: no-preference) { + .html-body .button, + .html-body .div-wrapper, + .html-body .text-5, + .html-body .text-6, + .html-body .text-wrapper-2, + .html-body .text-wrapper-5, + .html-body .link, + .html-body .hamburger { + transition: transform var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast); + } + + .html-body .button:hover, + .html-body .div-wrapper:hover { + transform: translateY(-1px); + } + + .html-body .button:hover { + background-color: var(--color-bg-btn-hover); + } + + .html-body .div-wrapper:hover { + border-color: #5b6072; + } + + .html-body .text-5:hover, + .html-body .text-6:hover, + .html-body .text-wrapper-2:hover, + .html-body .text-wrapper-5:hover, + .html-body .link:hover, + .html-body .hamburger:hover { + opacity: 0.82; + } +} + +.html-body .button:focus-visible, +.html-body .div-wrapper:focus-visible, +.html-body .text-5:focus-visible, +.html-body .text-6:focus-visible, +.html-body .text-wrapper-2:focus-visible, +.html-body .text-wrapper-5:focus-visible, +.html-body .link:focus-visible, +.html-body .hamburger:focus-visible { + outline: 2px solid #4a90e2; + outline-offset: 2px; +} + +/* ── Responsive ── */ + +@media (max-width: 1280px) { + .html-body .hero-section, + .html-body .section-capabilities, + .html-body .section-feature-demo, + .html-body .professional, + .html-body .get-in-touch-section, + .html-body .container-17, + .html-body .container-20 { + width: min(calc(100% - 48px), var(--content-max)); + } + + .html-body .top-navigation-bar { + width: 100%; + } + + .html-body .professional, + .html-body .get-in-touch-section { + width: min(calc(100% - 64px), var(--content-narrow)); + } + + .html-body .requirements, + .html-body .requirements-2 { + width: 100%; + } +} + +@media (max-width: 960px) { + .html-body .hero-section, + .html-body .section-capabilities, + .html-body .section-feature-demo, + .html-body .professional, + .html-body .get-in-touch-section, + .html-body .container-3, + .html-body .container-8, + .html-body .container-15, + .html-body .container-17, + .html-body .container-20 { + width: min(calc(100% - 32px), 100%); + } + + .html-body .container-3, + .html-body .container-8, + .html-body .container-17 { + grid-template-columns: 1fr; + } + + .html-body .container-3 { + grid-template-rows: auto; + } + + .html-body .container-4, + .html-body .container-7, + .html-body .image-viewer, + .html-body .real-time, + .html-body .history-slider, + .html-body .container-18, + .html-body .container-19 { + grid-column: 1 / -1; + grid-row: auto; + width: 100%; + } + + .html-body .container-3, + .html-body .container-8 { + gap: 24px; + } + + .html-body .text-wrapper-3, + .html-body .text-wrapper-6, + .html-body .text-wrapper-12 { + white-space: normal; + text-wrap: balance; + } + + .html-body .overlay-border { + flex-direction: row; + align-items: center; + justify-content: center; + } + + .html-body .vertical-divider { + width: 1px; + height: 24px; + } +} + +@media (max-width: 768px) { + .html-body .hamburger { + display: flex; + } + + .html-body .nav-links { + display: none; + position: fixed; + top: 72px; + left: 0; + right: 0; + flex-direction: column; + align-items: flex-start; + gap: 0; + padding: 16px 32px; + background-color: var(--color-bg-card); + border-bottom: 1px solid var(--color-border-nav); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + } + + .html-body .nav-toggle:checked ~ .nav-links { + display: flex; + } + + .html-body .text-wrapper-3, + .html-body .unified-bioimaging { + font-size: 36px; + line-height: 43.2px; + } + + .html-body .hero-section { + height: auto; + min-height: auto; + padding: 80px 24px 40px; + } + + .html-body .section-capabilities { + padding: 80px 24px; + } + + .html-body .section-feature-demo { + padding: 48px 24px 80px; + } + + .html-body .get-in-touch-section { + padding: 48px 24px; + } + + .html-body .container-21 { + gap: 0; + } + + .html-body .background-border { + height: auto; + aspect-ratio: 600 / 400; + } + + .html-body .background { + height: auto; + aspect-ratio: 800 / 429; + } + + .html-body .background-2 { + height: auto; + aspect-ratio: 1200 / 403; + } + + .html-body .container-9 { + height: auto; + aspect-ratio: 800 / 360; + } +} + +@media (max-width: 480px) { + .html-body .text-wrapper-3, + .html-body .unified-bioimaging { + font-size: 28px; + line-height: 33.6px; + } + + .html-body .hero-section { + padding: 60px 16px 32px; + } + + .html-body .section-capabilities { + padding: 48px 16px; + } + + .html-body .section-feature-demo { + padding: 32px 16px 64px; + } + + .html-body .get-in-touch-section { + padding: 32px 16px; + } + + .html-body .container-2 { + flex-direction: column; + align-items: center; + } + + .html-body .button, + .html-body .div-wrapper { + width: 100%; + max-width: 320px; + } + + .html-body .overlay-border { + flex-direction: column; + gap: 16px; + width: 100%; + padding: 16px; + } + + .html-body .vertical-divider { + width: 80%; + height: 1px; + } + + .html-body .container-3, + .html-body .container-8 { + gap: 16px; + } + + .html-body .terminal-body { + padding: 16px; + overflow: hidden; + } + + .html-body .pip-install-openhcs { + white-space: normal; + } + + .html-body .container-21 { + gap: 0; + } + + .html-body .image-viewer, + .html-body .real-time { + min-height: auto; + } + + .html-body .background, + .html-body .background-2, + .html-body .container-9 { + min-height: auto; + } + + .html-body .container-wrapper { + padding: 24px 16px; + min-height: auto; + } + + .html-body .overlay-blur { + width: 300px; + height: 300px; + left: calc(50% - 150px); + top: -48px; + } + + .html-body .hero-section { + height: auto; + } + + .html-body .container-6 .div-2, + .html-body .container-10 .div-2 { + width: 100%; + } + + .html-body .container-6 .text-wrapper-2, + .html-body .container-10 .text-wrapper-2 { + width: 100%; + } +}