client/src/css/home.scss

$breakpoint-mobile: 767px;

// ----- 导航首页卡片尺寸（只改此块）-----
$nav-grid-gap: 0.75rem;
$nav-card-gap: 0.65rem;
$nav-card-pad-block: 0.75rem;
$nav-card-pad-inline: 0.85rem;
$nav-card-radius: 8px;
$nav-card-shot-radius: 6px;
$nav-title-size: 0.95rem;
$nav-subtitle-size: 0.82rem;

$nav-featured-width-narrow: 100%; // 单列竖排时大卡铺满轨宽
$nav-featured-width-wide: 60%; // 宽屏首行内宽度，对齐旧版双列中单列占比

// 小卡一键标度；只占格宽时用 track，只缩内边距/字时用 inner
$nav-compact-track-fraction: 0.9;
$nav-compact-inner-scale: 0.9;
// -----

body.nav-landing-page {
  --nav-landing-title-size: 22px;
  --nav-landing-title-weight: 600;
  --nav-landing-subtitle-size: 16px;
  --nav-landing-subtitle-weight: 400;
  --nav-landing-line-height: 1.2;
  --nav-landing-subtitle-line-height: 1.5;
  --nav-landing-card-bg: #eeeeee;
  --nav-landing-card-bg-hover: #e0e0e0;

  position: relative;
  min-height: 100vh;
  height: auto;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-color, #1a1a1a);
  background: var(--app-bg, #f5f5f5);
}

.nav-landing-settings {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: max(1.25rem, env(safe-area-inset-right));
  z-index: 10;
  box-sizing: border-box;
}

html[data-theme='dark'] body.nav-landing-page {
  color: var(--text-color, #e4e4e4);
  background: var(--app-bg, #121212);
  --nav-landing-card-bg: #2a2a2a;
  --nav-landing-card-bg-hover: #333333;
}

.nav-landing-main {
  width: 100%;
  max-width: 44rem;
  box-sizing: border-box;
  padding: 2rem 1.25rem;
}

@media (min-width: $breakpoint-mobile + 1) {
  .nav-landing-main {
    max-width: 64rem;
  }
}

.nav-landing-hero {
  text-align: center;
  margin-bottom: 2rem;
}

.nav-landing-title {
  font-size: var(--nav-landing-title-size);
  font-weight: var(--nav-landing-title-weight);
  line-height: var(--nav-landing-line-height);
  margin: 0 0 0.35rem 0;
}

.nav-landing-subtitle {
  margin: 0 auto;
  max-width: 40rem;
  font-size: var(--nav-landing-subtitle-size);
  font-weight: var(--nav-landing-subtitle-weight);
  line-height: var(--nav-landing-subtitle-line-height);
}

.nav-landing-heartline {
  margin: 2rem 0 0.35rem;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--text-color, #1a1a1a);
  opacity: 0.88;
  letter-spacing: 0.02em;
}

.nav-landing-hint {
  margin: 0;
  text-align: center;
  font-size: 0.8125rem;
  font-style: italic;
  line-height: 1.45;
  color: var(--text-muted, #666);
  opacity: 0.72;
  letter-spacing: 0.02em;
}

// 首行一张 featured，末行三张 compact；单列时竖排同序
.nav-landing-grid {
  display: grid;
  gap: $nav-grid-gap;
  justify-items: center;
  grid-template-columns: 1fr;
  grid-template-areas:
    'hero'
    'c1'
    'c2'
    'c3';
}

// 宽屏：首行大卡跨三列，末行三列各放一张小卡
@media (min-width: $breakpoint-mobile + 1) {
  .nav-landing-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
      'hero hero hero'
      'c1 c2 c3';
  }
}

// index.html 顺序：nth-child(1) featured，(2)(3)(4) 为三张 compact
.nav-landing-card--featured {
  grid-area: hero;
  width: $nav-featured-width-narrow;
  justify-self: stretch;
}

@media (min-width: $breakpoint-mobile + 1) {
  .nav-landing-card--featured {
    width: $nav-featured-width-wide;
    justify-self: center; // 在跨三列的首行里水平居中
  }
}

// 三张 compact 对应第二行 c1–c3（与 grid-template-areas 一致）
.nav-landing-card.nav-landing-card--compact:nth-child(2) {
  grid-area: c1;
  width: #{$nav-compact-track-fraction * 100%};
}

.nav-landing-card.nav-landing-card--compact:nth-child(3) {
  grid-area: c2;
  width: #{$nav-compact-track-fraction * 100%};
}

.nav-landing-card.nav-landing-card--compact:nth-child(4) {
  grid-area: c3;
  width: #{$nav-compact-track-fraction * 100%};
}

// 双类链：特异性高于单独 .nav-landing-card，避免基类盖掉小卡的 padding/gap
.nav-landing-card.nav-landing-card--compact {
  padding: #{$nav-card-pad-block * $nav-compact-inner-scale} #{$nav-card-pad-inline * $nav-compact-inner-scale};
  gap: #{$nav-card-gap * $nav-compact-inner-scale};
  border-radius: #{$nav-card-radius * $nav-compact-inner-scale};

  .nav-landing-card-title {
    font-size: #{$nav-title-size * $nav-compact-inner-scale};
  }

  .nav-landing-card-subtitle {
    font-size: #{$nav-subtitle-size * $nav-compact-inner-scale};
  }

  .nav-landing-card-shot {
    border-radius: #{$nav-card-shot-radius * $nav-compact-inner-scale};
  }
}

// 大卡与小卡共用基类；小卡另加 .nav-landing-card--compact 覆写尺寸
.nav-landing-card {
  display: flex;
  flex-direction: column;
  gap: $nav-card-gap;
  padding: $nav-card-pad-block $nav-card-pad-inline;
  border-radius: $nav-card-radius;
  text-decoration: none;
  color: inherit;
  text-align: left;
  background: var(--nav-landing-card-bg, #e6e6e6);
  border: 1px solid var(--border-color, #ddd);
  transition: background 0.15s ease, border-color 0.15s ease;
  box-sizing: border-box;

  &:hover {
    background: var(--nav-landing-card-bg-hover, #dcdcdc);
  }
}

html[data-theme='dark'] .nav-landing-card {
  border-color: var(--border-color, #333);
}

.nav-landing-card-text {
  padding: 0;
}

.nav-landing-card-title {
  display: block;
  font-size: $nav-title-size;
  font-weight: 600;
  line-height: var(--nav-landing-line-height);
}

.nav-landing-card-subtitle {
  display: block;
  text-align: right;
  font-size: $nav-subtitle-size;
  font-weight: 400;
  line-height: var(--nav-landing-line-height);
  color: var(--text-muted, #666);
}

.nav-landing-card-shot {
  flex-shrink: 0;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: $nav-card-shot-radius;
  box-sizing: border-box;
  background: var(--bg-hover, #f0f0f0);
  background-size: cover;
  background-position: left top;
  background-repeat: no-repeat;
}

.nav-landing-card[data-nav-page='analysis'] .nav-landing-card-shot {
  background-image: url('../content/images/highlight.png');
  background-color: var(--bg-hover, #f0f0f0);
}

.nav-landing-card[data-nav-page='chat'] .nav-landing-card-shot {
  background-image: url('../content/images/chat.png');
  background-color: var(--bg-hover, #f0f0f0);
}

.nav-landing-card[data-nav-page='attribution'] .nav-landing-card-shot {
  background-image: url('../content/images/attribute.png');
  background-color: var(--bg-hover, #f0f0f0);
}

.nav-landing-card[data-nav-page='genAttribute'] video.nav-landing-card-shot {
  object-fit: cover;
  object-position: left top;
  display: block;
  background-color: var(--bg-hover, #f0f0f0);
}

html[data-theme='dark'] .nav-landing-card[data-nav-page='genAttribute'] video.nav-landing-card-shot {
  background-color: var(--bg-hover, #2a2a2a);
}

html[data-theme='dark'] .nav-landing-card[data-nav-page='analysis'] .nav-landing-card-shot {
  background-image: url('../content/images/highlight-dark.png');
  background-color: var(--bg-hover, #2a2a2a);
}

html[data-theme='dark'] .nav-landing-card[data-nav-page='chat'] .nav-landing-card-shot {
  background-image: url('../content/images/chat-dark.png');
  background-color: var(--bg-hover, #2a2a2a);
}

html[data-theme='dark'] .nav-landing-card[data-nav-page='attribution'] .nav-landing-card-shot {
  background-image: url('../content/images/attribute-dark.png');
  background-color: var(--bg-hover, #2a2a2a);
}