`, and our
anchors inside it are also `md-header__source` (block, width:100%). Force the
parent slot to flex-row and let the children size to content. */
.md-header__source:has(> .md-header__pypi) {
display: flex !important;
align-items: center;
flex-direction: row;
gap: 0.25rem;
width: auto;
max-width: none;
}
@media (max-width: 60em) {
/* Tighten header inner padding so logo + hamburger + title + icons fit. */
.md-header__inner {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
/* Scale the tulip mark down on narrow screens. */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
height: 1.6rem;
max-height: 28px;
}
}
/* GitHub icon white when inside the mobile drawer (red primary background). */
.md-nav--primary .md-header__source.md-header__github,
.md-drawer .md-header__source.md-header__github {
color: #FFFFFF;
}
/* Header right slot — PyPI version badge sits to the right of the GitHub
icon, hugging the far right edge of the header. */
.md-header__source.md-header__pypi {
display: inline-flex;
align-items: center;
margin-left: 0.4rem;
padding: 0;
border-radius: 4px;
transition: transform 0.15s;
}
.md-header__source.md-header__pypi:hover {
transform: translateY(-1px);
}
.md-header__pypi-badge {
height: 20px;
width: auto;
display: block;
}
@media (max-width: 60em) {
/* Honor "always show PyPI": Material hides .md-header__source below 60em,
so force the PyPI badge to stay in the header on mobile too. */
.md-header__source.md-header__pypi {
display: inline-flex !important;
margin-left: 0.25rem;
}
.md-header__pypi-badge { height: 16px; }
/* Drop the dark/light palette toggle on mobile (dark is the default now)
to free the width the brand title needs. */
.md-header__option { display: none !important; }
/* The palette form used to carry margin-left:auto (it right-aligned the
controls); now that it's hidden, move that onto the search button so
search + PyPI + GitHub hug the right edge, leaving the left for the
brand title. */
.md-header__button.md-icon[for="__search"] { margin-left: auto !important; }
/* Show the brand title (site_name "tulipagents") on mobile — small and
hard-clamped so it stays clear of the right-aligned controls. Target
the REAL title span (.md-header__title .md-ellipsis) directly. */
.md-header__title {
display: flex !important;
flex: 0 1 auto;
min-width: 0;
max-width: 120px;
overflow: hidden;
margin-left: 0.4rem;
}
.md-header__title .md-ellipsis {
font-size: 0.85rem !important;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.md-nav--primary .md-header__source.md-header__github:hover {
color: #FFFFFF;
opacity: 0.8;
}
.md-tabs {
background-color: var(--tl-bg);
color: var(--tulip-ink);
border-bottom: 1px solid var(--tl-rule);
}
/* Tighter tab strip — Material defaults to a 2.4rem item height with a
0.8rem top-margin on each link, leaving a tall empty band above the
labels. Compact both so the tabs sit closer to the banner. */
.md-tabs__item {
height: 1.8rem;
}
.md-tabs__link {
color: var(--tulip-mute);
font-weight: 600;
opacity: 1;
letter-spacing: 0.01em;
margin-top: 0.35rem;
}
.md-tabs__link:hover {
color: var(--tl-red);
}
.md-tabs__link--active {
color: var(--tulip-ink);
position: relative;
}
.md-tabs__link--active::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -1px;
height: 2px;
background: var(--tl-red);
}
/* ---------------------------------------------------------------------------
Side-nav — calmer, off-white feel.
--------------------------------------------------------------------------- */
.md-nav__title {
color: var(--tl-text);
font-weight: 700;
}
/* Mobile drawer header — override Material's red primary background with
the same surface + red hairline the desktop header uses. */
.md-nav--primary .md-nav__title[for="__drawer"] {
background-color: var(--tulip-surface);
color: var(--tulip-ink);
border-bottom: 2px solid var(--tl-red);
box-shadow: none;
}
.md-nav--primary .md-nav__title[for="__drawer"] .md-nav__button {
color: var(--tulip-ink);
}
/* Source slot inside the drawer — target the actual container. */
.md-nav__source {
background-color: #2A2826 !important;
border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
[data-md-color-scheme="slate"] .md-nav--primary .md-nav__title[for="__drawer"] {
background-color: var(--tl-surface);
color: var(--tl-text);
}
[data-md-color-scheme="slate"] .md-nav__source {
background-color: #2A2826 !important;
}
/* Mobile: float the palette toggle into the right rail. At cramped
widths the toggle was rendering on top of the "s" in "tulip" because
the flex flow placed it immediately after the wordmark, where the
title block doesn't end cleanly. ``margin-left: auto`` shoves it to
the right edge of the header__inner row, joining the search +
source-link cluster — no more overlap, and the toggle stays
discoverable next to the other header actions. */
@media (max-width: 56em) {
form.md-header__option {
margin-left: auto;
margin-right: 0.25rem;
flex: 0 0 auto;
}
}
/* Section headers (Multi-agent, Agents, Tools …) — teal accent, uppercase,
small caps so they read as category labels not nav items. */
.md-nav--primary .md-nav__item--section > .md-nav__link,
.md-nav--primary .md-nav__item--section > .md-nav__link:not(.md-nav__link--active) {
color: var(--tulip-mute) !important;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-top: 0.5rem;
padding-top: 0.5rem;
border-top: 1px solid var(--tl-rule);
opacity: 1;
}
.md-nav--primary .md-nav__item--section:first-child > .md-nav__link {
border-top: none;
margin-top: 0;
padding-top: 0.2rem;
}
[data-md-color-scheme="slate"] .md-nav--primary .md-nav__item--section > .md-nav__link,
[data-md-color-scheme="slate"] .md-nav--primary .md-nav__item--section > .md-nav__link:not(.md-nav__link--active) {
color: var(--tl-sage-teal) !important;
border-top-color: var(--tl-rule);
}
.md-nav__link--active,
.md-nav__link[aria-current="true"] {
color: var(--tl-red-deep) !important;
font-weight: 600;
}
.md-nav__item .md-nav__link:hover {
color: var(--tl-link);
}
/* ---------------------------------------------------------------------------
Code blocks — soft sand background, tulip red filename tab.
--------------------------------------------------------------------------- */
.md-typeset code {
background-color: rgba(128, 128, 128, 0.14);
color: var(--tulip-code-inline);
border-radius: 3px;
font-size: 0.85em;
}
.md-typeset pre > code {
background-color: var(--tl-bg-soft);
color: var(--tl-text);
}
.md-typeset .highlight {
border-left: 3px solid var(--tl-red);
border-radius: 0 4px 4px 0;
}
/* The hero example is the showcase — a notch larger than body code. */
.md-typeset .tulip-hero__code pre > code,
.md-typeset .tulip-hero__code .highlight code {
font-size: 0.92rem;
line-height: 1.6;
}
/* On mobile the hero example must fit a ~390px column — at 0.92rem (≈18px)
it overflowed and looked cramped, so drop it to a compact size. */
@media (max-width: 60em) {
.md-typeset .tulip-hero__code pre > code,
.md-typeset .tulip-hero__code .highlight code {
font-size: 0.7rem;
line-height: 1.5;
}
}
/* ---------------------------------------------------------------------------
Tables — off-white striping, subtle red header underline.
--------------------------------------------------------------------------- */
.md-typeset table:not([class]) {
border: 1px solid var(--tl-rule);
border-radius: 4px;
overflow: hidden;
font-size: 0.84rem;
}
.md-typeset table:not([class]) th {
background-color: var(--tl-bg-soft);
color: var(--tl-text);
font-weight: 700;
border-bottom: 2px solid var(--tl-red);
}
.md-typeset table:not([class]) tr:nth-child(even) {
background-color: var(--tulip-table-stripe);
}
/* ---------------------------------------------------------------------------
Admonitions — re-tint to accents.
--------------------------------------------------------------------------- */
.md-typeset .admonition.note,
.md-typeset details.note {
border-left-color: var(--tl-link);
}
.md-typeset .admonition.note > .admonition-title,
.md-typeset details.note > summary {
background-color: rgba(0, 104, 140, 0.08);
color: var(--tl-link);
}
.md-typeset .admonition.warning,
.md-typeset details.warning {
border-left-color: var(--tl-red);
}
.md-typeset .admonition.warning > .admonition-title,
.md-typeset details.warning > summary {
background-color: rgba(229, 72, 103, 0.08);
color: var(--tl-red-deep);
}
.md-typeset .admonition.tip,
.md-typeset details.tip {
border-left-color: var(--tl-sage-green);
}
.md-typeset .admonition.tip > .admonition-title,
.md-typeset details.tip > summary {
background-color: rgba(22, 163, 74, 0.18);
color: #2f6243;
}
/* ---------------------------------------------------------------------------
Buttons / pills — tulip red CTA.
--------------------------------------------------------------------------- */
.md-typeset .md-button {
background-color: transparent;
border: 1px solid var(--tl-red);
color: var(--tl-red);
border-radius: 3px;
font-weight: 600;
letter-spacing: 0.01em;
}
.md-typeset .md-button:hover,
.md-typeset .md-button:focus {
background-color: var(--tl-red);
color: #FFFFFF;
border-color: var(--tl-red);
}
.md-typeset .md-button--primary {
background-color: var(--tl-red);
color: #FFFFFF;
}
.md-typeset .md-button--primary:hover {
background-color: var(--tl-red-deep);
}
/* ---------------------------------------------------------------------------
Footer — dark bar with red micro-accent + tulip wordmark.
--------------------------------------------------------------------------- */
.md-footer-meta {
background-color: #161A1A;
}
.md-footer__inner {
border-top: 2px solid var(--tl-red);
}
/* Footer brand block — product title + copyright line.
Driven by HTML in mkdocs.yml `copyright:`. */
.md-copyright {
font-size: 0.72rem;
letter-spacing: 0.04em;
line-height: 1.45;
}
.md-copyright__highlight {
display: block;
padding: 0;
}
.footer-brand {
display: inline-flex;
align-items: center;
gap: 0.55rem;
font-family: var(--tulip-sans);
font-weight: 700;
font-size: 1.05rem;
letter-spacing: -0.005em;
color: #FFFFFF;
margin: 0 0 0.25rem;
text-transform: none;
}
.footer-copy {
display: inline-flex;
align-items: center;
gap: 0.55rem;
flex-wrap: wrap;
color: rgba(255, 255, 255, 0.72);
}
/* ---------------------------------------------------------------------------
Search input — keep neutral, red focus ring.
--------------------------------------------------------------------------- */
.md-search__input {
background-color: var(--tl-bg-soft);
color: var(--tulip-ink);
}
.md-search__input::placeholder {
color: var(--tulip-mute);
}
.md-search__input + .md-search__icon {
color: var(--tulip-mute);
}
.md-search__input:focus,
.md-search__input:hover {
background-color: var(--tulip-surface);
box-shadow: 0 0 0 2px rgba(229, 72, 103, 0.20);
}
/* ---------------------------------------------------------------------------
Hero treatment for the index page (`# Tulip` h1).
--------------------------------------------------------------------------- */
.md-typeset h1:first-of-type {
font-size: 2.8rem;
letter-spacing: -0.01em;
}
/* ---------------------------------------------------------------------------
SDK-distinctive callout — used on the Capabilities page to highlight
wedge features. tulip-red border + warm sand tint, red star icon.
Trigger with: `!!! sdk-distinctive "Distinctive to tulip"`
--------------------------------------------------------------------------- */
:root {
--md-admonition-icon--sdk-distinctive: url('data:image/svg+xml;charset=utf-8,');
}
.md-typeset .admonition.sdk-distinctive,
.md-typeset details.sdk-distinctive {
border-color: var(--tl-red);
background: linear-gradient(135deg,
rgba(229, 72, 103, 0.04) 0%,
rgba(173, 46, 92, 0.04) 100%);
}
.md-typeset .sdk-distinctive > .admonition-title,
.md-typeset .sdk-distinctive > summary {
background-color: rgba(229, 72, 103, 0.08);
color: var(--tl-red-deep);
font-weight: 700;
letter-spacing: -0.01em;
}
.md-typeset .sdk-distinctive > .admonition-title::before,
.md-typeset .sdk-distinctive > summary::before {
background-color: var(--tl-red);
-webkit-mask-image: var(--md-admonition-icon--sdk-distinctive);
mask-image: var(--md-admonition-icon--sdk-distinctive);
}
/* ---------------------------------------------------------------------------
Diagrams — responsive sizing for the agent-loop SVG and similar.
--------------------------------------------------------------------------- */
.md-typeset img[src*="agent-loop"],
.md-typeset img[src*="multi-agent-patterns"],
.md-typeset img[src*="img/patterns/"],
.md-typeset img.diagram {
display: block;
width: 100%;
max-width: 720px;
height: auto;
margin: 1.5rem auto;
}
.md-typeset img[src*="multi-agent-patterns"] {
max-width: 920px;
}
/* The architecture diagrams (agent-loop, multi-agent-patterns, the
per-pattern SVGs under img/patterns/, and the architecture / sequence
topologies) are authored against a light background. In dark mode the
dark-grey strokes and labels vanish, so render them on a near-white
card. */
[data-md-color-scheme="slate"] .md-typeset img[src*="agent-loop"],
[data-md-color-scheme="slate"] .md-typeset img[src*="multi-agent-patterns"],
[data-md-color-scheme="slate"] .md-typeset img[src*="img/patterns/"],
[data-md-color-scheme="slate"] .md-typeset img[src*="architecture"],
[data-md-color-scheme="slate"] .md-typeset img.diagram {
background-color: #FBF9F8;
padding: 1rem;
border-radius: 0.5rem;
}
/* ---------------------------------------------------------------------------
Dark-mode logo handling.
- tulip wordmark (black-fill) → invert filter flips to white.
- tulip mark (dark stroke + red accents) → swap to mark-dark.svg variant
which has the stroke recoloured to off-white.
--------------------------------------------------------------------------- */
[data-md-color-scheme="slate"] .md-header__button.md-logo img {
content: url("../img/tulip-mark.png");
}
/* Header GitHub link — sits next to the brand source button. */
.md-header__source.md-header__github {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
max-width: none;
padding: 0;
margin-left: 0;
border-radius: 8px;
color: var(--tulip-ink);
transition: background-color 0.15s, color 0.15s, transform 0.15s;
}
.md-header__source.md-header__github:hover {
background-color: rgba(128, 128, 128, 0.14);
color: var(--tl-red);
transform: translateY(-1px);
}
.md-header__github-icon {
width: 22px;
height: 22px;
display: block;
}
/* Hide the ¶ permalink anchor on the hero h1 — noise on a marketing page. */
.md-typeset .tulip-hero h1 a.headerlink {
display: none;
}
/* Header title area — pointer cursor so users know it goes home. */
.md-header__ellipsis {
cursor: pointer;
}
/* ---------------------------------------------------------------------------
* Notebook index filter — workbench-style live search.
* --------------------------------------------------------------------------- */
.notebook-filter {
margin: 1rem 0 1.5rem;
}
.notebook-filter__input {
width: 100%;
padding: 0.7rem 1rem;
font: inherit;
font-size: 0.95rem;
background: var(--md-default-bg-color);
color: var(--md-default-fg-color);
border: 1px solid var(--md-default-fg-color--lightest);
border-radius: 0.5rem;
transition: border-color 120ms, box-shadow 120ms;
}
.notebook-filter__input:focus {
outline: none;
border-color: var(--md-accent-fg-color);
box-shadow: 0 0 0 3px rgba(196, 36, 32, 0.12);
}
.notebook-filter__input::placeholder {
color: var(--md-default-fg-color--light);
}
/* Sidebar notebook filter — same UX, scaled to the primary sidebar. */
.sidebar-filter {
margin: 0.4rem 0.6rem 0.8rem;
list-style: none;
}
.sidebar-filter__input {
width: 100%;
padding: 0.4rem 0.6rem;
font: inherit;
font-size: 0.72rem;
background: var(--md-default-bg-color);
color: var(--md-default-fg-color);
border: 1px solid var(--md-default-fg-color--lightest);
border-radius: 0.35rem;
transition: border-color 120ms, box-shadow 120ms;
}
.sidebar-filter__input:focus {
outline: none;
border-color: var(--md-accent-fg-color);
box-shadow: 0 0 0 2px rgba(196, 36, 32, 0.18);
}
.sidebar-filter__input::placeholder {
color: var(--md-default-fg-color--light);
}
/* ---------------------------------------------------------------------------
* Mobile polish — narrow viewports (<= 48em).
*
* Material's default per-table horizontal scroll is workable for one
* table but painful on /notebooks/ where the page is a stack of nine.
* We let tables fit the viewport instead: 100% width, auto layout,
* prose wraps with `overflow-wrap: anywhere` (which only breaks when
* needed — unlike `break-all` which splits in the middle of perfectly
* sized tokens like `openai.gpt-5.5-pro`).
*
* The scrollwrap stays `auto`, not `hidden`: a dense table whose
* min-content width exceeds the viewport (code chips + 4-5 columns —
* the homepage comparison table, /integrations/, the mkdocstrings
* parameter tables) CANNOT shrink to 100%, and with `hidden` its last
* column was clipped with no way to reach it. Fit-first still wins
* wherever the table can compress; the overflow scrollbar only appears
* on the tables that would otherwise lose content.
*
* Also: cap any in-content image (workbench gif, etc.) at the column
* width so it never blows past the viewport edge.
* --------------------------------------------------------------------- */
@media (max-width: 48em) {
/* Tables: fit the viewport when possible, scroll in-place when not. */
.md-typeset__scrollwrap {
margin-left: -0.4rem;
margin-right: -0.4rem;
overflow-x: auto;
}
/* The global table rule sets `overflow: hidden` for rounded corners;
Material tables are their own scroll container, so on mobile that
clipped the rows of any table too dense to compress (min-content
wider than the phone). Restore in-table scrolling here — the tiny
unclipped 4px header corner is a fair trade for reachable content. */
.md-typeset table:not([class]) {
overflow-x: auto;
}
.md-typeset__table {
display: block;
width: 100%;
padding: 0 0.4rem;
overflow-x: visible;
}
.md-typeset__table > table:not([class]) {
width: 100%;
table-layout: auto;
font-size: 0.78rem;
}
.md-typeset table:not([class]) th,
.md-typeset table:not([class]) td {
padding: 0.45em 0.5em;
line-height: 1.4;
overflow-wrap: anywhere;
}
/* On /notebooks/ index the first column is the row number ("01"…"63") —
slim it to a chip so the prose columns get more room. Other pages
keep auto-sized first columns (Setting/DSN-style text headers). */
.notebook-filter ~ * .md-typeset__table > table:not([class]) th:first-child,
.notebook-filter ~ * .md-typeset__table > table:not([class]) td:first-child,
article:has(.notebook-filter) .md-typeset__table > table:not([class]) th:first-child,
article:has(.notebook-filter) .md-typeset__table > table:not([class]) td:first-child {
width: 1.6rem;
padding-left: 0.4em;
padding-right: 0.3em;
text-align: center;
color: var(--tulip-mute);
font-variant-numeric: tabular-nums;
}
/* Cap in-content media at the column width. */
.md-typeset img,
.md-typeset video {
max-width: 100%;
height: auto;
}
}
/* ---------------------------------------------------------------------------
* Mobile header — keep the wordmark, tagline, search icon, and source
* badges from colliding at narrow widths.
*
* At ~480–560px the "tulip" + tagline title block grows wide enough to
* visually overlap the search magnifier sitting in the right rail. We
* stage the trimming in two steps:
* - ≤ 56em: shrink the wordmark, tighten the tagline letter-spacing.
* - ≤ 30em: drop the tagline + the PyPI version pill entirely; the
* wordmark and brand/GitHub icons stay.
* --------------------------------------------------------------------- */
@media (max-width: 56em) {
.md-header__ellipsis > .md-header__topic:first-of-type > .md-ellipsis {
font-size: 1.2rem;
}
/* Title takes only the space it needs; the right rail keeps its slot. */
.md-header__title { flex: 0 0 auto; }
}
@media (max-width: 30em) {
/* Drop the PyPI badge to free up room on small phones.
!important: the <=60em rule above force-shows the badge with
!important, so the narrow-phone hide must outrank it. */
.md-header__source.md-header__pypi { display: none !important; }
.md-header__ellipsis > .md-header__topic:first-of-type > .md-ellipsis {
font-size: 1.1rem;
}
/* Tighter spacing between right-rail icons. */
.md-header__source.md-header__github { margin-left: 0.2rem; }
}
/* ---------------------------------------------------------------------------
* Code-block copy button
*
* mkdocs-material's default ``.md-clipboard`` uses
* ``--md-default-fg-color--lightest`` (#c5c8c8 in our light scheme,
* #4a4844 in slate). On our pale-cream code-block background the
* light-scheme variant is practically invisible until you hover.
* Promote the resting state to ``--lighter`` (darker neutral) for
* baseline contrast, and switch to tulip red on hover so the affordance
* is obvious.
* --------------------------------------------------------------------- */
.md-clipboard {
color: var(--md-default-fg-color--lighter);
opacity: 0.85;
transition: color 120ms ease-in-out, opacity 120ms ease-in-out;
}
.md-clipboard:focus,
.md-clipboard:hover {
color: var(--tl-red);
opacity: 1;
}
[data-md-color-scheme="slate"] .md-clipboard {
color: var(--md-default-fg-color--light);
opacity: 0.9;
}
[data-md-color-scheme="slate"] .md-clipboard:focus,
[data-md-color-scheme="slate"] .md-clipboard:hover {
color: var(--tl-red-light);
opacity: 1;
}
/* ===================================================================
tuliplabs brand — polished, cohesive (light + dark).
Light: clean WHITE header showcasing the precise tulip mark.
Dark: deep header. Pink->rose gradient as a thin hairline + the
logo + accents; tulip-rose links/CTAs.
(Scheme variables + --tulip-grad live in the blocks at the top of
this file — single source of truth.)
=================================================================== */
/* Header + tabs: soft elevation + a pink->rose hairline at the bottom. */
.md-header {
box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 2px 12px rgba(0,0,0,0.05);
border-bottom: 2px solid transparent;
border-image: var(--tulip-grad) 1;
}
.md-tabs { border-bottom: 1px solid rgba(0,0,0,0.06); }
[data-md-color-scheme="slate"] .md-tabs { border-bottom-color: rgba(255,255,255,0.06); }
/* Logo mark: a touch larger so the bloom reads clearly. */
.md-header__button.md-logo img { height: 1.7rem; width: auto; }
/* Wordmark next to the logo — lowercase, tight. */
.md-header__topic > .md-ellipsis { font-weight: 700; letter-spacing: -0.02em; }
/* Links + active/hover. */
.md-typeset a { color: #AD2E5C; }
.md-nav__link--active, .md-nav__item .md-nav__link--active { color: #AD2E5C; }
/* Primary CTA → rose, hover → warm orange. */
.md-typeset .md-button--primary {
background-color: #D6336C; border-color: #D6336C; color: #FFFFFF;
}
.md-typeset .md-button--primary:hover {
background-color: #AD2E5C; border-color: #AD2E5C; color: #FFFFFF;
}
/* Gradient garnish: hero accent word + footer wordmark. */
.md-typeset .tulip-hero h1 .accent,
.md-footer-meta .footer-brand__text {
background: var(--tulip-grad);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
.md-footer-meta .footer-brand__text { font-weight: 700; }
/* ===================================================================
tuliplabs — "modern dev-brand" redesign (distinct from the stock
Material template): Fraunces display type (--tulip-display, declared
in :root at the top of this file) and bordered hover-lift feature
cards.
=================================================================== */
/* Display font on headings, hero, header wordmark, tabs, footer brand. */
.md-typeset h1, .md-typeset h2, .md-typeset h3,
.md-typeset .tulip-hero h1,
.md-header__topic > .md-ellipsis,
.md-tabs__link,
.md-footer-meta .footer-brand__text {
font-family: var(--tulip-display);
letter-spacing: -0.02em;
}
/* ---- Feature cards: full border, rounded, hover-lift ---- */
.md-typeset .grid.cards.tulip-feature-cards > ul > li,
.md-typeset .grid.cards.tulip-feature-cards > ol > li {
border: 1px solid var(--tl-rule);
border-radius: 16px;
padding: 1.2rem 1.25rem;
background: var(--md-default-bg-color);
transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.md-typeset .grid.cards.tulip-feature-cards > ul > li:hover,
.md-typeset .grid.cards.tulip-feature-cards > ol > li:hover {
transform: translateY(-4px);
box-shadow: 0 16px 40px -16px rgba(20,16,24,0.18);
border-color: rgba(229,72,103,0.40);
background: var(--md-default-bg-color);
}
.md-typeset .grid.cards.tulip-feature-cards strong { color: var(--tulip-ink); }
.md-typeset .grid.cards.tulip-feature-cards .lg.middle { color: #D6336C; }
/* ===================================================================
Hero eyebrow ("TULIP AGENTS · MULTI-AGENT SDK") — tracked monospace
label (dev-brand), brand half accented in tulip rose.
=================================================================== */
.md-typeset p.tulip-product-name {
font-family: var(--tulip-mono, "JetBrains Mono", ui-monospace, monospace);
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
opacity: 1;
color: var(--tulip-mute);
}
.tulip-product-name .tpn-brand { color: #D6336C; font-weight: 600; }
.tulip-product-name .tpn-sep { color: var(--tulip-mute); opacity: 0.5; }
/* ===================================================================
Two-column hero (left copy / right code) refinements.
=================================================================== */
.md-typeset .tulip-hero h1:first-of-type {
text-transform: none;
font-size: 2.9rem;
line-height: 1.06;
}
.md-typeset .tulip-hero .tulip-hero__code .highlight {
border-radius: 14px;
box-shadow: 0 24px 60px -20px rgba(20, 16, 24, 0.28);
overflow: hidden;
}
/* Header title is clickable → home (see header-home.js). */
.md-header__title { cursor: pointer; }