From 23f602e69494d143f8d589e59b74d246e2843f4d Mon Sep 17 00:00:00 2001 From: Jathav Puvirajan Date: Tue, 16 Jun 2026 14:19:26 -0400 Subject: [PATCH 1/3] Create globals.css --- website/globals.css | 116 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 116 insertions(+) create mode 100644 website/globals.css 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; +} From 3225977d813e39d6dea70287987177733b085cd1 Mon Sep 17 00:00:00 2001 From: Jathav Puvirajan Date: Tue, 16 Jun 2026 14:19:51 -0400 Subject: [PATCH 2/3] Add rest of website files --- website/main.html | 267 ++++++++ website/styles.css | 1525 ++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 1792 insertions(+) create mode 100644 website/main.html create mode 100644 website/styles.css diff --git a/website/main.html b/website/main.html new file mode 100644 index 000000000..b3525bd0f --- /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..573c2cca6 --- /dev/null +++ b/website/styles.css @@ -0,0 +1,1525 @@ +.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 { + position: relative; + align-self: stretch; + width: 100%; + height: auto; + display: flex; + flex-direction: column; + gap: 0; + padding-top: 72px; +} + +.html-body .top-navigation-bar { + display: flex; + flex-direction: column; + width: 100%; + height: 72px; + align-items: flex-start; + justify-content: center; + 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; + width: min(calc(100% - 64px), var(--content-max)); + align-items: center; + justify-content: space-between; + padding: 0px; + position: relative; + flex: 1; + flex-grow: 1; + margin: 0 auto; +} + +.html-body .container-21 { + display: inline-flex; + align-items: center; + position: relative; + flex: 0 0 auto; + gap: 32px; +} + +.html-body .div-2 { + display: inline-flex; + flex-direction: column; + align-items: flex-start; + position: relative; + flex: 0 0 auto; +} + +.html-body .link-margin { + display: inline-flex; + flex-direction: column; + align-items: flex-start; + position: relative; + 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; + margin-top: -1px; + 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; + position: relative; + width: fit-content; + text-decoration: none; +} + +.html-body .text-6 { + display: flex; + align-items: center; + margin-top: -1px; + 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; + position: relative; + width: fit-content; + text-decoration: none; +} + +.html-body .hero-section { + display: flex; + flex-direction: column; + width: min(calc(100% - 64px), var(--content-max)); + height: 504px; + align-items: center; + gap: 16px; + padding: 120px 32px 46px; + position: relative; + top: auto; + left: auto; + transform: none; + 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 { + flex-direction: column; + align-items: center; + flex: 0 0 auto; + display: flex; + position: relative; + align-self: stretch; + width: 100%; +} + +.html-body .container { + display: flex; + flex-direction: column; + max-width: 672px; + width: min(100%, 672px); + align-items: center; + position: relative; + flex: 0 0 auto; +} + +.html-body .container-2 { + display: flex; + align-items: flex-start; + justify-content: center; + gap: 16.01px; + padding: 16px 0px 0px; + position: relative; + 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; + position: relative; + 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; + margin-top: -1px; + 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; + position: relative; + 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; + position: relative; + 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; + position: relative; + width: fit-content; +} + +.html-body .section-capabilities, +.html-body .section-feature-demo, +.html-body .professional, +.html-body .get-in-touch-section { + position: relative; + top: auto; + left: auto; + transform: none; + margin: 0 auto; + margin-bottom: 0; +} + +.html-body .section-capabilities { + display: flex; + flex-direction: column; + width: min(calc(100% - 64px), var(--content-max)); + height: auto; + align-items: flex-start; + 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; + max-width: var(--content-max); + height: fit-content; + gap: 32px; + margin: 0 auto; + width: min(calc(100% - 64px), var(--content-max)); + align-items: stretch; +} + +.html-body .container-4 { + position: relative; + grid-row: 1 / 2; + grid-column: 1 / 2; + align-self: center; + width: 100%; + min-width: 0; + height: fit-content; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 32px; +} + +.html-body .div-wrapper-2 { + flex-direction: column; + align-items: flex-start; + flex: 0 0 auto; + display: flex; + position: relative; + align-self: stretch; + width: 100%; +} + +.html-body .unified-bioimaging { + position: relative; + align-self: stretch; + margin-top: -1px; + 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 { + position: relative; + display: flex; + align-items: center; + align-self: stretch; + margin-top: -1px; + 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; + position: relative; + align-self: stretch; + width: 100%; + flex: 0 0 auto; +} + +.html-body .container-6 { + display: flex; + align-items: flex-start; + gap: 16px; + position: relative; + align-self: stretch; + width: 100%; + flex: 0 0 auto; + flex-wrap: wrap; +} + +.html-body .text-3 { + position: relative; + display: flex; + align-items: center; + width: fit-content; + margin-top: -1px; + 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 .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 { + margin-top: -1px; + text-align: center; + position: relative; + width: fit-content; +} + +.html-body .text-wrapper-2 { + position: relative; + display: flex; + align-items: center; + width: fit-content; + margin-top: -1px; + text-decoration: none; +} + +.html-body .all-the-industry { + position: relative; + width: 100%; + margin-top: -1px; + overflow-wrap: anywhere; +} + +.html-body .text-wrapper-5 { + position: relative; + display: flex; + align-items: center; + align-self: stretch; + margin-top: -1px; + text-decoration: none; +} + +.html-body .visualize-every-step { + position: relative; + align-self: stretch; + margin-top: -1px; +} + +.html-body .text-wrapper-6 { + position: relative; + display: flex; + align-items: center; + justify-content: center; + width: fit-content; + margin-top: -1px; + text-align: center; + max-width: 100%; +} + +.html-body .text-wrapper-14 { + position: relative; + display: flex; + align-items: center; + justify-content: center; + width: fit-content; + margin-top: -1px; + text-align: center; + white-space: nowrap; + text-decoration: none; +} + +.html-body .text-wrapper-16 { + position: relative; + display: flex; + align-items: center; + align-self: stretch; + margin-top: -1px; + font-size: 14px; + line-height: 22.8px; +} + +.html-body .container-7 { + position: relative; + grid-row: 1 / 2; + grid-column: 2 / 3; + align-self: center; + width: 100%; + min-width: 0; + height: fit-content; + display: flex; + flex-direction: column; + align-items: flex-start; +} + +.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; + position: relative; + align-self: stretch; + width: 100%; + height: 333px; + object-fit: cover; + border-radius: var(--radius-card); + border: 1px solid var(--color-border); +} + +.html-body .section-feature-demo { + display: flex; + flex-direction: column; + width: min(calc(100% - 64px), var(--content-max)); + height: auto; + align-items: flex-start; + gap: 36px; + padding: 59px 32px 112px; +} + +.html-body .text-wrapper-3 { + position: relative; + display: flex; + align-items: center; + justify-content: center; + width: fit-content; + margin: 0; + margin-top: -1px; + 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%; +} + +.html-body .container-8 { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + grid-template-rows: auto auto; + align-items: stretch; + height: fit-content; + 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, +.html-body .requirements, +.html-body .requirements-2, +.html-body .overlay-border { + 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, +.html-body .real-time, +.html-body .history-slider { + border-radius: var(--radius-card); + overflow: hidden; +} + +.html-body .image-viewer { + position: relative; + grid-row: 1 / 2; + grid-column: 1 / 3; + min-width: 0; + display: flex; + flex-direction: column; + align-items: flex-start; + align-self: stretch; + min-height: 490px; +} + +.html-body .horizontal-border { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 8px; + padding: 24px; + position: relative; + align-self: stretch; + width: 100%; + flex: 0 0 auto; + border-bottom: 1px solid var(--color-border); +} + +.html-body .text-wrapper-4 { + position: relative; + display: flex; + align-items: center; + align-self: stretch; + margin: 0; + margin-top: -1px; + 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%; +} + +.html-body .background { + display: block; + position: relative; + 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; + align-self: stretch; + min-width: 0; + flex-direction: column; + align-items: flex-start; + position: relative; + display: flex; + min-height: 490px; +} + +.html-body .container-wrapper { + display: flex; + flex-direction: column; + height: auto; + min-height: 360px; + align-items: flex-start; + justify-content: center; + padding: 40px 24px; + position: relative; + align-self: stretch; + width: 100%; + background-color: var(--color-bg-dark); + flex: 1 1 auto; + padding-top: 32px; + padding-bottom: 32px; +} + +.html-body .container-9 { + display: block; + width: 100%; + height: 360px; + object-fit: cover; +} + +.html-body .history-slider { + position: relative; + 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; + margin: 0; + margin-top: -1px; + 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; + position: relative; + width: 100%; + max-width: 100%; +} + +.html-body .container-10 { + display: flex; + align-items: center; + justify-content: flex-start; + gap: 16px; + flex-wrap: wrap; + position: relative; + align-self: stretch; + width: 100%; + flex: 0 0 auto; +} + +.html-body .background-2 { + display: block; + position: relative; + align-self: stretch; + width: 100%; + height: 403px; + object-fit: cover; + border-bottom: 1px solid var(--color-border); + flex: 1 1 auto; + min-height: 360px; +} + +.html-body .professional { + display: flex; + flex-direction: column; + width: min(calc(100% - 64px), var(--content-narrow)); + height: auto; + align-items: flex-start; + gap: 28px; +} + +.html-body .container-11 { + display: flex; + flex-direction: column; + align-items: stretch; + gap: 0; + position: relative; + align-self: stretch; + width: 100%; + flex: 0 0 auto; +} + +.html-body .overlay-shadow { + display: flex; + flex-direction: column; + align-items: flex-start; + position: relative; + align-self: stretch; + width: 100%; + flex: 0 0 auto; + background-color: #ffffff01; + border-radius: var(--radius-card); + overflow: hidden; + box-shadow: 0px 25px 50px -12px #00000040; +} + +.html-body .terminal-header { + align-items: center; + justify-content: space-between; + padding: 12px 16px 7px; + background-color: var(--color-bg-terminal-head); + display: flex; + position: relative; + align-self: stretch; + width: 100%; + flex: 0 0 auto; +} + +.html-body .container-12 { + display: inline-flex; + align-items: flex-start; + gap: 8px; + position: relative; + flex: 0 0 auto; +} + +.html-body .background-3 { + position: relative; + width: 12px; + height: 12px; + background-color: var(--color-dot-red); + border-radius: var(--radius-full); +} + +.html-body .background-4 { + position: relative; + width: 12px; + height: 12px; + background-color: var(--color-dot-orange); + border-radius: var(--radius-full); +} + +.html-body .background-5 { + position: relative; + width: 12px; + height: 12px; + background-color: var(--color-dot-blue); + border-radius: var(--radius-full); +} + +.html-body .text-wrapper-7 { + position: relative; + display: flex; + align-items: center; + justify-content: center; + width: 136.83px; + margin-top: -1px; + 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 { + flex-direction: column; + align-items: flex-start; + padding: 24px; + background-color: var(--color-bg-dark); + display: flex; + position: relative; + align-self: stretch; + width: 100%; + flex: 0 0 auto; +} + +.html-body .container-13 { + display: inline-flex; + flex-direction: column; + align-items: flex-start; + position: relative; + align-self: stretch; + flex: 0 0 auto; + opacity: 0.3; + min-width: 0; +} + +.html-body .text-wrapper-8 { + display: flex; + align-items: center; + margin-top: -1px; + 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; + position: relative; + width: fit-content; +} + +.html-body .container-14 { + display: inline-flex; + flex-direction: column; + align-items: flex-start; + position: relative; + align-self: stretch; + flex: 0 0 auto; + min-width: 0; + flex: 1 1 0; +} + +.html-body .text-wrapper-9 { + position: relative; + display: flex; + align-items: center; + width: fit-content; + margin-top: -1px; + font-family: var(--font-mono); + font-weight: 400; + color: var(--color-text-primary); + font-size: 14px; + letter-spacing: 0; + line-height: 21px; + white-space: nowrap; +} + +.html-body .text-wrapper-11 { + position: relative; + display: flex; + align-items: center; + width: fit-content; + margin-top: -1px; + font-family: var(--font-mono); + font-weight: 400; + color: var(--color-text-terminal-blue); + font-size: 14px; + letter-spacing: 0; + line-height: 21px; + white-space: nowrap; +} + +.html-body .pip-install-openhcs { + position: relative; + display: inline; + margin-top: -1px; + 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; + height: auto; + align-items: flex-start; + gap: 34px; + position: relative; + align-self: stretch; + width: 100%; + margin: 0 auto; + width: min(calc(100% - 64px), var(--content-max)); +} + +.html-body .requirements { + display: flex; + flex-direction: column; + width: 100%; + min-height: 0; + height: auto; + align-items: flex-start; + gap: 30px; + padding: 24px 24px 16px; + position: relative; + border-radius: var(--radius-card); +} + +.html-body .requirements-2 { + flex-direction: column; + width: 100%; + min-height: 0; + height: auto; + align-items: flex-start; + gap: 26px; + padding: 24px; + margin-bottom: 0; + border-radius: var(--radius-card); + position: relative; + display: flex; +} + +.html-body .heading { + align-items: center; + gap: 8px; + flex: 0 0 auto; + display: flex; + position: relative; + align-self: stretch; + width: 100%; +} + +.html-body .text-wrapper-12 { + align-items: center; + width: fit-content; + margin: 0; + margin-top: -1px; + font-family: var(--font-heading); + font-weight: 400; + color: var(--color-text-accent); + font-size: 16px; + letter-spacing: 0; + line-height: 24px; + white-space: nowrap; + position: relative; + display: flex; + white-space: normal; + overflow-wrap: anywhere; + max-width: 100%; +} + +.html-body .python-or-higher-wrapper { + height: auto; + align-items: center; + gap: 8px; + display: flex; + position: relative; + align-self: stretch; + width: 100%; +} + +.html-body .text-wrapper-13 { + position: relative; + 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 { + height: auto; + align-items: center; + gap: 8px; + display: flex; + position: relative; + align-self: stretch; + width: 100%; +} + +.html-body .get-in-touch-section { + display: flex; + flex-direction: column; + width: min(calc(100% - 64px), var(--content-narrow)); + height: auto; + align-items: center; + gap: 16px; + padding: 70px 32px 47px; +} + +.html-body .container-16 { + display: flex; + flex-direction: column; + align-items: center; + padding: 0px 0px 16px; + position: relative; + align-self: stretch; + width: 100%; + flex: 0 0 auto; +} + +.html-body .overlay-border { + display: flex; + align-items: center; + gap: 16px 24px; + padding: 24px 28px; + position: relative; + width: fit-content; + max-width: 100%; + align-self: center; + border-radius: var(--radius-btn); + font-style: normal; + justify-content: center; +} + +.html-body .link-wrapper { + display: inline-flex; + align-items: center; + gap: 11.99px; + position: relative; + flex: 0 0 auto; + justify-content: center; +} + +.html-body .link { + display: inline-flex; + flex-direction: column; + align-items: center; + position: relative; + flex: 0 0 auto; + text-decoration: none; +} + +.html-body .vertical-divider { + position: relative; + 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 0px 32px; + position: relative; + 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; + width: min(calc(100% - 64px), var(--content-max)); + height: fit-content; + gap: 32px; + padding: 0px 32px; + margin: 0 auto; +} + +.html-body .container-18 { + position: relative; + grid-row: 1 / 2; + grid-column: 1 / 2; + width: 100%; + height: fit-content; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 15.25px; + padding: 0px 0px 10.16px; +} + +.html-body .text-wrapper-15 { + position: relative; + display: flex; + align-items: center; + align-self: stretch; + margin-top: -1px; + 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 { + position: relative; + grid-row: 1 / 2; + grid-column: 4 / 5; + width: 100%; + height: fit-content; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 16px; +} + +.html-body .text-wrapper-17 { + position: relative; + display: flex; + align-items: center; + align-self: stretch; + margin-top: -1px; + 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; + position: relative; + align-self: stretch; + width: 100%; + flex: 0 0 auto; +} + +.html-body .hero-section, +.html-body .section-capabilities, +.html-body .section-feature-demo, +.html-body .get-in-touch-section, +.html-body .footer { + width: 100%; +} + +.html-body .professional { + width: min(calc(100% - 64px), var(--content-narrow)); +} + +.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; +} + +.html-body .text-wrapper-9, +.html-body .text-wrapper-11 { + white-space: normal; + overflow-wrap: anywhere; +} + +.html-body .container-13, +.html-body .container-14 { + min-width: 0; +} + +.html-body .container-15 { + height: auto; +} + +@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; +} + +@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; + } +} + +/* Tablet portrait: 768px and below */ +@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; + } +} + +/* Mobile: 480px and below */ +@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%; + } +} From 2b9d1be98597336dd3e50282be4355fe07da9c8c Mon Sep 17 00:00:00 2001 From: popjell Date: Wed, 17 Jun 2026 09:25:02 -0400 Subject: [PATCH 3/3] small css refactor --- website/main.html | 6 +- website/styles.css | 510 +++++++++++++++++---------------------------- 2 files changed, 189 insertions(+), 327 deletions(-) diff --git a/website/main.html b/website/main.html index b3525bd0f..f6a3b90ca 100644 --- a/website/main.html +++ b/website/main.html @@ -164,9 +164,9 @@

Installation

Python 3.11
diff --git a/website/styles.css b/website/styles.css index 573c2cca6..0b0377a87 100644 --- a/website/styles.css +++ b/website/styles.css @@ -1,3 +1,5 @@ +/* ── Layout & Navigation ── */ + .html-body { display: flex; flex-direction: column; @@ -10,12 +12,11 @@ } .html-body .main { - position: relative; + display: flex; + flex-direction: column; align-self: stretch; width: 100%; height: auto; - display: flex; - flex-direction: column; gap: 0; padding-top: 72px; } @@ -23,10 +24,10 @@ .html-body .top-navigation-bar { display: flex; flex-direction: column; - width: 100%; - height: 72px; align-items: flex-start; justify-content: center; + width: 100%; + height: 72px; position: fixed; top: 0; left: 0; @@ -40,37 +41,26 @@ .html-body .container-20 { display: flex; - width: min(calc(100% - 64px), var(--content-max)); align-items: center; justify-content: space-between; - padding: 0px; - position: relative; flex: 1; - flex-grow: 1; margin: 0 auto; + padding: 0; + width: min(calc(100% - 64px), var(--content-max)); } .html-body .container-21 { display: inline-flex; align-items: center; - position: relative; flex: 0 0 auto; gap: 32px; } -.html-body .div-2 { - display: inline-flex; - flex-direction: column; - align-items: flex-start; - position: relative; - flex: 0 0 auto; -} - +.html-body .div-2, .html-body .link-margin { display: inline-flex; flex-direction: column; align-items: flex-start; - position: relative; flex: 0 0 auto; } @@ -122,7 +112,6 @@ .html-body .text-5 { display: flex; align-items: center; - margin-top: -1px; font-family: var(--font-heading); font-weight: 700; color: var(--color-text-accent); @@ -130,7 +119,6 @@ letter-spacing: -0.6px; line-height: 33.6px; white-space: nowrap; - position: relative; width: fit-content; text-decoration: none; } @@ -138,7 +126,6 @@ .html-body .text-6 { display: flex; align-items: center; - margin-top: -1px; font-family: var(--font-body); font-weight: 600; color: var(--color-text-accent); @@ -146,23 +133,21 @@ letter-spacing: 0; line-height: 24px; white-space: nowrap; - position: relative; width: fit-content; text-decoration: none; } +/* ── Hero Section ── */ + .html-body .hero-section { display: flex; flex-direction: column; - width: min(calc(100% - 64px), var(--content-max)); - height: 504px; align-items: center; gap: 16px; + width: 100%; + height: 504px; padding: 120px 32px 46px; position: relative; - top: auto; - left: auto; - transform: none; margin: 0 auto; } @@ -178,22 +163,20 @@ } .html-body .div { + display: flex; flex-direction: column; align-items: center; - flex: 0 0 auto; - display: flex; - position: relative; 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); - align-items: center; - position: relative; flex: 0 0 auto; } @@ -202,8 +185,7 @@ align-items: flex-start; justify-content: center; gap: 16.01px; - padding: 16px 0px 0px; - position: relative; + padding: 16px 0 0; align-self: stretch; width: 100%; flex: 0 0 auto; @@ -217,7 +199,6 @@ align-items: center; justify-content: center; padding: 16px 32px 17.39px; - position: relative; flex: 0 0 auto; background-color: var(--color-bg-btn); border-radius: var(--radius-btn); @@ -228,7 +209,6 @@ display: flex; align-items: center; justify-content: center; - margin-top: -1px; font-family: var(--font-body); font-weight: 600; color: var(--color-text-btn); @@ -237,7 +217,6 @@ letter-spacing: 0; line-height: 32.4px; white-space: nowrap; - position: relative; width: fit-content; } @@ -249,7 +228,6 @@ align-items: center; justify-content: center; padding: 15px 32px 16.39px; - position: relative; flex: 0 0 auto; border-radius: var(--radius-btn); border: 1px solid var(--color-border); @@ -268,28 +246,17 @@ letter-spacing: 0; line-height: 32.4px; white-space: nowrap; - position: relative; width: fit-content; } -.html-body .section-capabilities, -.html-body .section-feature-demo, -.html-body .professional, -.html-body .get-in-touch-section { - position: relative; - top: auto; - left: auto; - transform: none; - margin: 0 auto; - margin-bottom: 0; -} +/* ── Capabilities Section ── */ .html-body .section-capabilities { display: flex; flex-direction: column; - width: min(calc(100% - 64px), var(--content-max)); - height: auto; align-items: flex-start; + width: 100%; + height: auto; padding: 120px 32px 112px; background-color: var(--color-bg-section); } @@ -298,42 +265,36 @@ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 401.19px; - max-width: var(--content-max); - height: fit-content; + align-items: stretch; gap: 32px; margin: 0 auto; width: min(calc(100% - 64px), var(--content-max)); - align-items: stretch; } .html-body .container-4 { - position: relative; grid-row: 1 / 2; grid-column: 1 / 2; align-self: center; - width: 100%; - min-width: 0; - height: fit-content; 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; - flex: 0 0 auto; - display: flex; - position: relative; align-self: stretch; width: 100%; + flex: 0 0 auto; } .html-body .unified-bioimaging { - position: relative; align-self: stretch; - margin-top: -1px; font-family: var(--font-heading); font-weight: 300; color: var(--color-text-primary); @@ -344,11 +305,9 @@ } .html-body .p { - position: relative; display: flex; align-items: center; align-self: stretch; - margin-top: -1px; font-family: var(--font-body); font-weight: 400; color: var(--color-text-secondary); @@ -362,7 +321,6 @@ flex-direction: column; align-items: flex-start; gap: 16px; - position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; @@ -372,19 +330,16 @@ display: flex; align-items: flex-start; gap: 16px; - position: relative; + flex-wrap: wrap; align-self: stretch; width: 100%; flex: 0 0 auto; - flex-wrap: wrap; } .html-body .text-3 { - position: relative; display: flex; align-items: center; width: fit-content; - margin-top: -1px; font-family: var(--font-heading); font-weight: 400; color: var(--color-text-primary); @@ -396,106 +351,17 @@ margin: 0; } -.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 { - margin-top: -1px; - text-align: center; - position: relative; - width: fit-content; -} - -.html-body .text-wrapper-2 { - position: relative; - display: flex; - align-items: center; - width: fit-content; - margin-top: -1px; - text-decoration: none; -} - -.html-body .all-the-industry { - position: relative; - width: 100%; - margin-top: -1px; - overflow-wrap: anywhere; -} - -.html-body .text-wrapper-5 { - position: relative; - display: flex; - align-items: center; - align-self: stretch; - margin-top: -1px; - text-decoration: none; -} - -.html-body .visualize-every-step { - position: relative; - align-self: stretch; - margin-top: -1px; -} - -.html-body .text-wrapper-6 { - position: relative; - display: flex; - align-items: center; - justify-content: center; - width: fit-content; - margin-top: -1px; - text-align: center; - max-width: 100%; -} - -.html-body .text-wrapper-14 { - position: relative; - display: flex; - align-items: center; - justify-content: center; - width: fit-content; - margin-top: -1px; - text-align: center; - white-space: nowrap; - text-decoration: none; -} - -.html-body .text-wrapper-16 { - position: relative; - display: flex; - align-items: center; - align-self: stretch; - margin-top: -1px; - font-size: 14px; - line-height: 22.8px; -} - .html-body .container-7 { - position: relative; grid-row: 1 / 2; grid-column: 2 / 3; align-self: center; - width: 100%; - min-width: 0; - height: fit-content; display: flex; flex-direction: column; align-items: flex-start; + width: 100%; + height: fit-content; + min-width: 0; + position: relative; } .html-body .gradient-blur { @@ -512,7 +378,6 @@ .html-body .background-border { display: block; - position: relative; align-self: stretch; width: 100%; height: 333px; @@ -521,24 +386,23 @@ border: 1px solid var(--color-border); } +/* ── Features Section ── */ + .html-body .section-feature-demo { display: flex; flex-direction: column; - width: min(calc(100% - 64px), var(--content-max)); - height: auto; align-items: flex-start; gap: 36px; + width: 100%; + height: auto; padding: 59px 32px 112px; } .html-body .text-wrapper-3 { - position: relative; display: flex; align-items: center; justify-content: center; width: fit-content; - margin: 0; - margin-top: -1px; font-family: var(--font-heading); font-weight: 300; color: var(--color-text-primary); @@ -550,6 +414,7 @@ overflow-wrap: anywhere; word-break: normal; max-width: 100%; + margin: 0; } .html-body .container-8 { @@ -557,7 +422,6 @@ grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto; align-items: stretch; - height: fit-content; gap: 32px; margin: 0 auto; width: min(calc(100% - 64px), var(--content-max)); @@ -565,10 +429,9 @@ .html-body .image-viewer, .html-body .real-time, -.html-body .history-slider, -.html-body .requirements, -.html-body .requirements-2, -.html-body .overlay-border { +.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); @@ -577,22 +440,14 @@ height: auto; } -.html-body .image-viewer, -.html-body .real-time, -.html-body .history-slider { - border-radius: var(--radius-card); - overflow: hidden; -} - .html-body .image-viewer { - position: relative; grid-row: 1 / 2; grid-column: 1 / 3; - min-width: 0; display: flex; flex-direction: column; align-items: flex-start; align-self: stretch; + min-width: 0; min-height: 490px; } @@ -602,7 +457,6 @@ align-items: flex-start; gap: 8px; padding: 24px; - position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; @@ -610,12 +464,9 @@ } .html-body .text-wrapper-4 { - position: relative; display: flex; align-items: center; align-self: stretch; - margin: 0; - margin-top: -1px; font-family: var(--font-heading); font-weight: 400; color: var(--color-text-primary); @@ -625,11 +476,11 @@ white-space: normal; overflow-wrap: anywhere; max-width: 100%; + margin: 0; } .html-body .background { display: block; - position: relative; align-self: stretch; width: 100%; height: 428.88px; @@ -642,30 +493,26 @@ .html-body .real-time { grid-row: 1 / 2; grid-column: 3 / 5; - align-self: stretch; - min-width: 0; + display: flex; flex-direction: column; align-items: flex-start; - position: relative; - display: flex; + align-self: stretch; + min-width: 0; min-height: 490px; } .html-body .container-wrapper { display: flex; flex-direction: column; - height: auto; - min-height: 360px; align-items: flex-start; justify-content: center; - padding: 40px 24px; - position: relative; align-self: stretch; width: 100%; + height: auto; + min-height: 360px; + padding: 32px 24px; background-color: var(--color-bg-dark); flex: 1 1 auto; - padding-top: 32px; - padding-bottom: 32px; } .html-body .container-9 { @@ -676,7 +523,6 @@ } .html-body .history-slider { - position: relative; grid-row: 2 / 3; grid-column: 1 / 5; justify-self: start; @@ -691,8 +537,7 @@ .html-body .text-4 { display: flex; align-items: center; - margin: 0; - margin-top: -1px; + width: 100%; font-family: var(--font-heading); font-weight: 400; color: var(--color-text-primary); @@ -701,9 +546,8 @@ line-height: 24px; white-space: normal; overflow-wrap: anywhere; - position: relative; - width: 100%; max-width: 100%; + margin: 0; } .html-body .container-10 { @@ -712,7 +556,6 @@ justify-content: flex-start; gap: 16px; flex-wrap: wrap; - position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; @@ -720,7 +563,6 @@ .html-body .background-2 { display: block; - position: relative; align-self: stretch; width: 100%; height: 403px; @@ -730,13 +572,16 @@ min-height: 360px; } +/* ── Installation & Terminal ── */ + .html-body .professional { display: flex; flex-direction: column; - width: min(calc(100% - 64px), var(--content-narrow)); - height: auto; align-items: flex-start; gap: 28px; + width: min(calc(100% - 64px), var(--content-narrow)); + height: auto; + margin: 0 auto; } .html-body .container-11 { @@ -744,7 +589,6 @@ flex-direction: column; align-items: stretch; gap: 0; - position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; @@ -754,23 +598,21 @@ display: flex; flex-direction: column; align-items: flex-start; - position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; background-color: #ffffff01; border-radius: var(--radius-card); overflow: hidden; - box-shadow: 0px 25px 50px -12px #00000040; + 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); - display: flex; - position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; @@ -780,41 +622,32 @@ display: inline-flex; align-items: flex-start; gap: 8px; - position: relative; flex: 0 0 auto; } -.html-body .background-3 { - position: relative; +.html-body .terminal-dot { width: 12px; height: 12px; - background-color: var(--color-dot-red); border-radius: var(--radius-full); } -.html-body .background-4 { - position: relative; - width: 12px; - height: 12px; +.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); - border-radius: var(--radius-full); } -.html-body .background-5 { - position: relative; - width: 12px; - height: 12px; +.html-body .terminal-dot:nth-child(3) { background-color: var(--color-dot-blue); - border-radius: var(--radius-full); } .html-body .text-wrapper-7 { - position: relative; display: flex; align-items: center; justify-content: center; width: 136.83px; - margin-top: -1px; font-family: var(--font-label); font-weight: 400; color: var(--color-text-secondary); @@ -825,12 +658,11 @@ } .html-body .terminal-body { + display: flex; flex-direction: column; align-items: flex-start; padding: 24px; background-color: var(--color-bg-dark); - display: flex; - position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; @@ -840,7 +672,6 @@ display: inline-flex; flex-direction: column; align-items: flex-start; - position: relative; align-self: stretch; flex: 0 0 auto; opacity: 0.3; @@ -850,7 +681,6 @@ .html-body .text-wrapper-8 { display: flex; align-items: center; - margin-top: -1px; font-family: var(--font-mono); font-weight: 400; color: var(--color-text-secondary); @@ -858,7 +688,6 @@ letter-spacing: 0; line-height: 21px; white-space: nowrap; - position: relative; width: fit-content; } @@ -866,7 +695,6 @@ display: inline-flex; flex-direction: column; align-items: flex-start; - position: relative; align-self: stretch; flex: 0 0 auto; min-width: 0; @@ -874,39 +702,41 @@ } .html-body .text-wrapper-9 { - position: relative; display: flex; align-items: center; width: fit-content; - margin-top: -1px; font-family: var(--font-mono); font-weight: 400; - color: var(--color-text-primary); font-size: 14px; letter-spacing: 0; line-height: 21px; - white-space: nowrap; + white-space: normal; + overflow-wrap: anywhere; } .html-body .text-wrapper-11 { - position: relative; display: flex; align-items: center; width: fit-content; - margin-top: -1px; font-family: var(--font-mono); font-weight: 400; - color: var(--color-text-terminal-blue); font-size: 14px; letter-spacing: 0; line-height: 21px; - white-space: nowrap; + 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 { - position: relative; display: inline; - margin-top: -1px; font-family: var(--font-mono); font-weight: 400; color: transparent; @@ -927,84 +757,74 @@ .html-body .container-15 { display: flex; flex-direction: column; - height: auto; align-items: flex-start; gap: 34px; - position: relative; align-self: stretch; - width: 100%; margin: 0 auto; width: min(calc(100% - 64px), var(--content-max)); } -.html-body .requirements { +.html-body .requirements, +.html-body .requirements-2 { display: flex; flex-direction: column; + align-items: flex-start; width: 100%; min-height: 0; height: auto; - align-items: flex-start; + 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; - position: relative; - border-radius: var(--radius-card); } .html-body .requirements-2 { - flex-direction: column; - width: 100%; - min-height: 0; - height: auto; - align-items: flex-start; gap: 26px; padding: 24px; margin-bottom: 0; - border-radius: var(--radius-card); - position: relative; - display: flex; } .html-body .heading { + display: flex; align-items: center; gap: 8px; - flex: 0 0 auto; - display: flex; - position: relative; align-self: stretch; width: 100%; + flex: 0 0 auto; } .html-body .text-wrapper-12 { + display: flex; align-items: center; width: fit-content; - margin: 0; - margin-top: -1px; font-family: var(--font-heading); font-weight: 400; color: var(--color-text-accent); font-size: 16px; letter-spacing: 0; line-height: 24px; - white-space: nowrap; - position: relative; - display: flex; white-space: normal; overflow-wrap: anywhere; max-width: 100%; + margin: 0; } .html-body .python-or-higher-wrapper { - height: auto; + display: flex; align-items: center; gap: 8px; - display: flex; - position: relative; align-self: stretch; width: 100%; + height: auto; } .html-body .text-wrapper-13 { - position: relative; width: 100%; height: auto; font-family: var(--font-heading); @@ -1019,31 +839,32 @@ } .html-body .install-openhcs-wrapper { - height: auto; + display: flex; align-items: center; gap: 8px; - display: flex; - position: relative; align-self: stretch; width: 100%; + height: auto; } +/* ── Contact & Footer ── */ + .html-body .get-in-touch-section { display: flex; flex-direction: column; - width: min(calc(100% - 64px), var(--content-narrow)); - height: auto; 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: 0px 0px 16px; - position: relative; + padding: 0 0 16px; align-self: stretch; width: 100%; flex: 0 0 auto; @@ -1054,11 +875,14 @@ align-items: center; gap: 16px 24px; padding: 24px 28px; - position: relative; 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; } @@ -1067,7 +891,6 @@ display: inline-flex; align-items: center; gap: 11.99px; - position: relative; flex: 0 0 auto; justify-content: center; } @@ -1076,13 +899,11 @@ display: inline-flex; flex-direction: column; align-items: center; - position: relative; flex: 0 0 auto; text-decoration: none; } .html-body .vertical-divider { - position: relative; width: 1px; height: 24px; background-color: var(--color-border); @@ -1093,8 +914,7 @@ display: flex; flex-direction: column; align-items: flex-start; - padding: 2px 0px 32px; - position: relative; + padding: 2px 0 32px; align-self: stretch; width: 100%; flex: 0 0 auto; @@ -1106,32 +926,28 @@ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: 128px; - width: min(calc(100% - 64px), var(--content-max)); - height: fit-content; gap: 32px; - padding: 0px 32px; + padding: 0 32px; margin: 0 auto; + width: min(calc(100% - 64px), var(--content-max)); } .html-body .container-18 { - position: relative; grid-row: 1 / 2; grid-column: 1 / 2; - width: 100%; - height: fit-content; display: flex; flex-direction: column; align-items: flex-start; gap: 15.25px; - padding: 0px 0px 10.16px; + padding: 0 0 10.16px; + width: 100%; + height: fit-content; } .html-body .text-wrapper-15 { - position: relative; display: flex; align-items: center; align-self: stretch; - margin-top: -1px; font-family: var(--font-heading); font-weight: 700; color: var(--color-text-primary); @@ -1141,23 +957,20 @@ } .html-body .container-19 { - position: relative; grid-row: 1 / 2; grid-column: 4 / 5; - width: 100%; - height: fit-content; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; + width: 100%; + height: fit-content; } .html-body .text-wrapper-17 { - position: relative; display: flex; align-items: center; align-self: stretch; - margin-top: -1px; font-family: var(--font-body); font-weight: 600; color: var(--color-text-accent); @@ -1171,22 +984,84 @@ flex-direction: column; align-items: flex-start; gap: 8px; - position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; } -.html-body .hero-section, -.html-body .section-capabilities, -.html-body .section-feature-demo, -.html-body .get-in-touch-section, -.html-body .footer { +/* ── 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 .professional { - width: min(calc(100% - 64px), var(--content-narrow)); +.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, @@ -1198,20 +1073,7 @@ margin-right: auto; } -.html-body .text-wrapper-9, -.html-body .text-wrapper-11 { - white-space: normal; - overflow-wrap: anywhere; -} - -.html-body .container-13, -.html-body .container-14 { - min-width: 0; -} - -.html-body .container-15 { - height: auto; -} +/* ── Interactions ── */ @media (prefers-reduced-motion: no-preference) { .html-body .button, @@ -1260,6 +1122,8 @@ outline-offset: 2px; } +/* ── Responsive ── */ + @media (max-width: 1280px) { .html-body .hero-section, .html-body .section-capabilities, @@ -1346,7 +1210,6 @@ } } -/* Tablet portrait: 768px and below */ @media (max-width: 768px) { .html-body .hamburger { display: flex; @@ -1421,7 +1284,6 @@ } } -/* Mobile: 480px and below */ @media (max-width: 480px) { .html-body .text-wrapper-3, .html-body .unified-bioimaging {