/* ── Docs sidebar / content layout ────────────────────────────────────── Wider-than-default sidebar and a fixed 900px content column for docs pages. Marketing pages (`mode: "custom"` in their frontmatter) get `#navbar.is-custom` from Luma; we scope the docs layout to non-custom pages so marketing stays full-width. */ /* Sidebar nav: docs-only DOM, so the rules don't need an is-not-custom guard. */ #navigation-items a { hyphens: none !important; } #navigation-items { padding-right: 0.5rem !important; } #sidebar-content { width: 26rem !important; top: 4rem !important; height: calc(100vh - 4rem) !important; } /* TOC: docs-only DOM; hide by default, show once the viewport can fit it beside the 900px content column without overlap. */ #content-side-layout { display: none !important; } @media (min-width: 1610px) { #content-side-layout { display: flex !important; flex-direction: column; } } /* `#body-content` and `#content-area` are also present on marketing pages; gate their docs-mode geometry on `#navbar.is-not-custom`. */ @media (max-width: 1279px) { body:has(#navbar.is-not-custom) #sidebar-content { display: none !important; } body:has(#navbar.is-not-custom) #body-content { padding-left: 0 !important; } body:has(#navbar.is-not-custom) #content-area { max-width: 900px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 1.5rem !important; } } @media (min-width: 1280px) { body:has(#navbar.is-not-custom) #body-content { padding-left: 26rem !important; } /* The injected footer is the last child of #body-content, so it inherits the sidebar offset. Pull it back to full width and layer it above the fixed sidebar so, scrolled to the bottom, it spans the whole viewport below nav, content, and TOC. */ body:has(#navbar.is-not-custom) #aspect-footer { margin-left: -26rem; width: calc(100% + 26rem); position: relative; z-index: 30; } body:has(#navbar.is-not-custom) #content-area { max-width: 900px !important; margin-left: 0.25rem !important; padding-left: 1rem !important; } } @media (min-width: 1610px) { body:has(#navbar.is-not-custom) #content-area { margin-left: max(0.25rem, calc((100vw - 26rem - 18rem - 900px) / 2)) !important; } } /* ── Navbar ──────────────────────────────────────────────────────────── */ /* Ensure the navbar stays visible on custom-mode pages (Luma's default would hide it). Block layout so the full-width inner container lays out correctly. */ #navbar { display: block !important; } /* Match production navbar height (4rem) and logo size (2.5rem). Mintlify ships the navbar with `h-12` so we override that utility's height. The #sidebar-content `top` above is keyed off this height. */ #navbar .lg\:flex.items-center.h-12 { height: 4rem; } #navbar img.nav-logo { height: 2.5rem; } /* The native Mintlify footer is replaced by the injected unified footer (unified-footer.js + .af-* styles below) on every page. */ #footer { display: none !important; } /* Style the Log In navbar link to look like a secondary button */ .navbar-link:has(a[href*="oauth/login"]) > a { padding: 6px 14px; border-radius: 8px; border: 1px solid #d1d5db; font-size: 0.8125rem !important; font-weight: 500; } .navbar-link:has(a[href*="oauth/login"]) > a:hover { background: #f9fafb; border-color: #9ca3af; } html.dark .navbar-link:has(a[href*="oauth/login"]) > a { border-color: #3f3f46; color: #d4d4d8; } html.dark .navbar-link:has(a[href*="oauth/login"]) > a:hover { background: #27272a; border-color: #52525b; } /* Settings gear (injected by custom-navbar.js when logged in). The anchor it morphs from is the navbar's primary "Sign Up" button, which carries a filled-pill style (white in dark mode) — strip that so the gear renders as a plain icon button. The SVG's embedded Tailwind classes aren't part of the compiled CSS, so its color is set here too, muted to match the neighboring navbar icons. */ #navbar a[href*="oauth/portal"] { background: none !important; border: none !important; box-shadow: none !important; padding: 0.5rem !important; border-radius: 9999px; } #navbar a[href*="oauth/portal"]:hover { background: rgb(9 9 11 / 0.06) !important; } html.dark #navbar a[href*="oauth/portal"]:hover { background: rgb(255 255 255 / 0.1) !important; } #navbar a[href*="oauth/portal"] svg { color: rgb(9 9 11 / 0.7); width: 1.25rem; height: 1.25rem; } #navbar a[href*="oauth/portal"]:hover svg { color: rgb(9 9 11 / 0.95); } html.dark #navbar a[href*="oauth/portal"] svg { color: rgb(255 255 255 / 0.6); } html.dark #navbar a[href*="oauth/portal"]:hover svg { color: rgb(255 255 255 / 0.9); } /* ' str ' */ span.annotation:has(span.quoted > a) span.quoted > span.punctuation, span.source.python:has(span.quoted > a) span.quoted > span.punctuation { display: none; color: red; } span.parameters span.constant { color: purple; } span.meta.function span.storage { color: #cf222e; } span.meta.function span.generic-name { color: #0550ae; } span.meta.function.parameters span.variable { margin-left: 10px; } pre.shiki code a { text-decoration: underline; color: #0550ae; } /*span.meta.string.python:has(a) span.punctuation.definition.string.begin.python, span.meta.string.python:has(a) span.punctuation.definition.string.end.python { display: none; }*/ /* ── Marketing Page Layout ────────────────────────────────────────────── */ /* Hide Mintlify's topbar tabs site-wide — the docs sections are reached from the "Docs" hover dropdown in navbar-dropdowns.js, so the auto-generated topbar tab (Mintlify's

inside #navbar) is a duplicate of our manual "Docs" link. */ #navbar nav[aria-label="Main"] { display: none !important; } /* Fallback for older Luma builds that still emit .nav-tabs. */ .nav-tabs { display: none !important; } #navbar div:has(> .nav-tabs) { display: none !important; } /* ── Navbar Dropdowns (JS-injected panels) ───────────────────────────── */ /* Position the parent so the dropdown can be absolutely placed */ .navbar-link.has-dropdown { position: relative; } /* Chevron indicator on dropdown-enabled links */ .navbar-link.has-dropdown > a::after { content: ""; display: inline-block; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-left: 5px; margin-bottom: 2px; opacity: 0.5; transition: transform 0.2s; } .navbar-link.has-dropdown:hover > a::after { transform: rotate(-135deg); margin-bottom: 0; } /* Dropdown panel — appended to body, positioned by JS to escape backdrop-blur */ .navbar-dropdown-panel { display: none; flex-direction: column; position: fixed; z-index: 9999; background: white; border: 1px solid #e4e4e7; border-radius: 12px; padding: 8px 0; box-shadow: 0 10px 25px -5px rgba(0,0,0,.1), 0 4px 10px -5px rgba(0,0,0,.04); } /* Individual dropdown item */ .navbar-dropdown-item { display: flex; flex-direction: column; padding: 8px 16px; text-decoration: none !important; color: inherit; transition: background 0.15s; white-space: nowrap; } .navbar-dropdown-item:hover { background: #f4f4f5; } .navbar-dropdown-label { font-size: 0.8125rem; font-weight: 500; color: #18181b; line-height: 1.4; } .navbar-dropdown-desc { font-size: 0.75rem; color: #71717a; line-height: 1.4; } /* Dark mode — html.dark class (Mintlify toggle) */ html.dark .navbar-dropdown-panel { background: #1c1c1e; border-color: #3f3f46; box-shadow: 0 10px 25px -5px rgba(0,0,0,.3), 0 4px 10px -5px rgba(0,0,0,.15); } html.dark .navbar-dropdown-item:hover { background: #2c2c2e; } html.dark .navbar-dropdown-label { color: #fafafa; } html.dark .navbar-dropdown-desc { color: #a1a1aa; } /* ── Mobile Navigation Menu ───────────────────────────────────────────── */ .mobile-nav-overlay { display: none; position: fixed; inset: 0; z-index: 99999; } .mobile-nav-overlay.is-open { display: block; } .mobile-nav-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); opacity: 0; transition: opacity 0.25s; } .mobile-nav-overlay.is-open .mobile-nav-backdrop { opacity: 1; } .mobile-nav-drawer { position: absolute; top: 0; left: 0; bottom: 0; width: 85%; max-width: 360px; background: white; display: flex; flex-direction: column; transform: translateX(-100%); transition: transform 0.3s ease; overflow-y: auto; -webkit-overflow-scrolling: touch; } .mobile-nav-overlay.is-open .mobile-nav-drawer { transform: translateX(0); } .mobile-nav-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #e4e4e7; } .mobile-nav-logo { display: flex; align-items: center; } .mobile-nav-logo img { height: 24px; width: auto; } .mobile-nav-close { padding: 8px; color: #71717a; background: none; border: none; cursor: pointer; border-radius: 8px; } .mobile-nav-close:hover { background: #f4f4f5; color: #18181b; } .mobile-nav-items { flex: 1; padding: 8px 0; } .mobile-nav-link { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 20px; font-size: 0.9375rem; font-weight: 500; color: #18181b; text-decoration: none; border: none; background: none; cursor: pointer; text-align: left; } .mobile-nav-link:hover { background: #f4f4f5; } .mobile-nav-chevron { transition: transform 0.2s; color: #a1a1aa; } .mobile-nav-section.is-open .mobile-nav-chevron { transform: rotate(180deg); } .mobile-nav-subnav { display: none; padding: 0 0 8px 0; background: #fafafa; } .mobile-nav-section.is-open .mobile-nav-subnav { display: block; } .mobile-nav-subitem { display: flex; flex-direction: column; padding: 10px 20px 10px 32px; text-decoration: none; color: inherit; } .mobile-nav-subitem:hover { background: #f0f0f0; } .mobile-nav-subitem-label { font-size: 0.875rem; font-weight: 500; color: #27272a; } .mobile-nav-subitem-desc { font-size: 0.75rem; color: #71717a; margin-top: 2px; } .mobile-nav-cta { padding: 16px 20px; border-top: 1px solid #e4e4e7; } .mobile-nav-cta-btn { display: block; text-align: center; padding: 10px 16px; background: #176ACC; color: white; font-weight: 600; font-size: 0.875rem; border-radius: 8px; text-decoration: none; } .mobile-nav-cta-btn:hover { opacity: 0.9; } /* Dark mode — mobile menu */ html.dark .mobile-nav-drawer { background: #18181b; border-left: 1px solid #27272a; } html.dark .mobile-nav-header { border-color: #27272a; } html.dark .mobile-nav-close { color: #a1a1aa; } html.dark .mobile-nav-close:hover { background: #27272a; color: #fafafa; } html.dark .mobile-nav-link { color: #fafafa; } html.dark .mobile-nav-link:hover { background: #27272a; } html.dark .mobile-nav-subnav { background: #111113; } html.dark .mobile-nav-subitem:hover { background: #1e1e21; } html.dark .mobile-nav-subitem-label { color: #e4e4e7; } html.dark .mobile-nav-subitem-desc { color: #71717a; } html.dark .mobile-nav-cta { border-color: #27272a; } /* ── Marketing Page Styles ────────────────────────────────────────────── */ /* Hero gradient colors. Light-only by design: marketing pages are forced to light mode (see marketing-light-mode.js), so the gradient must not react to the html.dark class or the OS prefers-color-scheme setting. */ :root { --hero-gradient-start: #f0f6ff; --hero-gradient-end: #ffffff; } /* Ensure marketing page prose is readable */ .marketing-page-marker ~ * h1, .marketing-page-marker ~ * h2, .marketing-page-marker ~ * h3 { margin-top: 0; } /* 3-column responsive grid */ .marketing-grid-3 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 640px) { .marketing-grid-3 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .marketing-grid-3 { grid-template-columns: repeat(3, 1fr); } } /* Event cards and 2-col grids: stack on mobile */ @media (max-width: 767px) { .grid[style*="repeat(2"] { grid-template-columns: 1fr !important; } } /* ── Docs pages: ensure content doesn't overflow sidebar area ── */ /* Luma handles this natively, just making sure our added styles don't break it */ /* ── Pricing table improvements ─────────────────────────────────────── */ .overflow-x-auto table th { white-space: nowrap; } /* ── Blog page improvements ─────────────────────────────────────────── */ .blog-prose h1, .blog-prose h2, .blog-prose h3 { margin-top: 1.5em; } /* ── Ensure FeatureCard grids are responsive ────────────────────────── */ .grid.md\:grid-cols-2 { grid-template-columns: 1fr; } @media (min-width: 768px) { .grid.md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); } } .grid.lg\:grid-cols-3 { grid-template-columns: 1fr; } @media (min-width: 768px) { .grid.lg\:grid-cols-3 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .grid.lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); } } /* ── Marketing snippet image styling ──────────────────────────────────── Snippet components (Hero, MediaCard, etc.) take their image via children (an in MDX) so Mintlify rewrites the src. The wrapper divs below target that by class to apply per-component layout/treatment. */ /* Customer logos: monochrome cloud with hover lift. Size by height alone (no max-width) so square logomarks and wide wordmarks read at comparable visual weight, instead of wordmarks getting capped shorter than logomarks by a width constraint. */ .customer-logos-grid .customer-logo { height: 1.75rem; width: auto; filter: brightness(0); opacity: 0.45; transition: opacity 0.2s ease; } @media (min-width: 768px) { .customer-logos-grid .customer-logo { height: 2.25rem; } } .customer-logos-grid .customer-logo:hover { opacity: 0.75; } html.dark .customer-logos-grid .customer-logo { filter: invert(1) brightness(2); opacity: 0.55; } html.dark .customer-logos-grid .customer-logo:hover { opacity: 0.9; } /* ── Auth + theme controls: docs-only ─────────────────────────────────── Login / Logout / the Settings gear / the dark-mode control only make sense inside the docs experience (training courses, GitHub App linking). On marketing pages (custom mode, `#navbar.is-custom`) hide them all; the companion logic in marketing-light-mode.js also forces light mode there. The theme control is matched on a `theme-` PREFIX rather than an exact name. It was `theme-toggle`; Mintlify has since replaced it with `theme-preference-menu` (a System/Light/Dark menu rather than a two-state toggle), which this rule silently stopped matching. The result was a visible control on marketing pages that did nothing, because marketing-light-mode.js kept stripping the dark class straight back off — it looked broken rather than absent. A prefix keeps working across that kind of rename. Verified safe: `theme-preference-menu` is the only `data-component-name` present in the DOM on either page type, so the prefix cannot over-reach. */ body:has(#navbar.is-custom) [data-component-name^="theme-"], body:has(#navbar.is-custom) a[href*="oauth/login"], body:has(#navbar.is-custom) a[href*="oauth/portal"], body:has(#navbar.is-custom) a[href*="/logout"], body:has(#navbar.is-custom) .navbar-link:has(a[href*="oauth/login"]) { display: none !important; } /* Heading-to-subheading gap on marketing pages. A dedicated class with !important because inline style props on snippet JSX have proven unreliable under Mintlify's custom-page renderer. Applied to Hero and SectionHeader subtitles. */ .subtitle-gap { margin-top: 1rem !important; } /* Name-to-title gap on testimonial author blocks, same reasoning. */ .author-role-gap { display: block; margin-top: 0.625rem !important; } /* Investor logos on the About page. FirstMark's asset is a square monogram so the markup pairs it with a styled text wordmark; Preston-Werner's asset is a full wordmark and renders alone. Grayscale (not brightness-zeroed) keeps the marks legible while staying visually quiet. */ .investor-link { display: inline-flex; align-items: center; gap: 0.875rem; opacity: 0.75; transition: opacity 0.2s ease; } .investor-link:hover { opacity: 1; } .investor-logo { height: 2.5rem; width: auto; filter: grayscale(1); } .investor-logo--wordmark { height: 2rem; } html.dark .investor-logo { filter: grayscale(1) invert(1); } /* Case-study pages: company logo header + full-width hero image. Logos keep their brand colors; in dark mode a subtle white chip keeps dark marks legible without color-mangling filters. */ .case-study-logo > img { height: 2.5rem; width: auto; } html.dark .case-study-logo { display: inline-block; background: #ffffff; border-radius: 0.5rem; padding: 0.5rem 0.75rem; } .case-study-hero > img { width: 100%; border-radius: 1rem; box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.15); } /* Thank-you page mailbox illustration. */ .thank-you-illustration > img { display: block; margin: 0 auto; max-width: 22rem; width: 100%; height: auto; } /* Hero image takes the full available column width. Hero screenshots are authored on a transparent canvas (floating panels with baked-in shadows), so the wrapper must NOT paint a background or cast a box shadow: either one renders as a ghost rectangle behind the floating content. */ .hero-image > img { width: 100%; display: block; } /* Screenshot-style hero (opt-in via heroImageClassName="hero-image-bleed"). Unlike the transparent floating-panel art, this is an opaque product screenshot that WANTS a real card treatment: rounded corners + a soft drop shadow, scaled up and bled toward the right viewport edge à la BuildBuddy. Desktop-only breakout; on mobile it reverts to a normal in-column image so it never overflows a small screen. */ @media (min-width: 768px) { .hero-image-bleed { /* Grow past the 50/50 split and push the panel toward the wall. */ flex: 1.35 1 0%; /* Break out of the section's 1140px box up to the viewport edge: (100vw - 1140px) / 2 is the gutter between box and window; cap it so ultra-wide screens don't fling it too far. */ margin-right: calc(-1 * min((100vw - 1140px) / 2, 80px)); } .hero-image-bleed > img { border-radius: 16px; box-shadow: 0 2px 4px rgba(15, 23, 42, 0.04), 0 12px 32px rgba(15, 23, 42, 0.12), 0 40px 80px rgba(15, 23, 42, 0.10); /* Nudge the screenshot larger than its column so detail stays legible. */ width: 118%; max-width: none; } } html.dark .hero-image-bleed > img { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.45), 0 40px 80px rgba(0, 0, 0, 0.35); } /* MediaCard image fits within its 16:10 frame without cropping. `contain` (vs `cover`) prevents the platform/services product shots from getting their edges/labels clipped off — they're authored as full views, not background art. The wrapper has a soft tint so any letterboxing reads as intentional. */ .media-card-image { background-color: rgb(244 244 245); } html.dark .media-card-image { background-color: rgb(39 39 42); } .media-card-image > img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.3s ease; } .group:hover .media-card-image > img { transform: scale(1.02); } /* FeatureShowcase image gets a soft rounded card style. */ .feature-showcase-image > img { width: 100%; border-radius: 0.75rem; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1); border: 1px solid rgb(244 244 245); } html.dark .feature-showcase-image > img { border-color: rgb(63 63 70); } /* FeatureCard icon inside the rounded badge. */ .feature-card-icon > img, .feature-card-icon > svg { width: 2.25rem; height: 2.25rem; } /* Testimonial company logo: monochrome, dimmed. */ .testimonial-company-logo > img { height: 1.75rem; filter: brightness(0); opacity: 0.7; } html.dark .testimonial-company-logo > img { filter: invert(1) brightness(2); opacity: 0.8; } .testimonial-card-author-image > img { width: 3.25rem; height: 3.25rem; border-radius: 9999px; object-fit: cover; flex-shrink: 0; } .testimonial-card-company-logo > img { height: 1.75rem; max-width: 160px; object-fit: contain; object-position: left center; filter: brightness(0); opacity: 0.7; } html.dark .testimonial-card-company-logo > img { filter: invert(1) brightness(2); opacity: 0.8; } /* AboutCard / PersonCard / EventCard image variants. */ .about-card-image > img { width: 9rem; height: 9rem; margin-bottom: 1.5rem; border-radius: 1rem; object-fit: cover; box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1); } .person-card-image > img { width: 6rem; height: 6rem; border-radius: 9999px; object-fit: cover; margin-bottom: 1rem; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); } .event-card-image > img { width: 100%; height: 11rem; object-fit: cover; } /* Blog: hero image on a post page, and 16:10 thumbnail on a card. */ .blog-post-hero-image > img { width: 100%; border-radius: 0.75rem; margin-bottom: 2rem; max-height: 400px; object-fit: cover; } .blog-card-image > img { width: 100%; height: 180px; object-fit: cover; } /* ============================================ Docs screenshots: constrained width ============================================ */ .docs-screenshot { max-width: 620px; width: 100%; } /* Decorative mascot images in docs content */ .docs-mascot { max-width: 180px; width: 100%; } /* ============================================ 2-up marketing feature grid ============================================ */ .marketing-grid-2 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 640px) { .marketing-grid-2 { grid-template-columns: repeat(2, 1fr); } } /* FeatureCard/MediaCard: title-to-description gap (inline mt-* on the description is unreliable through the snippet paragraph remapping). */ .feature-card-desc { margin-top: 0.75rem !important; } /* ============================================ Unified footer (unified-footer.js) ============================================ */ #aspect-footer { display: block; padding: 3.5rem 2rem 2.5rem; border-top: 1px solid #e4e4e7; background: #ffffff; } html.dark #aspect-footer { border-top-color: rgb(63 63 70 / 0.6); background: #0b0c0e; } #aspect-footer .af-wrap { max-width: 1140px; margin: 0 auto; } /* One track per link group in unified-footer.js — five of them since Connect moved into the brand cell — then a wider track for the brand itself, which .af-brand claims via order: 99. If a group is added or removed there, this repeat count moves with it, or the last one wraps onto a row of its own. */ #aspect-footer .af-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) 1.35fr; gap: 2.5rem 1.5rem; } /* Scoped to .af-logo, not .af-brand. The brand cell also holds the social links now, and a descendant selector here coloured them near-black and sized their icons like the logo, which overlapped the labels. */ #aspect-footer .af-logo { color: #18181b; display: inline-flex; align-items: center; } html.dark #aspect-footer .af-logo { color: #ffffff; } #aspect-footer .af-logo svg { display: block; width: 7.4rem; height: 2rem; } /* Brand cell: logo, then the social links stacked beneath it, both right aligned against the footer's right edge. */ #aspect-footer .af-brand { order: 99; display: flex; flex-direction: column; align-items: flex-end; gap: 1.5rem; text-align: right; } #aspect-footer .af-social { display: flex; flex-direction: column; align-items: flex-end; gap: 0.15rem; } /* Icon then label, right aligned as a unit. Two tracks so the label keeps a consistent gap from its mark whatever its width. */ #aspect-footer .af-social-link { display: grid; grid-template-columns: 14px auto; align-items: center; justify-content: end; gap: 0.6rem; font-size: 0.875rem; line-height: 1.75rem; color: #71717a; transition: color 0.15s; } #aspect-footer .af-social-link svg { width: 14px; height: 14px; fill: currentColor; opacity: 0.45; transition: opacity 0.15s, fill 0.15s; } /* On hover the mark takes its own brand colour. The label darkens rather than following suit, so a red YouTube or blue LinkedIn label never competes with the link text in the neighbouring columns. */ #aspect-footer .af-social-link:hover { color: #18181b; } #aspect-footer .af-social-link:hover svg { fill: var(--af-brand); opacity: 1; } html.dark #aspect-footer .af-social-link { color: #a1a1aa; } html.dark #aspect-footer .af-social-link:hover { color: #ffffff; } html.dark #aspect-footer .af-social-link:hover svg { fill: var(--af-brand-dark); } @media (prefers-reduced-motion: reduce) { #aspect-footer .af-social-link, #aspect-footer .af-social-link svg { transition: none; } } #aspect-footer .af-head { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #18181b; margin-bottom: 1rem; } html.dark #aspect-footer .af-head { color: #f4f4f5; } #aspect-footer .af-col { display: flex; flex-direction: column; gap: 0.625rem; } #aspect-footer .af-link { font-size: 0.875rem; line-height: 1.4; color: #71717a; text-decoration: none; transition: color 0.15s ease; } #aspect-footer .af-link:hover { color: #2563eb; } html.dark #aspect-footer .af-link { color: #a1a1aa; } html.dark #aspect-footer .af-link:hover { color: #60a5fa; } #aspect-footer .af-bottom { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid #f4f4f5; text-align: center; } html.dark #aspect-footer .af-bottom { border-top-color: rgb(63 63 70 / 0.6); } #aspect-footer .af-copy { font-size: 0.75rem; color: #a1a1aa; } html.dark #aspect-footer .af-copy { color: #71717a; } @media (max-width: 1023px) { #aspect-footer .af-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #aspect-footer .af-brand { grid-column: 1 / -1; } /* Once the brand spans the full row, the desktop treatment stops making sense: right-aligning it would strand the logo and the social links against the right edge while every link column stays left aligned, and order: 99 would push the brand below them. Put it back at the top, left aligned, which is how this footer read before the change. */ #aspect-footer .af-brand { order: -1; align-items: flex-start; text-align: left; } #aspect-footer .af-social { align-items: flex-start; } #aspect-footer .af-social-link { justify-content: start; } } @media (max-width: 639px) { #aspect-footer .af-grid { grid-template-columns: 1fr; } } /* ============================================ Request a Demo nav CTA (marketing pages) ============================================ */ #aspect-demo-cta { display: inline-flex; align-items: center; padding: 0.5rem 1.15rem; margin-right: 0.5rem; border-radius: 0.625rem; font-size: 0.875rem; font-weight: 600; white-space: nowrap; color: #18181b; border: 2px solid transparent; background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(90deg, #176acc, #0ea5e9, #10b981) border-box; box-shadow: 0 1px 8px rgb(14 165 233 / 0.3); transition: box-shadow 0.15s ease, transform 0.15s ease; } #aspect-demo-cta:hover { box-shadow: 0 4px 18px rgb(14 165 233 / 0.6) !important; transform: translateY(-1px) !important; } html.dark #aspect-demo-cta { color: #fafafa !important; background: linear-gradient(#18181b, #18181b) padding-box, linear-gradient(90deg, #176acc, #0ea5e9, #10b981) border-box !important; box-shadow: 0 1px 10px rgb(14 165 233 / 0.25) !important; } /* "Get started for free" nav CTA (marketing pages, desktop). Order 1 puts it after the links/auth cluster (order 0) and before search (order 99). Both injected links are desktop-only; the mobile drawer carries its own. */ #aspect-signup-cta { order: 1; display: inline-flex; align-items: center; padding: 0.5rem 1.15rem; border-radius: 0.625rem; font-size: 0.875rem; font-weight: 600; white-space: nowrap; color: #ffffff; background: #176acc; border: 2px solid transparent; transition: opacity 0.15s ease; } #aspect-signup-cta:hover { opacity: 0.9; } /* Open app text link, injected next to the Settings gear (docs, logged in). */ #aspect-app-link { order: 2; padding: 0.5rem 0.25rem; font-size: 0.875rem; font-weight: 600; white-space: nowrap; color: rgb(9 9 11 / 0.8); } #aspect-app-link:hover { color: #176acc; } html.dark #aspect-app-link { color: rgb(255 255 255 / 0.8); } html.dark #aspect-app-link:hover { color: #ffffff; } @media (max-width: 1023px) { #aspect-signup-cta, #aspect-app-link { display: none; } } .aspect-demo-grad { color: #18181b !important; border: 2px solid transparent !important; background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(90deg, #176acc, #0ea5e9, #10b981) border-box !important; } /* Full-width break inside a flex-wrap logo row */ .logo-row-break { flex-basis: 100%; height: 0; } /* The navbar's primary Sign Up anchor is never shown as-is: custom-navbar.js turns it into Request a Demo (#aspect-demo-cta) or the Settings gear (href becomes oauth/portal), or hides it. Hide it from first paint on every page so it doesn't flash before the script runs. */ #navbar a[href="https://signup.aspect.build/"]:not(#aspect-signup-cta):not(#aspect-demo-cta) { display: none; } /* Request a Demo buttons everywhere: same gradient pill as the navbar CTA. */ .demo-gradient-btn { color: #18181b !important; border: 2px solid transparent !important; background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(90deg, #176acc, #0ea5e9, #10b981) border-box !important; box-shadow: 0 1px 10px rgb(14 165 233 / 0.4); transition: box-shadow 0.15s ease, transform 0.15s ease; } .demo-gradient-btn:hover { box-shadow: 0 4px 18px rgb(14 165 233 / 0.6) !important; transform: translateY(-1px); } html.dark .demo-gradient-btn { color: #fafafa !important; background: linear-gradient(#18181b, #18181b) padding-box, linear-gradient(90deg, #176acc, #0ea5e9, #10b981) border-box !important; } /* Showcase images with their own transparent composition: no frame. */ .feature-showcase-image > img.transparent-showcase { background: none; border: none; box-shadow: none; border-radius: 0; } /* ============================================ Sticky footer on short pages ============================================ */ /* The injected footer is the last child of #body-content. Make the container fill the viewport below the navbar and push the footer to the bottom, so short pages don't strand it mid-screen with whitespace below. */ #body-content { display: flex; flex-direction: column; min-height: calc(100vh - 4rem); } #body-content > * { flex-shrink: 0; } #aspect-footer { margin-top: auto; } /* Footer newsletter row */ #aspect-footer .af-news { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid #f4f4f5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; } html.dark #aspect-footer .af-news { border-top-color: rgb(63 63 70 / 0.6); } #aspect-footer .af-news-sub { font-size: 0.8125rem; color: #71717a; margin-top: 0.25rem; } #aspect-footer .af-news-row { display: flex; gap: 0.5rem; flex-wrap: wrap; } #aspect-footer .af-news-input { padding: 0.5rem 0.875rem; border-radius: 0.5rem; border: 1px solid #d4d4d8; background: #ffffff; color: #18181b; font-size: 0.875rem; min-width: 220px; outline: none; } #aspect-footer .af-news-input:focus { border-color: #176acc; } html.dark #aspect-footer .af-news-input { background: #18181b; border-color: rgb(63 63 70); color: #fafafa; } #aspect-footer .af-news-btn { padding: 0.5rem 1.1rem; border-radius: 0.5rem; background: #2563eb; color: #ffffff; font-size: 0.875rem; font-weight: 600; border: none; cursor: pointer; transition: background 0.15s ease; } #aspect-footer .af-news-btn:hover { background: #1d4ed8; } #aspect-footer .af-news-btn:disabled { background: #16a34a; cursor: default; } /* ============================================ Navbar: compact Search + Ask Assistant ============================================ */ /* Icon-only at every width (Mintlify shows labels at >=1500px container). */ #search-bar-entry, #assistant-entry { width: 2.25rem !important; min-width: 2.25rem !important; padding: 0 !important; justify-content: center !important; } #search-bar-entry span, #assistant-entry span { display: none !important; } /* The "Search or ask..." label is a bare text node; font-size: 0 removes it without affecting the attribute-sized svg icons. */ #search-bar-entry, #assistant-entry { font-size: 0 !important; } /* Tuck the search/assistant pair at the far right of the navbar, after the nav links, demo CTA, and auth controls. The pair's wrapper and the links/auth cluster are flex siblings inside .topbar-right-container. */ .topbar-right-container > div.relative { order: 99; gap: 0.5rem !important; margin-left: 0 !important; } .topbar-right-container > div.relative > div { gap: 0.5rem !important; } .topbar-right-container { gap: 0.5rem !important; } /* Blog post cover image (hero moved into article body so Mintlify's CDN rewrite applies; raw /images paths redirect to /login on the gated deployment). */ .blog-post-cover { width: 100%; max-height: 400px; object-fit: cover; border-radius: 0.75rem; margin-bottom: 0.5rem; } /* Cover variant for chart/screenshot covers: show the whole image, no crop. */ .blog-post-cover.blog-post-cover-full { max-height: none; height: auto; object-fit: fill; border: 1px solid #e2e8f0; } /* In-post figure (charts, screenshots): full image with a hairline border. */ .blog-post-figure { width: 100%; height: auto; border: 1px solid #e2e8f0; border-radius: 0.75rem; margin: 1.5rem 0 0.5rem; } /* ============================================ Marketing pages: pre-paint dark-flash guard ============================================ */ /* Mintlify's inline head script applies the stored dark theme before first paint; marketing-light-mode.js can only strip it after hydration. Custom JS cannot run pre-paint (no head injection), but this stylesheet can: force the page-level surfaces light on marketing pages while html.dark is still present, so the flash window shows a white page instead of a dark one. Component-level dark: utilities still flicker subtly until the strip runs; that's the achievable floor without Mintlify head-script support. */ html.dark body:has(#navbar.is-custom) { background: #ffffff !important; color-scheme: light; } html.dark body:has(#navbar.is-custom) #navbar { background: rgb(255 255 255 / 0.85) !important; } html.dark body:has(#navbar.is-custom) section { background-color: transparent !important; } html.dark body:has(#navbar.is-custom) h1, html.dark body:has(#navbar.is-custom) h2, html.dark body:has(#navbar.is-custom) h3 { color: #18181b !important; } /* Stacked images inside a feature showcase */ .feature-showcase-image > img + img { margin-top: 1rem; } /* Observability dashboards: layered deck with pronounced shadows */ #observability .feature-showcase-image > img { border-radius: 0.75rem; border: 1px solid rgb(228 228 231); box-shadow: 0 24px 48px -12px rgb(0 0 0 / 0.4) !important; } #observability .feature-showcase-image > img + img { position: relative; margin-top: -3.5rem; margin-left: 3rem; } /* The layered deck offsets the second card right (margin-left) and casts a wide shadow that pushed the deck into the adjacent text column. Reserve room on the image side so the deck (offset card + shadow) clears the copy. The section is flipped (image left, text right), so pad the image wrapper's trailing edge; margin-inline-end follows the flip if the side ever changes. */ @media (min-width: 768px) { #observability .feature-showcase-image { margin-inline-end: 3rem; } } /* Marketing pages: our hamburger drawer is the mobile nav; hide Mintlify's duplicate kebab ("More actions") menu that opens the same links. */ body:has(#navbar.is-custom) #navbar button[aria-label="More actions"] { display: none !important; } /* Docs navbar: theme toggle rides at the far right, after the assistant. The toggle and the search/assistant wrapper are both flex children of .topbar-right-container; links/auth stay at order 0, the search/assistant wrapper is order 99 (rule above), the toggle goes last. */ .topbar-right-container > button[data-component-name="theme-toggle"] { order: 100; } /* ── Blog tag filter bar (/blog) ───────────────────────────────────────── Injected by blog-filter.js above the first card section. Chips link to the real /blog/tags/ pages but filter in place when JS is active. */ .blog-tag-bar { max-width: 1140px; margin: 0 auto; padding: 0 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2rem; } .blog-tag-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.85rem; border-radius: 9999px; font-size: 0.8125rem; font-weight: 600; border: 1px solid rgb(228 228 231); color: rgb(82 82 91); background: #fff; transition: all 0.15s ease; cursor: pointer; text-decoration: none; } .blog-tag-chip:hover { border-color: rgb(96 165 250); color: rgb(37 99 235); } .blog-tag-chip[data-active="1"] { background: rgb(37 99 235); border-color: rgb(37 99 235); color: #fff; } .blog-tag-chip .blog-tag-count { font-size: 0.6875rem; opacity: 0.65; font-weight: 500; } .dark .blog-tag-chip { border-color: rgb(63 63 70); color: rgb(212 212 216); background: rgb(39 39 42); } .dark .blog-tag-chip:hover { border-color: rgb(96 165 250); color: rgb(147 197 253); } .dark .blog-tag-chip[data-active="1"] { background: rgb(37 99 235); border-color: rgb(37 99 235); color: #fff; } /* Blog filter: while a tag filter is active, the two card

s are tagged .blog-filtering (blog-filter.js). Collapse their tall py-16/py-24 padding to a small uniform band so the first row and the rest read as one continuous grid (the full-width newsletter strip between them is hidden during filtering). */ section.blog-filtering { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } /* ── Telemetry charts (/open-source/stats) ─────────────────────────────── Controls and containers are authored in open-source/stats.mdx; the charts are mounted by telemetry-charts.js. Light-only: custom marketing pages are forced to light mode (marketing-light-mode.js), so no .dark variants. */ .telemetry-controls { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; } .telemetry-filter-bar { display: flex; gap: 0; } .telemetry-filter-bar label { position: relative; display: flex; align-items: center; padding: 6px 16px; border: 1px solid rgb(212 212 216); cursor: pointer; user-select: none; font-size: 0.875rem; color: rgb(82 82 91); background: rgb(250 250 250); transition: all 0.15s ease; } .telemetry-filter-bar label:first-child { border-radius: 8px 0 0 8px; } .telemetry-filter-bar label:last-child { border-radius: 0 8px 8px 0; } .telemetry-filter-bar label:not(:first-child) { border-left: none; } /* Visually hidden rather than display:none — the label supplies the visible control, but display:none would drop the radio from the tab order and the accessibility tree, leaving the filters unusable by keyboard and screen reader. */ /* An option the current breakdown makes meaningless: charting CI systems already splits by CI, so a build-type filter would slice the same axis twice. Greyed rather than removed, so the bar does not reflow. */ .telemetry-filter-bar label.telemetry-option-disabled { opacity: 0.45; cursor: not-allowed; } .telemetry-filter-bar input[type="radio"] { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; } .telemetry-filter-bar label:has(input:checked) { background: #176acc; color: #fff; border-color: #176acc; } /* The input itself is invisible, so surface focus on the label instead. */ .telemetry-filter-bar label:has(input:focus-visible) { outline: 2px solid #176acc; outline-offset: 2px; z-index: 1; } .telemetry-dep-input { padding: 8px 12px; font-size: 0.875rem; border: 1px solid rgb(212 212 216); border-radius: 8px; background: #fff; color: rgb(24 24 27); width: 320px; max-width: 100%; } .telemetry-dep-input:focus { outline: none; border-color: #176acc; box-shadow: 0 0 0 3px rgba(23, 106, 204, 0.2); } .telemetry-select { padding: 8px 12px; font-size: 0.875rem; border: 1px solid rgb(212 212 216); border-radius: 8px; background: #fff; color: rgb(24 24 27); min-width: 180px; max-width: 100%; } .telemetry-select:focus { outline: none; border-color: #176acc; box-shadow: 0 0 0 3px rgba(23, 106, 204, 0.2); } /* Series-count slider. Shared by all three charts, so it sits with the first one's controls rather than being repeated. */ .telemetry-slider { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: rgb(82 82 91); } .telemetry-slider input[type="range"] { width: 110px; accent-color: #176acc; } .telemetry-slider span:last-child { min-width: 1.5em; font-variant-numeric: tabular-nums; color: rgb(24 24 27); } .telemetry-chart { width: 100%; height: 480px; } @media (max-width: 640px) { .telemetry-chart { height: 380px; } } .telemetry-status { text-align: center; color: rgb(113 113 122); font-size: 0.875rem; margin-top: 0.75rem; } /* "Coming soon" chip for capabilities not yet available on an offering. Inline in prose and in table cells: Coming soon. */ .coming-soon-chip { display: inline-block; padding: 0.05rem 0.55rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; line-height: 1.4; white-space: nowrap; vertical-align: middle; color: rgb(29 78 216); background: rgb(239 246 255); border: 1px solid rgb(191 219 254); } .dark .coming-soon-chip { color: rgb(147 197 253); background: rgb(30 58 138 / 0.35); border-color: rgb(30 64 175); } /* "Planned" chip: further out than "Coming soon", so neutral rather than blue. */ .planned-chip { display: inline-block; padding: 0.05rem 0.55rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; line-height: 1.4; white-space: nowrap; vertical-align: middle; color: rgb(63 63 70); background: rgb(244 244 245); border: 1px solid rgb(212 212 216); } .dark .planned-chip { color: rgb(212 212 216); background: rgb(39 39 42); border-color: rgb(63 63 70); } /* Marks a page gated to Workflows subscribers (frontmatter `groups: ["workflows-subscriber"]`). Every gated page carries it as its first line; public and login-only pages never do. */ .subscriber-chip { display: inline-block; padding: 0.05rem 0.55rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; line-height: 1.4; white-space: nowrap; vertical-align: middle; color: rgb(146 64 14); background: rgb(255 251 235); border: 1px solid rgb(253 230 138); } .dark .subscriber-chip { color: rgb(252 211 77); background: rgb(120 53 15 / 0.35); border-color: rgb(146 64 14); } /* Site-wide announcement banner (docs.json "banner"). Mintlify paints it with colors.dark (#1F2E35); recolour it Aspect blue without touching that token, which the theme uses elsewhere. #banner is Mintlify's own single element. */ #banner { background-color: #176ACC !important; } #banner button:hover { background-color: #1257A8 !important; } /* Homepage hero tour video. The video carries its own backdrop and window shadow, so it skips the screenshot card treatment and instead feathers its edges into the hero gradient. */ .hero-video { display: block; width: 100%; height: auto; -webkit-mask-image: radial-gradient(75% 75% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(75% 75% at 50% 50%, #000 62%, transparent 100%); } /* The video carries its own margins, so unlike the screenshot it stays inside the (already wider) bleed column rather than overflowing the viewport. */ @media (min-width: 768px) { .hero-image-bleed > .hero-video { width: 100%; max-width: none; } } .hero-video-host { position: relative; } .hero-video-replay { position: absolute; right: 9%; bottom: 12%; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid #e2e8f0; background: rgba(255, 255, 255, 0.92); color: #334155; font-size: 13px; font-weight: 600; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12); cursor: pointer; opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity 0.4s ease, transform 0.4s ease, color 0.2s ease; } .hero-video-host.is-ended .hero-video-replay { opacity: 1; transform: none; pointer-events: auto; } .hero-video-replay:hover { color: #176acc; } /* Homepage numbered steps (setup and the Free → Team → Enterprise ladder). Children: a column per step, each opening with a .ladder-step circle, and optional .ladder-label gap labels as the 2nd and 4th children. The dashed connector runs down the left edge until the grid goes 3-up. Cards need an opaque background, since the connector passes behind them. */ .ladder { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; } .ladder::before { content: ""; position: absolute; left: 19px; top: 20px; bottom: 20px; border-left: 2px dashed rgb(191 219 254); } .ladder > * { position: relative; z-index: 1; display: flex; flex-direction: column; } .ladder-step { width: 40px; height: 40px; flex-shrink: 0; margin-bottom: 1.5rem; display: flex; align-items: center; justify-content: center; border-radius: 9999px; font-weight: 600; color: rgb(29 78 216); background: rgb(239 246 255); border: 1px solid rgb(191 219 254); } .ladder-label { padding-left: 3.5rem; font-size: 0.8125rem; color: rgb(113 113 122); } @media (min-width: 1024px) { .ladder { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ladder::before { left: 16.6%; right: 16.7%; top: 19px; bottom: auto; border-left: 0; border-top: 2px dashed rgb(191 219 254); } .ladder-step { margin-left: auto; margin-right: auto; } .ladder-label { position: absolute; top: 19px; padding-left: 0; white-space: nowrap; transform: translate(-50%, calc(-100% - 0.5rem)); } .ladder > .ladder-label:nth-child(2) { left: 33.333%; } .ladder > .ladder-label:nth-child(4) { left: 66.667%; } } .dark .ladder::before { border-color: rgb(30 64 175); } .dark .ladder-step { color: rgb(147 197 253); background: rgb(30 58 138 / 0.35); border-color: rgb(30 64 175); } .dark .ladder-label { color: rgb(161 161 170); } .check-list { list-style: none; padding-left: 0; } .check-list li { position: relative; padding-left: 1.5rem; } .check-list li::before { content: ""; position: absolute; left: 0; top: 0.125rem; width: 16px; height: 16px; color: rgb(37 99 235); background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M16.7 5.3a1 1 0 0 1 0 1.4l-8 8a1 1 0 0 1-1.4 0l-4-4a1 1 0 1 1 1.4-1.4L8 12.6l7.3-7.3a1 1 0 0 1 1.4 0z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M16.7 5.3a1 1 0 0 1 0 1.4l-8 8a1 1 0 0 1-1.4 0l-4-4a1 1 0 1 1 1.4-1.4L8 12.6l7.3-7.3a1 1 0 0 1 1.4 0z'/%3E%3C/svg%3E") center / contain no-repeat; } .dark .check-list li::before { color: rgb(96 165 250); } /* Pricing page: the comparison table keeps its feature column in view when it scrolls sideways. */ .compare-table td:first-child, .compare-table th:first-child { position: sticky; left: 0; background: #fff; } .dark .compare-table td:first-child, .dark .compare-table th:first-child { background: rgb(24 24 27); } .compare-table tr.compare-section td { background: rgb(250 250 250); } .dark .compare-table tr.compare-section td { background: rgb(39 39 42); } /* Pricing comparison: one sticky header row (below the banner and 4rem navbar), hairline rows, plan names repeated per section on mobile. */ .compare-anchors { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.25rem; margin-bottom: 1.5rem; } .compare-wrap { overflow-x: auto; } .compare-table .compare-label-col { width: 40%; } .compare-table tbody tr:not(.compare-section) td { border-bottom: 1px solid rgb(244 244 245); } .compare-table tbody tr:not(.compare-section):hover td { background: rgb(250 250 250); } .compare-table td:first-child { z-index: 1; } .compare-sub { margin-top: 0.125rem; font-size: 0.75rem; color: rgb(113 113 122); font-weight: 400; } .compare-section .compare-sub { text-transform: none; letter-spacing: normal; } .compare-eyebrow { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(113 113 122); } .compare-plan-repeat { text-align: center; font-size: 0.75rem; font-weight: 600; color: rgb(113 113 122); } @media (min-width: 768px) { .compare-wrap { overflow: visible; } .compare-table thead th { position: sticky; top: 100px; z-index: 2; background: #fff; box-shadow: inset 0 -1px 0 rgb(228 228 231); } .compare-table thead th:first-child { z-index: 3; } .compare-plan-repeat { color: transparent; } } @media (max-width: 767px) { .compare-table .compare-label-col { width: 9.5rem; } } .dark .compare-table tbody tr:not(.compare-section) td { border-color: rgb(39 39 42); } .dark .compare-table tbody tr:not(.compare-section):hover td { background: rgb(32 32 35); } .dark .compare-table thead th { background: rgb(24 24 27); box-shadow: inset 0 -1px 0 rgb(63 63 70); } /* Pricing metering panel and FAQ columns, as plain CSS: the divide-* and space-y-8 utilities aren't used elsewhere on the site. */ .meter-panel { display: grid; grid-template-columns: 1fr; } .meter-panel > * + * { border-top: 1px solid rgb(228 228 231); } @media (min-width: 768px) { .meter-panel { grid-template-columns: repeat(3, minmax(0, 1fr)); } .meter-panel > * + * { border-top: 0; border-left: 1px solid rgb(228 228 231); } } .dark .meter-panel > * + * { border-color: rgb(63 63 70); } .faq-col { display: flex; flex-direction: column; gap: 2rem; } .faq-col > * { margin-top: 0 !important; } /* Card artwork at a fixed height, whatever its aspect ratio. */ .card-art > img { height: 4rem; width: auto; } /* Homepage stats grid and emphasized tier card, as plain CSS so they don't depend on generated Tailwind classes. */ .stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; } @media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .stats-grid-label { max-width: 14rem; } @media (min-width: 1024px) { .tier-lift { transform: translateY(-0.5rem); } } .tier-pill { position: absolute; top: -0.75rem; left: 50%; transform: translateX(-50%); } /* Homepage Build Results UI thumbnails: one 2:1 frame so screenshots of different shapes line up. */ .shot-frame { aspect-ratio: 2 / 1; overflow: hidden; border-radius: 0.75rem; border: 1px solid rgb(228 228 231); box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1); background: rgb(239 246 255); } .shot-frame > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; } .dark .shot-frame { border-color: rgb(63 63 70); } /* Homepage setup steps: one full-width row per step, numbered circles on the left joined by a dashed line, text beside the commands from 1024px. Reuses .ladder-step. */ .setup-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; } .setup-steps > div { position: relative; display: flex; align-items: flex-start; gap: 1rem; } .setup-steps > div:not(:last-child)::before { content: ""; position: absolute; left: 19px; top: 40px; bottom: -1.5rem; border-left: 2px dashed rgb(191 219 254); } .setup-steps .ladder-step { margin: 0; } .setup-steps .setup-card { flex: 1; min-width: 0; } .setup-steps .setup-cmds { padding-top: 1rem; } .setup-steps .setup-cmds .code-block { margin-top: 0; margin-bottom: 0; } @media (min-width: 1024px) { .setup-steps .ladder-step { margin-top: 1.25rem; } .setup-steps > div:not(:last-child)::before { top: calc(1.25rem + 40px); } .setup-steps .setup-card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 2rem; align-items: start; } .setup-steps .setup-cmds { padding-top: 0; } } .dark .setup-steps > div::before { border-color: rgb(30 64 175); } /* Pricing-page anchors: land below the announcement banner and sticky navbar. */ #metering, #compare, #enterprise, #faq, #enterprise-pricing, #faq-move-to-team, #bazel-support, #compare-usage, #compare-remote-cache, #compare-build-results, #compare-remote-execution, #compare-ci-runners, #compare-identity, #compare-support, #compare-open-source { scroll-margin-top: 8rem; } /* The comparison sections also clear the table's sticky header row. */ @media (min-width: 768px) { #compare-usage, #compare-remote-cache, #compare-build-results, #compare-remote-execution, #compare-ci-runners, #compare-identity, #compare-support, #compare-open-source { scroll-margin-top: 12rem; } } /* /almost-here: signup.aspect.build redirects there before launch, so hide the navbar sign-up button on that page. */ body:has(.almost-here-marker) #aspect-signup-cta { display: none !important; } section.almost-here-form { padding-top: 0 !important; } .status-dot { position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 9999px; background: #176acc; } .status-dot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: status-ping 1.8s cubic-bezier(0, 0, 0.2, 1) infinite; } @keyframes status-ping { 75%, 100% { transform: scale(2.4); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .status-dot::after { animation: none; } }

​Next steps

Next steps