GoldenPlan-front/src/app/globals.css

@import "tailwindcss";

/* 参考 Edulan 类 LMS：清爽蓝系主色、大留白、卡片阴影与分区背景；结合本站金融教育调性 */
:root {
  --background: #f0f4fa;
  --foreground: #0f172a;
  --muted: #64748b;
  --card: #ffffff;
  --border: #e2e8f0;
  --accent: #d4a012;
  --accent-hover: #e5b82a;
  --accent-foreground: #0f172a;
  --navy: #0c1929;
  --navy-soft: #152a45;
  --primary: #1d4ed8;
  --primary-soft: #3b82f6;
  --surface-muted: #e8eef7;
  --hero-glow: rgba(59, 130, 246, 0.35);
  --container-max: 80rem;
  --container-px: 1rem;
  --section-py: 4rem;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-muted: var(--muted);
  --color-card: var(--card);
  --color-border: var(--border);
  --color-accent: var(--accent);
  --color-accent-hover: var(--accent-hover);
  --color-navy: var(--navy);
  --color-navy-soft: var(--navy-soft);
  --color-primary-500: var(--primary-soft);
  --color-primary-600: #2563eb;
  --color-primary-700: #1d4ed8;
  --font-sans: var(--font-noto-sans);
  --font-serif: var(--font-noto-serif);
  --shadow-card: 0 4px 6px -1px rgb(15 23 42 / 0.06), 0 12px 24px -4px rgb(15 23 42 / 0.08);
  --shadow-card-hover: 0 12px 32px -8px rgb(15 23 42 / 0.12), 0 4px 12px -2px rgb(15 23 42 / 0.06);
  --radius-card: 1.25rem;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans), system-ui, sans-serif;
}

.site-container {
  margin-inline: auto;
  width: 100%;
  max-width: var(--container-max);
  padding-inline: var(--container-px);
}

.section-block {
  padding-block: var(--section-py);
}

.section-block-compact {
  padding-block: clamp(2.25rem, 7vw, 3.5rem);
}

.mobile-safe-pb {
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
}

/*
  布局约定（新页面请按类型选一种，勿混用 site-container + max-w-*）：
  - .site-container：全站主栏 max 80rem，与顶栏/底栏对齐。
  - .section-block / .section-block-compact：区块上下留白。
  - .page-shell*：正文阅读区，横向 padding 用 --container-px，与顶栏一致。
  - .auth-page-shell：表单窄页 max 28rem，禁止再包 site-container。
*/
.page-shell {
  box-sizing: border-box;
  margin-inline: auto;
  width: 100%;
  max-width: 48rem;
  padding-inline: var(--container-px);
  padding-block: clamp(2.5rem, 5vw, 3rem);
}

@media (min-width: 768px) {
  .page-shell {
    padding-block: 3rem;
  }
}

.page-shell-wide {
  max-width: 1200px;
}

.page-shell-md {
  max-width: 36rem;
}

.page-shell-sm {
  max-width: 32rem;
}

/* 登录/注册等窄页：不要用 site-container（会与 max-w-md 抢 max-width，导致 PC 上表单过宽） */
.auth-page-shell {
  margin-inline: auto;
  width: 100%;
  max-width: 28rem;
  padding-inline: 1rem;
  padding-block: clamp(2.5rem, 8vw, 4rem);
}

@media (min-width: 768px) {
  .auth-page-shell {
    padding-block: 4rem;
  }
}

.font-serif {
  font-family: var(--font-serif), "Noto Serif SC", serif;
}

.text-muted-foreground {
  color: var(--muted);
}

/* 页面底纹：网格 + 柔光（Edulan 常见层次） */
.bg-page {
  background-color: var(--background);
  background-image:
    linear-gradient(180deg, rgb(255 255 255 / 0.72) 0%, transparent 32%),
    radial-gradient(ellipse 80% 50% at 50% -20%, rgb(59 130 246 / 0.12), transparent),
    linear-gradient(
      rgb(15 23 42 / 0.03) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgb(15 23 42 / 0.03) 1px,
      transparent 1px
    );
  background-size: auto, auto, 48px 48px, 48px 48px;
}

@media (min-width: 640px) {
  :root {
    --container-px: 1.25rem;
  }
}

@media (min-width: 768px) {
  :root {
    --container-px: 2rem;
    --section-py: 5rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --container-px: 2rem;
    --section-py: 5rem;
  }
}

@media (max-width: 767px) {
  .bg-page {
    background-size: auto, auto, 32px 32px, 32px 32px;
  }
}

.shadow-card {
  box-shadow: var(--shadow-card);
}

.shadow-card-hover {
  box-shadow: var(--shadow-card-hover);
}

/* 英雄区网格纹理 */
.hero-grid {
  background-image:
    linear-gradient(rgb(255 255 255 / 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* 底部波浪装饰 */
.footer-wave {
  background: linear-gradient(180deg, var(--background) 0%, var(--navy) 100%);
}

/* Reusable interaction primitives */
@keyframes ui-fade-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ui-skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.ui-enter {
  animation: ui-fade-up 0.45s ease both;
}

.ui-enter-delay-1 {
  animation-delay: 0.08s;
}

.ui-enter-delay-2 {
  animation-delay: 0.16s;
}

.ui-enter-delay-3 {
  animation-delay: 0.24s;
}

.ui-interactive-card {
  transition: transform 280ms ease, box-shadow 280ms ease, border-color 280ms ease;
  transform: translateY(0);
}

.ui-interactive-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
  border-color: rgb(148 163 184 / 0.35);
}

.ui-interactive-btn {
  transition: transform 220ms ease, box-shadow 220ms ease, filter 220ms ease;
}

.ui-interactive-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
}

.ui-interactive-btn:active {
  transform: translateY(0);
}

.ui-skeleton {
  background: linear-gradient(90deg, #e8edf5 25%, #f3f6fb 37%, #e8edf5 63%);
  background-size: 400% 100%;
  animation: ui-skeleton-shimmer 1.4s ease infinite;
}