LandingHero.module.scss

// Lightweight docs page-header (Docs 2026, #6681). A left-aligned bordered
// band — brand Heading + muted Text intro + a Button group — over the classic
// right-anchored hero banner art. The bottom border (brand border-subtle, which
// adapts gray-2 light / gray-6 dark) frames it against the section below,
// matching the Figma "framed sections" treatment. Horizontal inset comes from
// the wrapping container-xl so the header aligns with the sections below at
// every width.
.landingHero {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
  padding: 2rem 0 2.5rem;
  width: 100%;
  border-bottom: 1px solid var(--brand-color-border-subtle);
  // Hero banner art is right-anchored isometric artwork on a transparent
  // field. `auto 100%` scales it to the band's own (content-driven) height so
  // the header keeps its lighter Docs 2026 proportions instead of growing to
  // fit the art; pinned to the right edge, leaving the left clear for the
  // heading/intro/actions stacked on top.
  background-size: auto 100%;
  background-position: center right;
  background-repeat: no-repeat;
  // Anchor the art to the true right edge (the border box) so the right-side
  // text gutter added below insets only the heading/intro, not the artwork.
  background-origin: border-box;
}

// Brand `Heading size="2"` owns the type scale (40px desktop, per Figma);
// this only adds an optical max-width so long titles wrap before the edge.
.heroHeading {
  margin: 0;
  max-width: 48rem;
}

// Wraps the RenderedHTML intro (kept as raw HTML rather than a Text `as="p"`,
// which can't hold block-level intro markup). Brand `Text size="200" muted`
// owns the type/color (16px, per Figma); this only bounds the line length.
.heroDescription {
  margin: 0;
  max-width: 48rem;
}

@media (max-width: 865px) {
  .landingHero {
    padding: 1.5rem 0 2rem;
    // Drop the banner art on narrow viewports where it would collide with the
    // text; the header falls back to the plain bordered band.
    background-image: none !important;
  }
}

// Where the art IS shown, the intro can extend far enough right to overlap the
// right-anchored isometric art (the heading is short enough that it never
// does). Instead of reserving a right gutter that shrinks the text column, put
// a frosted-glass panel behind the intro so it stays readable over the art —
// matching the homepage hero treatment (HomePageHero.module.scss `.content`).
// Guarded to >=866px because the art is hidden below that, so no panel is
// needed on mobile.
@media (min-width: 866px) {
  .heroIntroScrim {
    display: inline-block;
    backdrop-filter: blur(1rem);
    background-color: color-mix(
      in srgb,
      var(--color-canvas-default) 70%,
      transparent
    );
    border-radius: var(--brand-borderRadius-medium, 0.75rem);
    padding: 0.5rem 0.75rem;
    margin: -0.5rem -0.75rem;
  }
}