/** * BioCypher landing page. * * Direction: scientific infrastructure, not SaaS. Light documentation shell, * dark hero, visible citation, sparse cards, obvious links. */ :root { color-scheme: light; --bc-ink: #10201d; --bc-muted: #5d6f69; --bc-line: #dbe8e2; --bc-soft: #f3f8f5; --bc-soft-2: #e8f6ef; --bc-green: #27a86b; --bc-green-dark: #107755; --bc-dark: #071b16; --bc-dark-2: #112a24; /* Dark-green gradient reused across all dark sections. Horizontal (90deg) so colour depends only on x — a divider at any height stays aligned with the section body beneath it. */ --bc-dark-gradient: linear-gradient(90deg, #071a16, #0d2a22 62%, #133d30); --bc-card: #ffffff; --bc-shadow: 0 1rem 2.4rem rgba(16, 32, 29, 0.10); --md-primary-fg-color: #ffffff; --md-primary-fg-color--dark: #ffffff; --md-accent-fg-color: #27a86b; --md-typeset-a-color: #107755; } body { background: #ffffff; } .md-content .md-typeset:not(:has(.tx-home-body)) { --md-typeset-a-color: var(--bc-green-dark); } .md-content .md-typeset:not(:has(.tx-home-body)) a { color: var(--md-typeset-a-color); } /* Material's default scheme sets --md-typeset-a-color to the white primary colour on ; scope the brand link colour to the nav so the active sidebar/TOC link stays legible. */ .md-nav { --md-typeset-a-color: var(--bc-green-dark); } /* ------------------------------------------------------------------ * * Header * ------------------------------------------------------------------ */ .md-header { background: #ffffff; color: var(--bc-ink); border-bottom: 1px solid var(--bc-line); box-shadow: none; } .md-tabs { display: none; } .md-header__inner { min-height: 3.15rem; gap: 0.35rem; } .md-header__button { color: var(--bc-ink); } .md-header__button.md-logo { margin: 0 0.08rem 0 0; padding: 0.42rem; } .md-header__button.md-logo img, .md-header__button.md-logo svg { width: 1.65rem; height: 1.65rem; } .md-header__button.tx-brand { display: inline-flex; flex-direction: row; align-items: center; gap: 0.4rem; width: auto; margin-right: 0.5rem; } .tx-header-brand { display: inline-flex; align-items: center; min-width: max-content; color: var(--bc-ink); font-size: 0.92rem; font-weight: 950; letter-spacing: -0.035em; text-decoration: none; } .tx-brand:hover .tx-header-brand { color: var(--bc-green-dark); } .tx-header-nav { display: none; align-items: center; gap: 0.1rem; margin-right: auto; font-size: 0.72rem; font-weight: 850; } @media screen and (min-width: 60em) { .tx-header-nav { display: flex; } } .tx-header-nav a { color: var(--bc-ink); padding: 0.45rem 0.62rem; border-radius: 999px; text-decoration: none; } .tx-header-nav a:hover, .tx-header-nav a:focus-visible { background: var(--bc-soft); color: var(--bc-green-dark); } .tx-header-nav__label { margin-right: 0.15rem; color: var(--bc-muted); font-size: 0.62rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; } .tx-header-nav__ext { display: inline-flex; vertical-align: -0.12em; width: 0.82em; height: 0.82em; margin-left: 0.18em; } .tx-header-nav__ext svg { width: 100%; height: 100%; fill: currentcolor; } .tx-header-nav__sep { width: 1px; height: 1.1rem; margin: 0 0.5rem; background: var(--bc-line); } .tx-header-nav a[aria-current="page"] { background: var(--bc-soft-2); color: var(--bc-green-dark); } .md-search { margin-left: 0.2rem; } .md-search__form { background: var(--bc-soft); border: 1px solid var(--bc-line); border-radius: 999px; box-shadow: none; } .md-search__input { color: var(--bc-ink); } .md-search__input::placeholder { color: var(--bc-muted); } .md-search__icon, .md-search__icon svg, .md-header__button[for="__search"], .md-header__button[for="__search"] svg { color: var(--bc-ink); fill: currentColor; } .md-header__source { color: var(--bc-ink); } /* Material assumes the mobile drawer header uses the primary colour and makes its source card white. This site has a white drawer, so keep the repository name and facts readable there. */ .md-nav--primary .md-source { color: var(--bc-ink); } @media screen and (max-width: 59.984em) { .md-header__button.md-logo { display: none; } .tx-header-brand { flex: 1 1 auto; margin-right: 0.4rem; } } /* ------------------------------------------------------------------ * * Hero * ------------------------------------------------------------------ */ .tx-hero { position: relative; overflow: hidden; color: #f6fbf8; background: radial-gradient(circle at 82% 14%, rgba(46, 182, 125, 0.24), transparent 24rem), radial-gradient(circle at 9% 20%, rgba(79, 134, 247, 0.10), transparent 21rem), linear-gradient(140deg, #071a16, #0d2a22 62%, #133d30); } .tx-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px); background-size: 3.8rem 3.8rem; mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.52), transparent 78%); } .tx-hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; padding: clamp(2rem, 4.2vw, 3.35rem) 0.8rem clamp(1.35rem, 2.2vw, 1.9rem); } @media screen and (min-width: 46em) { .tx-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.82fr); } } @media screen and (min-width: 68em) { .tx-hero__grid { grid-template-columns: minmax(0, 1.04fr) minmax(22rem, 0.82fr); } } .tx-hero__content { /* Establish a container so the headline can size itself from this column's width (cqi units) rather than the viewport. */ container-type: inline-size; } .tx-wordmark { display: flex; align-items: center; gap: 0.62rem; margin-bottom: 0.95rem; color: #ffffff; font-size: clamp(1.65rem, 3vw, 2.45rem); font-weight: 950; letter-spacing: -0.055em; } .tx-wordmark__logo { width: clamp(2.15rem, 3.6vw, 2.85rem); height: auto; border-radius: 0.9rem; box-shadow: 0 0.7rem 1.8rem rgba(0, 0, 0, 0.18); } .tx-hero__headline { max-width: 100%; margin: 0; color: #ffffff; /* Sized from the column width (cqi), not the viewport, so the shape is stable across window size and zoom. `nowrap` keeps each line intact, so "Open infrastructure" and "data management" never break mid-line. 8cqi is the single knob: raise for larger type, lower if a line wraps. */ font-size: clamp(1.9rem, 8cqi, 3.2rem); font-weight: 950; letter-spacing: 0; line-height: 1.04; white-space: nowrap; } .tx-hero__tagline { max-width: 42rem; margin: 1.05rem 0 0; color: #d8ebe3; font-size: clamp(0.98rem, 1.35vw, 1.1rem); line-height: 1.62; } .tx-code-card { position: relative; z-index: 1; overflow: hidden; border: 1px solid rgba(209, 244, 226, 0.22); border-radius: 1.25rem; background: rgba(7, 23, 19, 0.78); box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.24); backdrop-filter: blur(14px); } @media screen and (max-width: 45.984em) { .tx-code-card { display: none; } } .tx-code-card__header { display: flex; align-items: baseline; justify-content: flex-start; gap: 0.8rem; padding: 0.92rem 1rem 0.72rem; border-bottom: 1px solid rgba(209, 244, 226, 0.14); } .tx-code-card__header span { color: #94efbd; font-size: 0.64rem; font-weight: 950; letter-spacing: 0.14em; text-transform: uppercase; } .tx-code-tabs > input { position: absolute; opacity: 0; pointer-events: none; } .tx-code-tabs__labels { display: flex; gap: 0.4rem; padding: 0.75rem 1rem 0; } .tx-code-tabs__labels label { cursor: pointer; border: 1px solid rgba(209, 244, 226, 0.18); border-radius: 999px; padding: 0.34rem 0.72rem; color: #bbd9ce; font-size: 0.72rem; font-weight: 900; } #tx-tab-manual:checked ~ .tx-code-tabs__labels label[for="tx-tab-manual"], #tx-tab-agentic:checked ~ .tx-code-tabs__labels label[for="tx-tab-agentic"] { border-color: rgba(141, 240, 187, 0.7); background: #8df0bb; color: #071b16; } .tx-code-panel { display: none; padding: 0.78rem 1rem 1rem; } #tx-tab-manual:checked ~ .tx-code-panel--manual, #tx-tab-agentic:checked ~ .tx-code-panel--agentic { display: block; } .tx-code-panel pre { margin: 0; border-radius: 0.9rem; background: #03110e; box-shadow: none; } .tx-code-panel code { display: block; white-space: pre-wrap; overflow-wrap: anywhere; padding: 0.95rem 1rem; color: #e2fff0; font-size: clamp(0.66rem, 1vw, 0.78rem); line-height: 1.62; } @media screen and (max-width: 67.984em) { .tx-hero__headline { max-width: 100%; } } .tx-code-panel a { display: inline-flex; margin-top: 0.75rem; color: #8df0bb; font-size: 0.78rem; font-weight: 900; text-decoration: none; } .tx-code-panel a:hover { text-decoration: underline; } .tx-publication-strip { position: relative; z-index: 1; background: #dff4e9; color: var(--bc-ink); } .tx-publication-strip__grid { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 1rem; min-height: clamp(5.1rem, 8vw, 6.7rem); padding: 1.85rem 0.8rem 1.25rem; text-align: left; } .tx-publication-strip__badge { display: inline-flex; width: 3.4rem; height: 3.4rem; align-items: center; justify-content: center; flex: 0 0 auto; flex-direction: column; border: 0.18rem solid var(--bc-green-dark); border-radius: 50%; color: var(--bc-green-dark); font-family: Georgia, "Times New Roman", serif; line-height: 0.9; } .tx-publication-strip__badge span, .tx-publication-strip__badge strong { font-size: 0.72rem; } .tx-publication-strip p { margin: 0; color: var(--bc-ink); font-size: clamp(0.95rem, 1.55vw, 1.18rem); line-height: 1.55; } .tx-publication-strip a { display: inline-block; margin-left: 0.45rem; color: var(--bc-green-dark); font-weight: 950; text-decoration: underline; text-underline-offset: 0.18em; } .tx-trust-strip { position: relative; z-index: 1; background: #ffffff; color: var(--bc-ink); } /* Rounded top and bottom edges of the white band. Both are pseudo-elements of the trust strip (so they paint above its white background and mirror each other): ::before is the publication green bumping down from the top edge, ::after is the intro green bumping up from the bottom edge. Each ellipse is wider than the viewport so its steep sides fall off-screen (clipped by the hero's overflow), leaving a gentle central curve. */ .tx-trust-strip::before, .tx-trust-strip::after { content: ""; position: absolute; left: 50%; width: 130%; height: clamp(1.4rem, 3.5vw, 2.4rem); border-radius: 50%; } .tx-trust-strip::before { top: 0; background: #dff4e9; transform: translate(-50%, -50%); } .tx-trust-strip::after { bottom: 0; background: var(--bc-dark-gradient); transform: translate(-50%, 50%); } .tx-trust-strip__grid { padding: clamp(2.4rem, 4vw, 3.2rem) 0.8rem clamp(1.8rem, 3.6vw, 2.6rem); text-align: center; } .tx-trust-strip__heading .tx-trust-strip__eyebrow { margin: 0; color: var(--bc-green-dark); font-size: 0.64rem; font-weight: 950; letter-spacing: 0.14em; line-height: 1.4; text-transform: uppercase; } .tx-trust-strip__heading h2 { max-width: 32rem; margin: 0 auto; color: #8b948e; /* Match the "BioCypher is published" line in .tx-publication-strip p. */ font-size: clamp(0.95rem, 1.55vw, 1.18rem); font-weight: 300; letter-spacing: 0; line-height: 1.18; } /* Logo marquee: a continuous row scrolling right-to-left (logos enter at the right, exit at the left). The row is rendered four times and translated by -25% for a seamless loop. The edge fades are gradient overlays, NOT a mask-image on this container: Safari intermittently paints the composited (transform-animated) track inside a masked ancestor as a blank white band that scrolls with it. The section background is solid white, so overlays fading from white are visually identical to the mask. */ .tx-marquee { position: relative; overflow: hidden; padding-bottom: clamp(2.4rem, 4.2vw, 3.4rem); } .tx-marquee::before, .tx-marquee::after { content: ""; position: absolute; top: 0; /* Stop above the container's bottom padding so the fades never paint over the green convex divider that bumps up into the strip from below. */ bottom: clamp(2.4rem, 4.2vw, 3.4rem); width: 12%; z-index: 1; pointer-events: none; } .tx-marquee::before { left: 0; background: linear-gradient(90deg, #ffffff, rgba(255, 255, 255, 0)); } .tx-marquee::after { right: 0; background: linear-gradient(270deg, #ffffff, rgba(255, 255, 255, 0)); } .tx-marquee__track { display: flex; width: max-content; will-change: transform; animation: tx-marquee-scroll 42s linear infinite; } .tx-marquee__group { display: flex; flex: 0 0 auto; align-items: center; margin: 0; padding: 0; list-style: none; } .tx-marquee__group li { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; padding: 0 clamp(1.25rem, 3vw, 2.6rem); } .tx-marquee__group li::before { display: none; } .tx-marquee img { display: block; width: auto; max-width: 9.5rem; height: auto; max-height: 2.7rem; object-fit: contain; } /* Logos that read large at the shared cap, scaled down ~10%. */ .tx-marquee img.tx-marquee__img--sm { max-width: 8.55rem; max-height: 2.43rem; } /* Text wordmark for projects without a logo image; sized to sit alongside the logos. */ .tx-marquee__wordmark { display: inline-flex; align-items: center; color: var(--bc-ink); font-size: clamp(1.15rem, 2.4vw, 1.55rem); font-weight: 950; letter-spacing: -0.04em; line-height: 1; white-space: nowrap; } /* The track holds four identical copies; translating by one quarter moves exactly one copy, so a full copy always covers the viewport and the reset is seamless (works up to a viewport ~3x one copy's width). */ @keyframes tx-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-25%); } } @media (prefers-reduced-motion: reduce) { .tx-marquee::before, .tx-marquee::after { display: none; } .tx-marquee__track { animation: none; will-change: auto; width: auto; flex-wrap: wrap; justify-content: center; gap: 0.4rem 0; } .tx-marquee__group { min-width: 0; flex-wrap: wrap; justify-content: center; } .tx-marquee__group[aria-hidden="true"] { display: none; } } /* ------------------------------------------------------------------ * * Home body * ------------------------------------------------------------------ */ .tx-home-body { --section-space: clamp(2.9rem, 5.8vw, 4.7rem); } /* On the landing page, drop Material's content-area top margin and the empty sidebars so the first (dark-green) section meets the hero with no white gap. */ .md-main__inner:has(.tx-home-body) { margin-top: 0; } .md-main:has(.tx-home-body) .md-sidebar { display: none; } .md-content__inner:has(.tx-home-body) { margin: 0; padding: 0; } /* Material adds a 0.4rem spacer pseudo-element at the top of the article; remove it on the landing page so the first section meets the hero with no white gap. */ .md-content__inner:has(.tx-home-body)::before { display: none; } .md-content__inner:has(.tx-home-body) > h1:first-of-type, .md-content__inner:has(.tx-home-body) > .md-content__button { display: none; } .tx-home-body .tx-section { padding: var(--section-space) 0.8rem; } .tx-home-body .tx-section + .tx-section { border-top: 1px solid var(--bc-line); } .tx-section__header { max-width: 45rem; margin: 0 auto 1.7rem; text-align: center; } .tx-section__header--compact { margin-top: 2.05rem; margin-bottom: 1rem; } .tx-section__header--compact h3 { margin-bottom: 0; font-size: clamp(1.3rem, 2.1vw, 1.75rem); } .tx-section__header--split { display: grid; max-width: none; gap: 1.25rem; align-items: end; text-align: left; } @media screen and (min-width: 60em) { .tx-section__header--split { grid-template-columns: 1fr 0.82fr; } } .tx-kicker, .tx-start-card span, .tx-usecase-grid span { margin: 0 0 0.5rem; color: var(--bc-green-dark); font-size: 0.66rem; font-weight: 950; letter-spacing: 0.08em; text-transform: uppercase; } .tx-home-body h2, .tx-home-body h3, .tx-home-body p { margin-top: 0; } .tx-home-body h2 { margin-bottom: 0.65rem; color: var(--bc-ink); font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 750; letter-spacing: -0.01em; line-height: 1.12; } .tx-home-body h3 { color: var(--bc-ink); font-weight: 930; letter-spacing: -0.03em; line-height: 1.14; } .tx-home-body p { color: var(--bc-muted); font-size: 0.92rem; line-height: 1.64; } .tx-feature-grid, .tx-involved-grid, .tx-usecase-grid, .tx-start-grid { display: grid; gap: 1rem; } @media screen and (min-width: 48em) { .tx-feature-grid, .tx-start-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media screen and (min-width: 64em) { .tx-feature-grid, .tx-involved-grid, .tx-usecase-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .tx-feature-card, .tx-involved-card, .tx-usecase-grid a, .tx-start-card { position: relative; padding: 1.15rem; border: 1px solid var(--bc-line); border-radius: 1.05rem; background: var(--bc-card); box-shadow: 0 0.28rem 1rem rgba(16, 32, 29, 0.04); } /* Light-green cards (matching the light section backgrounds) on the dark-green intro band, instead of white. */ .tx-feature-card { display: flex; flex-direction: column; background: var(--bc-soft); border-color: rgba(16, 32, 29, 0.06); } /* Icon and title share one row to save vertical space. */ .tx-feature-card__head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.6rem; } .tx-feature-card__head h3 { margin: 0; } .tx-feature-card__icon { display: inline-flex; flex: none; width: 2.25rem; height: 2.25rem; align-items: center; justify-content: center; border-radius: 0.78rem; background: #133d30; color: #ffffff; line-height: 1; } .tx-feature-card__icon svg { width: 1.35rem; height: 1.35rem; } /* Component pills, centered and pinned to the bottom of each card so the three footers line up regardless of paragraph or pill count. Plain div/span (not a list) so Material's `.md-typeset ul` rules — disc markers, flow-root display, left margins — never apply. min-height reserves one row's worth of space so the pill band is the same height in every card. */ .tx-feature-card__tools { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.45rem; width: 100%; min-height: 1.55rem; margin: auto 0 0; padding: 0.5rem 0 0; } .tx-feature-card__tools a { padding: 0.24rem 0.66rem; border: 1px solid transparent; border-radius: 999px; background: #133d30; color: #ffffff; font-size: 0.72rem; font-weight: 800; line-height: 1.2; white-space: nowrap; letter-spacing: 0.01em; text-decoration: none; cursor: pointer; transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease; } .tx-feature-card__tools a:hover, .tx-feature-card__tools a:focus-visible { background: var(--bc-soft-2); color: var(--bc-green-dark); border-color: var(--bc-green-dark); transform: translateY(-1px); box-shadow: 0 0.28rem 0.7rem rgba(16, 32, 29, 0.16); } /* Dark-green band for the "Why BioCypher" intro: white heading, light-green feature cards on top. Full-bleed via the box-shadow + clip-path trick so the colour extends past the content column. */ /* Scoped under .tx-home-body so this padding-top beats the base `.tx-home-body .tx-section` padding shorthand (equal specificity, later). */ .tx-home-body .tx-section--intro { position: relative; padding-top: clamp(1.1rem, 2.3vw, 1.8rem); } /* Full-bleed dark gradient behind the constrained (61rem) content. */ .tx-home-body .tx-section--intro::before { content: ""; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); background: var(--bc-dark-gradient); } .tx-section--intro .tx-section__header h2 { color: #ffffff; } .tx-section--intro .tx-kicker { color: #9ec9b4; } .tx-section--intro .tx-section__header p { color: #c7ded2; } /* Links to the About / Philosophy / Community content that the landing page otherwise doesn't surface. Ghost pills on the dark intro band; invert on hover/focus to signal they're clickable. */ .tx-section--intro .tx-about-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 1.6rem; } .tx-section--intro .tx-about-links a { padding: 0.28rem 0.85rem; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 999px; color: #e4f1ea; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.01em; text-decoration: none; transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease, transform 140ms ease; } .tx-section--intro .tx-about-links a:hover, .tx-section--intro .tx-about-links a:focus-visible { background: #ffffff; color: var(--bc-green-dark); border-color: #ffffff; transform: translateY(-1px); } .tx-section--evidence { position: relative; background: var(--bc-soft); box-shadow: 0 0 0 100vmax var(--bc-soft); clip-path: inset(0 -100vmax); } /* Convex divider at the bottom of the WHY BIOCYPHER band, mirroring the one at its top (.tx-trust-strip::after): the intro's dark green bumps down into the evidence section. Lives on the evidence pseudo so it paints above the evidence background; the evidence clip-path trims the half that sits in the intro. */ .tx-section--evidence::before { content: ""; position: absolute; left: 50%; top: 0; /* Viewport units, not %: the evidence section is a constrained content column (its full-bleed colour comes from the box-shadow/clip-path trick), so 130% of the column falls short of wide viewports. */ width: 130vw; height: clamp(0.85rem, 2.1vw, 1.45rem); border-radius: 50%; background: var(--bc-dark-gradient); transform: translate(-50%, -50%); } .tx-publication-list { max-width: 58rem; margin: 0 auto; padding: 0; border-top: 1px solid rgba(16, 32, 29, 0.16); list-style: none; } .tx-publication-list li { margin: 0; border-bottom: 1px solid rgba(16, 32, 29, 0.16); list-style: none; } .tx-publication-list li::before { display: none; } .tx-publication-list a { display: grid; grid-template-columns: minmax(10rem, 0.72fr) minmax(0, 1.7fr) auto; gap: 1rem; align-items: center; padding: 1rem 0; color: var(--bc-ink); line-height: 1.48; text-decoration: none; } .tx-publication-list a::after { content: "↗"; color: var(--bc-green-dark); font-size: 0.95rem; font-weight: 950; } .tx-publication-list a:hover, .tx-publication-list a:focus-visible { color: var(--bc-green-dark); } .tx-publication-list a:focus-visible { outline: 0.12rem solid var(--bc-green); outline-offset: 0.3rem; } .tx-publication-list > li > a > span:first-child { color: var(--bc-green-dark); font-size: 0.62rem; font-weight: 950; letter-spacing: 0.1em; text-transform: uppercase; } .tx-publication-list__title { display: flex; min-width: 0; align-items: baseline; gap: 0.7rem; } .tx-publication-list strong { color: var(--bc-ink); flex: 0 0 auto; font-size: 1rem; font-weight: 950; line-height: 1.2; } .tx-publication-list small { color: var(--bc-muted); font-size: 0.78rem; line-height: 1.45; } @media screen and (max-width: 47.984em) { .tx-publication-list a { grid-template-columns: minmax(0, 1fr) auto; gap: 0.3rem 0.75rem; } .tx-publication-list > li > a > span:first-child, .tx-publication-list__title { grid-column: 1; } .tx-publication-list__title { align-items: flex-start; flex-direction: column; gap: 0.08rem; } .tx-publication-list a::after { grid-column: 2; grid-row: 1 / 3; } } .tx-section--involved { position: relative; } .tx-section--involved::before { content: ""; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); background: var(--bc-dark-gradient); } .tx-section--involved .tx-section__header h2, .tx-section--involved .tx-section__header p { color: #ffffff; } .tx-section--involved .tx-kicker { color: #8df0bb; } .tx-involved-card { min-height: 12rem; border-color: rgba(255, 255, 255, 0.10); background: rgba(255, 255, 255, 0.035); } .tx-involved-card h3 { color: #8df0bb; font-size: 1.25rem; } .tx-involved-card p { color: #d7e4df; } .tx-involved-card a { display: flex; width: fit-content; margin: 0.35rem 0 0; color: #ffffff; font-weight: 900; text-decoration: underline; text-underline-offset: 0.2em; } .tx-usecase-grid a, .tx-start-card { display: block; color: inherit; text-decoration: none; } .tx-usecase-grid a { min-height: 10rem; } .tx-usecase-grid__logo { display: flex; height: 3.8rem; align-items: center; margin-bottom: 1rem; } .tx-usecase-grid__logo img { display: block; width: auto; max-width: min(100%, 13rem); height: auto; max-height: 3.8rem; object-fit: contain; } .tx-usecase-grid__logo--wordmark { color: #206d3b; font-size: 1.65rem; font-weight: 950; letter-spacing: -0.06em; } .tx-usecase-grid a:hover, .tx-start-card:hover { transform: translateY(-2px); box-shadow: var(--bc-shadow); } .tx-usecase-grid a h3::after { content: " →"; color: var(--bc-green-dark); } .tx-usecase-grid span { color: var(--bc-muted); } .tx-section--activity { background: #fbfdfc; } .tx-activity-layout { display: grid; gap: 1.2rem; align-items: start; } @media screen and (min-width: 64em) { .tx-activity-layout { grid-template-columns: minmax(18rem, 0.82fr) minmax(0, 1.3fr); } } .tx-activity-feature, .tx-activity-row { color: inherit; text-decoration: none; } .tx-activity-feature { display: block; overflow: hidden; border: 1px solid var(--bc-line); border-radius: 1.15rem; background: #ffffff; box-shadow: 0 0.4rem 1.3rem rgba(16, 32, 29, 0.055); } .tx-activity-feature:hover, .tx-activity-feature:focus-visible { border-color: rgba(16, 119, 85, 0.42); } .tx-activity-row:hover strong, .tx-activity-row:focus-visible strong { color: var(--bc-green-dark); } .tx-activity-feature:focus-visible, .tx-activity-row:focus-visible { outline: 0.12rem solid var(--bc-green); outline-offset: 0.2rem; } .tx-activity-feature img { display: block; width: 100%; height: clamp(13rem, 25vw, 18rem); object-fit: cover; } .tx-activity-feature div { padding: 1.2rem; } .tx-activity-feature span, .tx-activity-row time { display: inline-flex; margin-bottom: 0.45rem; color: var(--bc-green-dark); font-size: 0.64rem; font-weight: 950; letter-spacing: 0.13em; text-transform: uppercase; } .tx-activity-feature h3 { margin-bottom: 0.45rem; font-size: clamp(1.45rem, 2.5vw, 2rem); } .tx-activity-feature p { margin-bottom: 0; } .tx-activity-stream { position: relative; display: grid; gap: 0.9rem; padding: 0.2rem 0; } .tx-activity-group { position: relative; padding: 1rem; border: 1px solid var(--bc-line); border-radius: 1.05rem; background: #ffffff; box-shadow: 0 0.28rem 1rem rgba(16, 32, 29, 0.035); } .tx-activity-group h3 { margin: 0 0 0.8rem; color: var(--bc-ink); font-size: 0.92rem; font-weight: 950; letter-spacing: 0.12em; text-transform: uppercase; } .tx-activity-row { position: relative; display: grid; grid-template-columns: 5.1rem minmax(0, 1fr); gap: 0.85rem; align-items: start; padding: 0.8rem 0; border-top: 1px solid rgba(16, 32, 29, 0.08); } .tx-activity-row:first-of-type { border-top: 0; padding-top: 0; } .tx-activity-row:last-child { padding-bottom: 0; } .tx-activity-row time { margin: 0.08rem 0 0; color: #6a8178; white-space: nowrap; } .tx-activity-row strong { display: block; margin-bottom: 0.18rem; color: var(--bc-ink); font-size: 0.98rem; font-weight: 940; letter-spacing: -0.02em; line-height: 1.2; } .tx-activity-row span { color: var(--bc-muted); font-size: 0.86rem; line-height: 1.48; } .tx-section--quickstart { padding-bottom: clamp(4rem, 7vw, 6rem) !important; } .tx-start-grid { max-width: 56rem; margin: 0 auto; } .tx-start-card { min-height: 11rem; padding: 1.3rem; background: radial-gradient(circle at 95% 0, rgba(46, 182, 125, 0.14), transparent 14rem), var(--bc-card); } .tx-start-card h3 { margin-bottom: 0.45rem; font-size: 1.65rem; } /* ------------------------------------------------------------------ * * Footer * ------------------------------------------------------------------ */ .tx-footer { background: var(--bc-dark-gradient); color: #dbeee6; } /* Keep long sticky documentation sidebars visually separate from the full-bleed footer. The landing page is intentionally flush. */ .md-main:not(:has(.tx-home-body)) + .tx-footer { margin-top: clamp(1.5rem, 3vw, 2.5rem); } .tx-footer__grid { display: grid; gap: 1.5rem; padding: 2rem 0.8rem; } @media screen and (min-width: 58em) { .tx-footer__grid { grid-template-columns: minmax(14rem, 0.8fr) minmax(0, 1.4fr); } } .tx-footer__brand { display: flex; gap: 0.8rem; align-items: flex-start; } .tx-footer__brand img { width: 2.65rem; height: auto; border-radius: 0.75rem; } .tx-footer__brand strong { display: block; color: #ffffff; font-size: 1.15rem; font-weight: 950; letter-spacing: -0.04em; } .tx-footer__brand p { max-width: 18rem; margin: 0.25rem 0 0; color: #a9c1b8; font-size: 0.82rem; line-height: 1.55; } .tx-footer__links { display: grid; gap: 1rem; } @media screen and (min-width: 38em) { .tx-footer__links { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .tx-footer__links h2 { margin: 0 0 0.55rem; color: #8df0bb; font-size: 0.72rem; font-weight: 950; letter-spacing: 0.14em; text-transform: uppercase; } .tx-footer__links a { display: block; margin: 0.32rem 0; color: #f3fbf7; font-size: 0.82rem; font-weight: 780; text-decoration: none; } .tx-footer__links a:hover { color: #8df0bb; text-decoration: underline; } @media screen and (max-width: 42em) { .tx-hero__grid { padding-top: 1.8rem; } .tx-hero__headline { max-width: 100%; /* Let a line wrap rather than clip if the narrow single column can't fit it; the cqi sizing above still governs the base size. */ white-space: normal; } .tx-wordmark { margin-bottom: 0.7rem; font-size: 1.6rem; } .tx-hero__tagline { margin-top: 0.8rem; font-size: 0.95rem; } .tx-code-card__header { padding: 0.78rem 0.85rem 0.62rem; } .tx-code-tabs__labels, .tx-code-panel { padding-right: 0.85rem; padding-left: 0.85rem; } .tx-code-panel code { padding: 0.82rem 0.82rem; font-size: 0.63rem; line-height: 1.56; } .tx-publication-strip__grid { align-items: flex-start; justify-content: flex-start; } .tx-publication-strip a { display: block; margin: 0.25rem 0 0; } }