@cronos-labs/ui 0.2.0

package/dist/Header/styles.js

@@ -0,0 +1,770 @@
+import styled from 'styled-components';
+export const HeaderFrame = styled.div `
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: ${({ theme }) => theme.zIndex.sticky};
+  isolation: isolate;
+  padding-top: ${({ theme }) => theme.sizes.xxs};
+  padding-bottom: ${({ theme }) => theme.sizes.xxs};
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    background-color: ${({ $backgroundColor, $mobileBackgroundColor, $contrast }) => $contrast ? 'transparent' : ($mobileBackgroundColor ?? $backgroundColor)};
+    transition: ${({ $shouldAnimatePresentation, theme }) => $shouldAnimatePresentation
+    ? `background-color ${theme.motion.duration.surface} ${theme.motion.easing.emphasized}`
+    : 'none'};
+  }
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    padding-top: ${({ theme }) => theme.sizes.xs};
+    padding-bottom: ${({ theme }) => theme.sizes.sm};
+
+    &::before {
+      background-color: ${({ $backgroundColor, $contrast }) => $contrast ? 'transparent' : $backgroundColor};
+    }
+  }
+`;
+const scaleExpr = 'clamp(0, (var(--home-transition, 0) - 0.05) / 0.75, 1) * 9';
+const bandHalf = `calc(7.5vw * (${scaleExpr}))`;
+const blackTopEdge = `calc(70vh - (var(--home-transition, 0) * 20vh) - (16.34vw * (${scaleExpr})))`;
+const verticalGradient = `linear-gradient(
+  to bottom,
+  #000 0,
+  #000 ${blackTopEdge},
+  #fff ${blackTopEdge},
+  #fff 100%
+)`;
+const columnGradient = `linear-gradient(
+  90deg,
+  #000 0,
+  #000 calc(50vw - ${bandHalf}),
+  #fff calc(50vw - ${bandHalf}),
+  #fff calc(50vw + ${bandHalf}),
+  #000 calc(50vw + ${bandHalf})
+)`;
+const splitBackground = `
+  background-image: ${verticalGradient}, ${columnGradient};
+  background-blend-mode: multiply;
+  background-attachment: fixed, fixed;
+  background-size: 100vw 100vh, 100vw 100vh;
+  background-repeat: no-repeat, no-repeat;
+`;
+/**
+ * Builds a viewport-fixed gradient that swaps two colours bottom-to-top at the
+ * dark shape's rising edge (no column constraint).
+ *
+ * @param top - Colour shown above the rising edge.
+ * @param bottom - Colour shown below the rising edge.
+ * @returns A CSS declaration block (`background-image` + fixed attachment).
+ */
+const verticalSwap = (top, bottom) => `
+  background-image: linear-gradient(
+    to bottom,
+    ${top} 0,
+    ${top} ${blackTopEdge},
+    ${bottom} ${blackTopEdge},
+    ${bottom} 100%
+  );
+  background-attachment: fixed;
+  background-size: 100vw 100vh;
+  background-repeat: no-repeat;
+`;
+/**
+ * As {@link verticalSwap}, but clips the gradient to the glyphs so it replaces
+ * the text colour instead of painting a background.
+ *
+ * @param top - Glyph colour above the rising edge.
+ * @param bottom - Glyph colour below the rising edge.
+ * @returns A CSS declaration block with `background-clip: text`.
+ */
+const verticalSwapText = (top, bottom) => `
+  color: transparent;
+  ${verticalSwap(top, bottom)}
+  -webkit-background-clip: text;
+  background-clip: text;
+`;
+export const HeaderShell = styled.header `
+  width: min(
+    calc(100% - (2 * ${({ theme }) => theme.layout.pagePaddingInline})),
+    ${({ theme }) => theme.layout.landingWideWidth}
+  );
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  gap: ${({ theme }) => theme.sizes.xl};
+  color: ${({ $textColor, $mobileTextColor }) => $mobileTextColor ?? $textColor};
+  transition: ${({ $shouldAnimatePresentation, theme }) => $shouldAnimatePresentation
+    ? `color ${theme.motion.duration.surface} ${theme.motion.easing.emphasized}`
+    : 'none'};
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    grid-template-columns:
+      calc(
+        ${({ theme }) => theme.layout.brandLogoMarkSize} +
+          ${({ theme }) => theme.layout.brandLogoGap} +
+          ${({ theme }) => theme.layout.brandWordmarkWidth}
+      )
+      minmax(0, 1fr)
+      max-content;
+    color: ${({ $textColor }) => $textColor};
+  }
+`;
+export const HeaderBrandLink = styled.a `
+  display: inline-flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.layout.brandLogoGap};
+  width: fit-content;
+  text-decoration: none;
+
+  &:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: 6px;
+    border-radius: 4px;
+  }
+`;
+export const LogoMark = styled.img `
+  display: block;
+  width: ${({ theme }) => theme.layout.brandLogoMarkSize};
+  height: ${({ theme }) => theme.layout.brandLogoMarkSize};
+  object-fit: contain;
+  filter: ${({ $variant, $mobileVariant }) => ($mobileVariant ?? $variant) === 'inverse' ? 'invert(1) brightness(100)' : 'none'};
+  transition: ${({ $shouldAnimatePresentation, theme }) => $shouldAnimatePresentation
+    ? `filter ${theme.motion.duration.surface} ${theme.motion.easing.emphasized}`
+    : 'none'};
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    filter: ${({ $variant }) => ($variant === 'inverse' ? 'invert(1) brightness(100)' : 'none')};
+  }
+`;
+export const Wordmark = styled.img `
+  width: ${({ theme }) => theme.layout.brandWordmarkWidth};
+  height: ${({ theme }) => theme.layout.brandWordmarkHeight};
+  object-fit: contain;
+  filter: ${({ $variant, $mobileVariant }) => ($mobileVariant ?? $variant) === 'inverse' ? 'invert(1) brightness(100)' : 'none'};
+  transition: ${({ $shouldAnimatePresentation, theme }) => $shouldAnimatePresentation
+    ? `filter ${theme.motion.duration.surface} ${theme.motion.easing.emphasized}`
+    : 'none'};
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    filter: ${({ $variant }) => ($variant === 'inverse' ? 'invert(1) brightness(100)' : 'none')};
+  }
+`;
+const splitGlyphMask = (url) => `
+  ${splitBackground}
+  -webkit-mask: url("${url}") no-repeat center / contain;
+  mask: url("${url}") no-repeat center / contain;
+`;
+export const BrandMarkMask = styled.span `
+  display: block;
+  width: ${({ theme }) => theme.layout.brandLogoMarkSize};
+  height: ${({ theme }) => theme.layout.brandLogoMarkSize};
+  ${({ $url }) => splitGlyphMask($url)}
+`;
+export const BrandWordmarkMask = styled.span `
+  display: block;
+  width: ${({ theme }) => theme.layout.brandWordmarkWidth};
+  height: ${({ theme }) => theme.layout.brandWordmarkHeight};
+  ${({ $url }) => splitGlyphMask($url)}
+
+  @media (max-width: 1023px) {
+    background: #000;
+  }
+`;
+export const Nav = styled.nav `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 50px;
+  display: none;
+
+  > a,
+  > span[aria-disabled='true'] {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    font-size: 1rem;
+    font-weight: ${({ theme }) => theme.fontWeight.semibold};
+    letter-spacing: -0.02em;
+    line-height: ${({ theme }) => theme.typography.lineHeight.tight};
+    color: inherit;
+    transition:
+      opacity ${({ theme }) => theme.motion.duration.fast}
+        ${({ theme }) => theme.motion.easing.standard},
+      transform ${({ theme }) => theme.motion.duration.fast}
+        ${({ theme }) => theme.motion.easing.standard};
+  }
+
+  > a {
+    &:hover {
+      opacity: 0.7;
+      transform: translateY(-1px);
+    }
+
+    &:focus-visible {
+      outline: 2px solid currentColor;
+      outline-offset: 6px;
+      text-decoration: underline;
+      text-decoration-thickness: 2px;
+      text-underline-offset: 6px;
+    }
+  }
+
+  > span[aria-disabled='true'] {
+    cursor: default;
+    color: ${({ $variant, theme }) => $variant === 'inverse' ? 'rgb(255 255 255 / 0.48)' : theme.colors.textDarkSubtle};
+    opacity: ${({ $variant }) => ($variant === 'inverse' ? 1 : 0.58)};
+  }
+
+  > span[aria-disabled='true'] > span {
+    background: ${({ $variant }) => $variant === 'inverse' ? '#272727' : 'rgb(255 255 255 / 0.42)'};
+    color: ${({ $variant }) => $variant === 'inverse' ? 'rgb(255 255 255 / 0.5)' : 'currentColor'};
+    box-shadow: ${({ $variant }) => $variant === 'inverse' ? 'none' : 'inset 0 0 0 1px rgb(0 0 0 / 0.08)'};
+  }
+
+  ${({ $contrast }) => $contrast
+    ? `
+    && > a {
+      color: transparent;
+      ${splitBackground}
+      -webkit-background-clip: text;
+      background-clip: text;
+    }
+
+    && > span[aria-disabled='true'] {
+      opacity: calc(0.58 + 0.42 * clamp(0, (var(--home-transition, 0) - 0.18) / 0.07, 1));
+      ${verticalSwapText('#7d828b', 'rgb(255 255 255 / 0.48)')}
+    }
+
+    && > span[aria-disabled='true'] > span {
+      background-color: transparent;
+      ${verticalSwap('rgb(255 255 255 / 0.42)', '#272727')}
+      box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.08);
+    }
+
+    && > span[aria-disabled='true'] > span > span {
+      ${verticalSwapText('#7d828b', 'rgb(255 255 255 / 0.5)')}
+    }
+  `
+    : ''}
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    display: flex;
+  }
+`;
+export const NavDropdown = styled.div `
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+`;
+export const NavDropdownTrigger = styled.button `
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 1rem;
+  font-weight: ${({ theme }) => theme.fontWeight.semibold};
+  letter-spacing: -0.02em;
+  line-height: ${({ theme }) => theme.typography.lineHeight.tight};
+  transition:
+    opacity ${({ theme }) => theme.motion.duration.fast}
+      ${({ theme }) => theme.motion.easing.standard},
+    transform ${({ theme }) => theme.motion.duration.fast}
+      ${({ theme }) => theme.motion.easing.standard};
+
+  &:hover {
+    opacity: 0.7;
+    transform: translateY(-1px);
+  }
+
+  &:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: 6px;
+    border-radius: 4px;
+  }
+`;
+export const NavDropdownLabel = styled.span `
+  ${({ $contrast }) => $contrast
+    ? `
+    color: transparent;
+    ${splitBackground}
+    -webkit-background-clip: text;
+    background-clip: text;
+  `
+    : ''}
+`;
+export const NavDropdownChevron = styled.span `
+  position: relative;
+  width: 12px;
+  height: 12px;
+  flex: 0 0 auto;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 7px;
+    height: 7px;
+    border-right: 2px solid currentColor;
+    border-bottom: 2px solid currentColor;
+    /* Offset the rotated caret so its visual mass stays centred in both states. */
+    transform: translate(-50%, ${({ $open }) => ($open ? '-25%' : '-75%')})
+      rotate(${({ $open }) => ($open ? '225deg' : '45deg')});
+    transform-origin: center;
+    transition: transform ${({ theme }) => theme.motion.duration.fast}
+      ${({ theme }) => theme.motion.easing.standard};
+  }
+`;
+export const NavDropdownMenu = styled.div `
+  position: absolute;
+  top: calc(100% + 12px);
+  left: 50%;
+  transform: translateX(-50%);
+  /* Stay mounted and toggle display so the menu never lays out in-flow on first
+     open (which caused a one-frame layout shift when it mounted on hover). */
+  display: ${({ $open }) => ($open ? 'block' : 'none')};
+  z-index: ${({ theme }) => theme.zIndex.overlay};
+  width: max-content;
+  min-width: 180px;
+  padding: 4px;
+  border: 1px solid #f2f2f3;
+  border-radius: 12px;
+  background: ${({ theme }) => theme.colors.light};
+  color: ${({ theme }) => theme.colors.ink};
+  box-shadow:
+    0 15px 20px -5px rgb(38 38 38 / 0.1),
+    0 5px 10px -5px rgb(38 38 38 / 0.05);
+
+  /* Invisible bridge so the pointer can cross the gap without closing on hover. */
+  &::before {
+    content: '';
+    position: absolute;
+    top: -12px;
+    left: 0;
+    right: 0;
+    height: 12px;
+  }
+`;
+export const NavDropdownList = styled.div `
+  display: grid;
+  gap: 2px;
+`;
+export const NavDropdownOption = styled.a `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-height: 44px;
+  padding: 12px;
+  border-radius: 8px;
+  background: transparent;
+  color: inherit;
+  font-size: 1rem;
+  font-weight: ${({ theme }) => theme.fontWeight.semibold};
+  letter-spacing: -0.02em;
+  line-height: ${({ theme }) => theme.typography.lineHeight.tight};
+  text-align: left;
+  text-decoration: none;
+  white-space: nowrap;
+
+  &:hover {
+    background: ${({ theme }) => theme.colors.brandSky};
+  }
+
+  &:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: -3px;
+  }
+`;
+export const NavBadge = styled.span `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 44px;
+  height: 18px;
+  padding: 0 8px;
+  border-radius: ${({ theme }) => theme.borderRadius.pill};
+  background: ${({ theme }) => theme.colors.accentSky};
+  color: ${({ theme }) => theme.colors.light};
+  font-size: 0.5rem;
+  font-weight: ${({ theme }) => theme.fontWeight.black};
+  letter-spacing: 0.1em;
+  line-height: ${({ theme }) => theme.typography.lineHeight.tight};
+  text-transform: uppercase;
+  white-space: nowrap;
+`;
+export const NavBadgeLabel = styled.span `
+  display: inline-block;
+`;
+export const HeaderAction = styled.a `
+  width: auto;
+  min-height: 44px;
+  justify-self: end;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  padding: 11px 18px;
+  border-radius: ${({ theme }) => theme.borderRadius.capsule};
+  background-color: ${({ $variant, theme }) => $variant === 'inverse' ? theme.colors.light : theme.colors.brandSky};
+  background-image: ${({ $variant, theme }) => $variant === 'inverse'
+    ? 'none'
+    : `linear-gradient(90deg, ${theme.colors.light} 0, ${theme.colors.light} calc(50vw + ${bandHalf}), transparent calc(50vw + ${bandHalf}))`};
+  background-attachment: fixed;
+  background-size: 100vw 100vh;
+  background-repeat: no-repeat;
+  color: ${({ theme }) => theme.colors.ink};
+  font-size: 0.92rem;
+  font-weight: ${({ theme }) => theme.fontWeight.bold};
+  letter-spacing: 0;
+  line-height: 1.25;
+  white-space: nowrap;
+  transition:
+    transform ${({ theme }) => theme.motion.duration.fast}
+      ${({ theme }) => theme.motion.easing.standard},
+    opacity ${({ theme }) => theme.motion.duration.fast}
+      ${({ theme }) => theme.motion.easing.standard};
+
+  &:hover {
+    opacity: 0.96;
+    transform: translateY(-1px);
+  }
+
+  &:focus-visible {
+    outline: 2px solid
+      ${({ $variant, theme }) => ($variant === 'inverse' ? theme.colors.light : theme.colors.ink)};
+    outline-offset: 3px;
+  }
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    display: inline-flex;
+    min-width: ${({ theme }) => theme.layout.headerActionWidth};
+    width: max-content;
+    min-height: 50px;
+    padding: 12px;
+    font-size: 1rem;
+  }
+`;
+export const HeaderActionArrow = styled.span `
+  font-size: 1rem;
+  line-height: 1;
+  justify-self: end;
+`;
+export const HeaderMobileToggle = styled.button `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  border: 0;
+  border-radius: ${({ theme }) => theme.borderRadius.pill};
+  background: ${({ theme }) => theme.colors.light};
+  color: ${({ theme }) => theme.colors.ink};
+  box-shadow: ${({ theme }) => theme.shadow.button};
+  transition:
+    transform ${({ theme }) => theme.motion.duration.fast}
+      ${({ theme }) => theme.motion.easing.standard},
+    box-shadow ${({ theme }) => theme.motion.duration.fast}
+      ${({ theme }) => theme.motion.easing.standard};
+
+  &:hover {
+    transform: translateY(-1px);
+    box-shadow: ${({ theme }) => theme.shadow.md};
+  }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow:
+      0 0 0 3px ${({ theme }) => theme.colors.focusRing},
+      ${({ theme }) => theme.shadow.button};
+  }
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    display: none;
+  }
+`;
+export const HeaderMobileToggleIcon = styled.span `
+  position: relative;
+  display: block;
+  width: 20px;
+  height: 20px;
+
+  &::before,
+  &::after,
+  span {
+    content: '';
+    position: absolute;
+    left: 2px;
+    right: 2px;
+    height: 2px;
+    border-radius: ${({ theme }) => theme.borderRadius.pill};
+    background: currentColor;
+    transition:
+      transform ${({ theme }) => theme.motion.duration.fast}
+        ${({ theme }) => theme.motion.easing.standard},
+      top ${({ theme }) => theme.motion.duration.fast}
+        ${({ theme }) => theme.motion.easing.standard},
+      opacity ${({ theme }) => theme.motion.duration.fast}
+        ${({ theme }) => theme.motion.easing.standard};
+  }
+
+  &::before {
+    top: ${({ $open }) => ($open ? '9px' : '5px')};
+    transform: ${({ $open }) => ($open ? 'rotate(45deg)' : 'none')};
+  }
+
+  span {
+    top: 9px;
+    opacity: ${({ $open }) => ($open ? 0 : 1)};
+  }
+
+  &::after {
+    top: ${({ $open }) => ($open ? '9px' : '13px')};
+    transform: ${({ $open }) => ($open ? 'rotate(-45deg)' : 'none')};
+  }
+`;
+export const HeaderMobileOverlay = styled.div `
+  position: fixed;
+  inset: 0;
+  z-index: ${({ theme }) => theme.zIndex.overlay};
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  padding: 62px 6px 6px;
+  background: rgb(0 0 0 / 0.08);
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    display: none;
+  }
+`;
+export const HeaderMobileSheet = styled.div `
+  width: min(calc(100% - 12px), 375px);
+  padding: 16px;
+  padding-bottom: 36px;
+  border-radius: 34px 34px 62px 62px;
+  background: ${({ theme }) => theme.colors.brandSky};
+  box-shadow: ${({ theme }) => theme.shadow.overlayModal};
+`;
+export const HeaderMobileNav = styled.nav `
+  display: grid;
+  gap: 0;
+`;
+export const HeaderMobileNavLink = styled.a `
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 52px;
+  padding: 16px;
+  color: ${({ theme }) => theme.colors.ink};
+  font-size: ${({ theme }) => theme.typography.fontSize.body};
+  font-weight: ${({ theme }) => theme.fontWeight.bold};
+  letter-spacing: -0.02em;
+  line-height: ${({ theme }) => theme.typography.lineHeight.compact};
+  text-decoration: none;
+
+  &:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: -4px;
+    border-radius: ${({ theme }) => theme.borderRadius.control};
+  }
+`;
+export const HeaderMobileNavGroup = styled.div `
+  display: grid;
+  gap: 0;
+`;
+export const HeaderMobileNavGroupToggle = styled.button `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 6px;
+  width: 100%;
+  min-height: 52px;
+  margin: 0;
+  padding: 16px;
+  border: 0;
+  background: transparent;
+  color: ${({ theme }) => theme.colors.ink};
+  cursor: pointer;
+  font-family: inherit;
+  font-size: ${({ theme }) => theme.typography.fontSize.body};
+  font-weight: ${({ theme }) => theme.fontWeight.bold};
+  letter-spacing: -0.02em;
+  line-height: ${({ theme }) => theme.typography.lineHeight.compact};
+  text-align: left;
+
+  &:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: -4px;
+    border-radius: ${({ theme }) => theme.borderRadius.control};
+  }
+`;
+export const HeaderMobileNavGroupChevron = styled.span `
+  position: relative;
+  width: 20px;
+  height: 20px;
+  flex: 0 0 auto;
+  opacity: 0.5;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 8px;
+    height: 8px;
+    border-right: 2px solid currentColor;
+    border-bottom: 2px solid currentColor;
+    /* Offset the rotated caret so its visual mass stays centred in both states. */
+    transform: translate(-50%, ${({ $open }) => ($open ? '-25%' : '-75%')})
+      rotate(${({ $open }) => ($open ? '225deg' : '45deg')});
+    transform-origin: center;
+    transition: transform ${({ theme }) => theme.motion.duration.fast}
+      ${({ theme }) => theme.motion.easing.standard};
+  }
+`;
+/* Animated disclosure: grid-template-rows 0fr -> 1fr gives a smooth height
+   transition without measuring the content. The inner element clips the rows. */
+export const HeaderMobileNavGroupPanel = styled.div `
+  display: grid;
+  grid-template-rows: ${({ $open }) => ($open ? '1fr' : '0fr')};
+  transition: grid-template-rows ${({ theme }) => theme.motion.duration.normal}
+    ${({ theme }) => theme.motion.easing.emphasized};
+`;
+export const HeaderMobileNavGroupPanelInner = styled.div `
+  overflow: hidden;
+  min-height: 0;
+  opacity: ${({ $open }) => ($open ? 1 : 0)};
+  transition: opacity ${({ theme }) => theme.motion.duration.fast}
+    ${({ theme }) => theme.motion.easing.standard};
+`;
+export const HeaderMobileNavSubList = styled.div `
+  display: grid;
+  gap: 2px;
+  margin: 2px 0 10px 26px;
+  padding-left: 14px;
+  border-left: 1.5px solid rgb(0 0 0 / 0.12);
+`;
+export const HeaderMobileNavSubLink = styled.a `
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 40px;
+  padding: 8px 12px;
+  border-radius: ${({ theme }) => theme.borderRadius.control};
+  color: ${({ theme }) => theme.colors.textDarkSubtle};
+  font-size: ${({ theme }) => theme.typography.fontSize.bodySm};
+  font-weight: ${({ theme }) => theme.fontWeight.semibold};
+  letter-spacing: -0.02em;
+  line-height: ${({ theme }) => theme.typography.lineHeight.compact};
+  text-decoration: none;
+  transition:
+    color ${({ theme }) => theme.motion.duration.fast}
+      ${({ theme }) => theme.motion.easing.standard},
+    background-color ${({ theme }) => theme.motion.duration.fast}
+      ${({ theme }) => theme.motion.easing.standard};
+
+  &:hover {
+    color: ${({ theme }) => theme.colors.ink};
+    background: rgb(255 255 255 / 0.4);
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${({ theme }) => theme.colors.ink};
+    outline-offset: -4px;
+  }
+`;
+export const HeaderMobileNavDisabledItem = styled.span `
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 52px;
+  padding: 16px;
+  color: ${({ theme }) => theme.colors.textDarkSubtle};
+  cursor: default;
+  font-size: ${({ theme }) => theme.typography.fontSize.body};
+  font-weight: ${({ theme }) => theme.fontWeight.bold};
+  letter-spacing: 0;
+  line-height: ${({ theme }) => theme.typography.lineHeight.compact};
+  opacity: 0.62;
+`;
+export const HeaderMobileSoonBadge = styled.span `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 44px;
+  height: 18px;
+  padding: 0 10px;
+  margin-left: 4px;
+  border-radius: ${({ theme }) => theme.borderRadius.pill};
+  background: rgb(255 255 255 / 0.42);
+  color: currentColor;
+  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.08);
+  font-size: 0.5rem;
+  font-weight: ${({ theme }) => theme.fontWeight.black};
+  letter-spacing: 0.1em;
+  line-height: ${({ theme }) => theme.typography.lineHeight.tight};
+  text-transform: uppercase;
+  white-space: nowrap;
+`;
+export const HeaderMobileLocaleSlot = styled.div `
+  width: 100%;
+  margin: 8px 0 12px;
+  padding: 0 16px;
+`;
+export const HeaderMobileWaitlistLink = styled.a `
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: ${({ theme }) => theme.sizes.md};
+  width: 100%;
+  height: 48px;
+  margin-top: 8px;
+  padding-left: 20px;
+  border-radius: ${({ theme }) => theme.borderRadius.capsule};
+  background: rgb(199 242 255 / 0.3);
+  color: ${({ theme }) => theme.colors.textDarkSubtle};
+  text-decoration: none;
+  overflow: hidden;
+
+  &:focus-visible {
+    outline: 2px solid ${({ theme }) => theme.colors.ink};
+    outline-offset: 4px;
+  }
+`;
+export const HeaderMobileWaitlistLabel = styled.span `
+  display: block;
+  min-width: 0;
+  font-size: ${({ theme }) => theme.typography.fontSize.bodySm};
+  font-weight: ${({ theme }) => theme.fontWeight.default};
+  line-height: 1.2857142857;
+  color: ${({ theme }) => theme.colors.textDarkSubtle};
+`;
+export const HeaderMobileWaitlistArrow = styled.span `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 72px;
+  height: 48px;
+  flex: 0 0 auto;
+  border-radius: ${({ theme }) => theme.borderRadius.capsule};
+  background: ${({ theme }) => theme.colors.surfaceDark};
+  color: ${({ theme }) => theme.colors.light};
+  font-size: ${({ theme }) => theme.typography.fontSize.bodyXl};
+  line-height: 1;
+`;